jQuery(".stepSlider").owlCarousel({
// center : true,
loop : true,
smartSpeed: 1000,
margin:10,
nav : true,
dots : true,
responsive : {
0 : {
items : 3,
margin:50
},
1025 : {
items : 5,
},
},
onInitialized : function(e){
var center = parseInt(e.page.size / 2);
setCenter(e,center);
},
onChanged : function(e){
var center = parseInt(e.page.size / 2);
center = center + 1;
// setCenter(e,center);
},
onTranslate : function(e){
setTimeout(function(){
var center = parseInt(e.page.size / 2);
setCenter(e,center);
var $this = jQuery('.stepSlider .owl-item.center');
if(!$this.hasClass('is_transform')){
onTranslatedCustom(e);
}
},800);
},
onTranslated : function(e){
var center = parseInt(e.page.size / 2);
jQuery('.stepSlider .owl-item').not('.active').find('.icon-box').css({"transform": "translate3d(0px, 0px, 0px)"});
jQuery('.stepSlider .owl-item.center').removeClass('is_transform');
},
onDragged : function(e){
var center = parseInt(e.page.size / 2);
setCenter(e,center);
onTranslatedCustom(e);
jQuery('.stepSlider .owl-item.center').addClass('is_transform');
}
});
function setCenter(e, center){
// console.log(e.relatedTarget['_drag']['direction']);
jQuery('.stepSlider .owl-item.active').not(':eq('+center+')').removeClass('center');
jQuery('.stepSlider .owl-item.active').eq(center).addClass('center');
}
function onTranslatedCustom(e){
var idx = e.item.index;
// console.log(idx);
var $this = jQuery('.stepSlider .owl-item.center');
var $sPre = $this.prev();
var $spPreBefore = $this.prev().prev();
var $sNext = $this.next();
var $sNextAfter = $this.next().next();
var intval = 140;
var intval1 = 100;
$this.animate({'opacity': '100'},
{
step: function (now, fx) {
var per = now - 200;
var perFirst = per + 60;
var perSecond = perSecond + 100;
$this.find('.icon-box').css({"transform": "translate3d(0px, -"+now+"px, 0px)"});
$sPre.find('.icon-box').css({"transform": "translate3d(0px, "+(now - intval)+"px, 0px)"});
if( parseInt(now) < 40){
// $sNext.css({"transform": "translate3d(0px, -"+now+"px, 0px)"});
$sNext.find('.icon-box').css({"transform": "translate3d(0px, -40px, 0px)"});
}
if( parseInt(now - intval1) >= -40){
$spPreBefore.find('.icon-box').css({"transform": "translate3d(0px, "+(now - intval1)+"px, 0px)"});
// $spPreBefore.css({"transform": "translate3d(0px, 40px, 0px)"});
}
},
duration: 800,
complete: function() {
jQuery('.owl-item.last-center').removeClass('last-center');
$this.addClass('last-center');
}
});
}
.stepSlider .owl-stage-outer{padding-top:200px}
.reminder-main .desc {
text-align: center;
}
.stepSlider .desc {
margin-top: 0;
visibility: hidden;
opacity: 0;
width: 645px;
position: relative;
left: 50%;
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
.stepSlider .center .desc {
visibility: visible;
opacity: 1;
-webkit-transition: all 0.8s ease 0.5s;
transition: all 0.8s ease 0.5s;
}
.owl-dot span {
background: #FFF;
border: solid 2px #dcdcdc;
height: 12px;
width: 12px;
display: inline-block;
border-radius: 100%;
}
.owl-dot.active span {
border-color: #00c393;
background: #00c393;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet"/>
<div class="stepSlider owl-carousel">
<div class="item" data-position="0">
<div class="icon-box">
<figure clas="reminder-icon"><img src="http://mb.project-preview.com.au/get-reminded/wp-content/uploads/2017/09/icon1.svg" alt="Travel 0"></figure>
</div>
<div class="desc">
<h4 class="title">Travel 0</h4>
Far far away, behind the words mountains, far from the countries Vokalia and<br /> Consoantia, there live the blind texts
</div>
</div>
<div class="item" data-position="1">
<div class="icon-box">
<figure clas="reminder-icon"><img src="http://mb.project-preview.com.au/get-reminded/wp-content/uploads/2017/09/icon1.svg" alt="Energy 1"></figure>
</div>
<div class="desc">
<h4 class="title">Energy 1</h4>
Far far away, behind the words mountains, far from the countries Vokalia and<br /> Consoantia, there live the blind texts
</div>
</div>
<div class="item" data-position="2">
<div class="icon-box">
<figure clas="reminder-icon"><img src="http://mb.project-preview.com.au/get-reminded/wp-content/uploads/2017/09/icon1.svg" alt="Car rego 2"></figure>
</div>
<div class="desc">
<h4 class="title">Car rego 2</h4>
Far far away, behind the words mountains, far from the countries Vokalia and<br /> Consoantia, there live the blind texts
</div>
</div>
<div class="item" data-position="3">
<div class="icon-box">
<figure clas="reminder-icon"><img src="http://mb.project-preview.com.au/get-reminded/wp-content/uploads/2017/09/icon1.svg" alt="Home Loans 3"></figure>
</div>
<div class="desc">
<h4 class="title">Home Loans 3</h4>
Far far away, behind the words mountains, far from the countries Vokalia and<br /> Consoantia, there live the blind texts
</div>
</div>
<div class="item" data-position="4">
<div class="icon-box">
<figure clas="reminder-icon"><img src="http://mb.project-preview.com.au/get-reminded/wp-content/uploads/2017/09/icon1.svg" alt="Insurance 4"></figure>
</div>
<div class="desc">
<h4 class="title">Insurance 4</h4>
Far far away, behind the words mountains, far from the countries Vokalia and<br /> Consoantia, there live the blind texts
</div>
</div>
<div class="item" data-position="5">
<div class="icon-box">
<figure clas="reminder-icon"><img src="http://mb.project-preview.com.au/get-reminded/wp-content/uploads/2017/09/icon1.svg" alt="Interest-free Finance 5"></figure>
</div>
<div class="desc">
<h4 class="title">Interest-free Finance 5</h4>
Far far away, behind the words mountains, far from the countries Vokalia and<br /> Consoantia, there live the blind texts
</div>
</div>
<div class="item" data-position="6">
<div class="icon-box">
<figure clas="reminder-icon"><img src="http://mb.project-preview.com.au/get-reminded/wp-content/uploads/2017/09/icon1.svg" alt="Interest-free Finance 6"></figure>
</div>
<div class="desc">
<h4 class="title">Interest-free Finance 6</h4>
Far far away, behind the words mountains, far from the countries Vokalia and<br /> Consoantia, there live the blind texts
</div>
</div>
<div class="item" data-position="7">
<div class="icon-box">
<figure clas="reminder-icon"><img src="http://mb.project-preview.com.au/get-reminded/wp-content/uploads/2017/09/icon1.svg" alt="Interest-free Finance 7"></figure>
</div>
<div class="desc">
<h4 class="title">Interest-free Finance 7</h4>
Far far away, behind the words mountains, far from the countries Vokalia and<br /> Consoantia, there live the blind texts
</div>
</div>
<div class="item" data-position="8">
<div class="icon-box">
<figure clas="reminder-icon"><img src="http://mb.project-preview.com.au/get-reminded/wp-content/uploads/2017/09/icon1.svg" alt="Interest-free Finance 8"></figure>
</div>
<div class="desc">
<h4 class="title">Interest-free Finance 8</h4>
sadf
</div>
</div>
<div class="item" data-position="9">
<div class="icon-box">
<figure clas="reminder-icon"><img src="http://mb.project-preview.com.au/get-reminded/wp-content/uploads/2017/09/icon1.svg" alt="Interest-free Finance 9"></figure>
</div>
<div class="desc">
<h4 class="title">Interest-free Finance 9</h4>
</div>
</div>
</div>