OWL Carousel步骤滑块有问题
我必须使用owl Carousel 2开发步进滑块，但是在通过单击拖动和响应版本进行滑动时，它不能顺利运行，您是否建议按照下面的屏幕快照中所述实现任何JS库< / p>
我在下面附上了我创建的内容，但不能完全按照我的要求工作
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>
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？