Good day,
I'm trying to built a jQuery slider (with no plugins) Testimonials as per the image below:
Testimonial slider example:
The red box will be the visible part for the user.
The animation should work as follow:
Person 2 will be in view as page loads, after 3 seconds person 2 needs to move to the left and person 3 needs to move to the center - as it moves to the center it needs to reveal copy. Person 1 will move to the next in line (looping function)
This is my current jQuery:
setInterval( function () {
$(".people-carousel-container .inner-testimonial").append(
$('.people-carousel-container .slide')
.first().removeClass("active").addClass('small'));
$(".people-carousel-container .slide")
.first().removeClass('small').addClass("active")
}, 4000);
This is my current HTML:
<div class="inner-testimonial">
<div class="slide small">
<h4>Great platform Easy to use and received my first product today!</h4>
<div class="image-box">
<img src="resources/front/img/profile-placeholder-img.png" alt="product image">
<p>Jane Smith</p>
</div>
</div>
<div class="slide active">
<h4>Ut enim ad minim veniam, quis nostrud exercitation quis minim</h4>
<div class="image-box">
<img src="resources/front/img/profile-placeholder-img-1.png" alt="product image">
<p>Jonny Tell</p>
</div>
</div>
<div class="slide small">
<h4>Lorem ipsum dolor sit amet, consectetur adipiscing eli. dolor</h4>
<div class="image-box">
<img src="resources/front/img/profile-placeholder-img-2.png" alt="product image">
<p>Mick Dooper</p>
</div>
</div>
</div>
Is there away to built this?