I'm trying to add the gk-testimonials functionality to my website being built using the Events template.
I've added the following code to my override.css file:
.gk-testimonials {
text-align: center;
position: relative;
}
.gk-testimonials > div {
margin: 80px auto 50px auto;
overflow: hidden;
width: 94%;
}
.gk-testimonials > div > div {
-webkit-transition: all .6s ease-out;
-moz-transition: all .6s ease-out;
-ms-transition: all .6s ease-out;
-o-transition: all .6s ease-out;
transition: all .6s ease-out;
width: 100%;
}
.gk-testimonials[data-amount="2"] > div > div { width: 200%; }
.gk-testimonials[data-amount="3"] > div > div { width: 300%; }
.gk-testimonials[data-amount="4"] > div > div { width: 400%; }
.gk-testimonials[data-amount="5"] > div > div { width: 500%; }
.gk-testimonials[data-amount="6"] > div > div { width: 600%; }
.gk-testimonials[data-amount="7"] > div > div { width: 700%; }
.gk-testimonials[data-amount="8"] > div > div { width: 800%; }
.gk-testimonials blockquote {
float: left;
margin: 0 1.5%;
width: 75%;
}
.gk-testimonials[data-amount="2"] blockquote {
margin: 0 6.25%;
width: 37.5%;
}
.gk-testimonials[data-amount="3"] blockquote {
margin: 0 4.166666%;
width: 25%;
}
.gk-testimonials[data-amount="4"] blockquote {
margin: 0 3.125%;
width: 18.75%;
}
.gk-testimonials[data-amount="5"] blockquote {
margin: 0 2.5%;
width: 15%;
}
.gk-testimonials[data-amount="6"] blockquote {
margin: 0 2.083333%;
width: 12.5%;
}
.gk-testimonials[data-amount="7"] blockquote {
margin: 0 1.785714%;
width: 10.714285%;
}
.gk-testimonials[data-amount="8"] blockquote {
margin: 0 1.5625%;
width: 9.375%;
}
.gk-testimonials blockquote {
opacity: 1;
-webkit-transition: all .15s ease-out;
-moz-transition: all .15s ease-out;
-ms-transition: all .15s ease-out;
-o-transition: all .15s ease-out;
transition: all .15s ease-out;
}
.gk-testimonials blockquote p {
line-height: 2;
}
.gk-testimonials blockquote.hidden {
display: block;
opacity: 0;
}
.gk-testimonials > .button-border {
display: inline-block;
float: none;
}
.gk-testimonials-prev,
.gk-testimonials-next {
border: 1px solid #d5d5d5;
border-right: none;
border-bottom: none;
cursor: pointer;
display: block;
left: 0;
height: 60px;
margin-top: 20px;
opacity: 1;
position: absolute;
top: 0;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
width: 60px;
}
.gk-testimonials-prev:hover {
left: -10px;
}
.gk-testimonials-prev:active,
.gk-testimonials-prev:focus,
.gk-testimonials-prev:hover,
.gk-testimonials-next:active,
.gk-testimonials-next:focus,
.gk-testimonials-next:hover {
border-color: #d27244;
}
.gk-testimonials-next {
left: auto;
right: 0;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.gk-testimonials-next:hover {
right: -10px;
}
.gk-testimonials-pagination {
position: absolute;
text-align: center;
top: -60px;
width: 100%;
}
.gk-testimonials-pagination li {
background: #d5d5d5;
border: none;
border-radius: 50%;
cursor: pointer;
display: inline-block;
height: 8px;
margin: 0 2px;
overflow: hidden;
padding: 0;
text-indent: -9999px;
width: 8px;
}
.gk-testimonials-pagination li.active {
background: #d27244;
}
I'm then able to create a custom module and set up testimonials but the prev & next arrows/functionality are missing so you can't slide between testimonials.
Help please
