I've add the gkTestimonial to overide.css
- Code: Select all
/* Testimonials */
.gkTestimonial:before {
display: none;
}
.gkTestimonial {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
margin: 0;
padding: 0 24px;
}
.gkTestimonial.col1 { width: 100%; }
.gkTestimonial.col2 { width: 50%; }
.gkTestimonial.col3 { width: 33.3%; }
.gkTestimonial.col4 { width: 25%; }
.gkTestimonial img {
float: left;
margin: 4px 32px 4px 0;
}
.gkTestimonial p {
color: #888;
line-height: 28px;
margin: 0;
font-style: normal;
}
.gkTestimonial p cite {
color: #333;
display: block;
margin: 20px 0 0 0;
}
/* Testimonial - animation */
.gkTestimonial.animate {
opacity: 0; filter: alpha(opacity=0);
position: relative;
-webkit-transition: all .4s ease-out;
-moz-transition: all .4s ease-out;
-ms-transition: all .4s ease-out;
-o-transition: all .4s ease-out;
transition: all .4s ease-out;
}
.gkTestimonial.animate.loaded {
opacity: 1; filter: alpha(opacity=100);
}
.gkTestimonial.animate.col2,
.gkTestimonial.animate.col3,
.gkTestimonial.animate.col4 {
left: -300px;
}
.gkTestimonial.animate.col2 + .gkTestimonial.animate.col2,
.gkTestimonial.animate.col3:nth-child(3),
.gkTestimonial.animate.col4:nth-child(4) {
left: 300px;
}
.gkTestimonial.animate.col2.loaded,
.gkTestimonial.animate.col3.loaded,
.gkTestimonial.animate.col4.loaded {
left: 0!important;
}
And I used the following code for my site (at the bottom)
- Code: Select all
<div class="gkTeam" data-cols="1" data-pages="2">
<div>
<div class="active">
<blockquote data-scroll-reveal="enter left and move 50px over 0.6s after 0.3s" class="gkTestimonial col1">
<img src="images/portfolio/esther-siewert_clique-pr.jpg" width="15%" border="0" alt="Esther Siewert" />
<p><i>“Michael is een harde werker en bovendien enorm betrokken. Je kan hem bellen met je vraag of probleem, en hij lost het letterlijk meteen nog op. Betrouwbaar en hard werken is voor mij enorm belangrijk. Maar bovendien een goed resultaat wat bij mij en mijn bedrijf past.”</i> <cite>Esther Siewert - Clique PR</cite></p>
</blockquote>
</div>
<div>
<blockquote data-scroll-reveal="enter right and move 50px over 0.6s after 0.3s" class="gkTestimonial col2">
<img src="media/k2/galleries/330/ymar_producties-logo.png" width="15%" border="0" alt="Ymar Producties" />
<p><i>“Professioneel, zakelijk, maar vooral ook een strak design. Dat waren onze wensen vooraf voor de nieuw te ontwikkelen website. Wensen die perfect zijn ingevuld door Funkiej Webdesign. Daarbij heeft Funkiej Webdesign gezorgd voor extra functionaliteiten, zoals een subpagina waarop Ymar Producties (stock) foto’s toont aan de bezoekers van de website. Bij de ontwikkeling van onze website heeft Funkiej Webdesign aangetoond snel, flexibel en deskundig te zijn. Geen vraag was te veel, iets dat erg prettig is bij een dynamisch proces zoals de ontwikkeling van een nieuwe website.”</i> <cite>Ymar Producies</cite></p>
</blockquote>
</div>
</div>
</div>
If I'm correct this would show a page with content and on the second page the other content, but when I browse to the second page, it's empty
If you look very closely you see the second content fly by when you browse to the next page.....
