Check out the fiddle link here: http://jsfiddle.net/br24p3Lr/
I've been attempting to perfect the animation when transitioning to a new active slide. Despite trying various approaches to resolve this issue, I seem to be stuck at the moment.
The following is the HTML code snippet:
<section class="ringenslider-wrapper">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2><?php _e('Popular models'); ?></h2>
</div>
</div>
</div>
<ul class="ringenslider">
<li class="product-slide">
<div class="product-slide-wrap">
<div class="product-image">
<img src="https://i.imgur.com/hyEkF58.png" alt="" />
</div>
<div class="product-info">
<h3>Steinberg Ring 1</h3>
<div class="prijs">
€499
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.
</p>
<div class="button-slider-wrap">
<a class="button-slider" href="#">
Nu bestellen
</a>
</div>
</div>
</div>
</li>
(additional product-slide items listed here)
</ul>
</section>
This is the corresponding JavaScript section:
(function ($) {
"use strict";
$(document).ready(function() {
//Ringenslider
$('.ringenslider').slick({
infinite: false,
slidesToShow: 1,
draggable: false,
centerMode:false,
swipe: false,
dots:false,
fade:false,
speed:745,
cssEase: 'ease',
useTransform: true,
nextArrow: '<a class="slide-next">Volgende <i class="fa fa-angle-right" aria-hidden="true"></i></a>',
prevArrow: '<a class="slide-prev"><i class="fa fa-angle-left" aria-hidden="true"></i> Vorige</a>',
variableWidth: true,
responsive: [{
breakpoint: 1200
, settings: {
slidesToShow: 3
}
}, {
breakpoint: 992
, settings: {
slidesToShow: 2
}
}, {
breakpoint: 768
, settings: {
speed: 250
,arrows: !1
,swipe: !0
,centerMode: !0
,slidesToShow: 1
}
}]
});
});
}(jQuery));
And lastly, here is the CSS styles section:
/* Styling for Ringenslider Wrapper */
.ringenslider-wrapper {
position:relative;
float:left;
width:100%;
padding:0 0 80px 0;
}
(additional CSS rules listed here)
I've experimented with several solutions, but the animation remains glitchy and inconsistent.
Your assistance in resolving this matter would be greatly appreciated.
Regards, Dylan Smit