我正在研究两种类型同时工作的滑动滑块,即“分数”和“幻灯片更改时的进度条”。我已完成进度栏“分数类型中的问题”。我正在使用swiper版本(4.5.0),并从 enter link description here 其中,使用Swiper(3.0.6)version.code与该版本不兼容。计数器不工作。 我已经完成了Progreesbar类型的操作,但是卡住了违规类型。请为我指出正确的方向,并提前致谢。
输出:幻灯片上的分数更改
已完成代码更新:codepen
添加的分数代码不起作用:codepen
$(document).ready(function() {
var mainslider = new Swiper('.slider-main', {
pagination: {
el: '.swiper-pagination',
type: 'progressbar',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
});
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
display: flex;
justify-content: center;
align-items: flex-end;
}
.swiper-pagination-progressbar {
bottom: 0;
}
.swiper-container-horizontal>.swiper-pagination-progressbar {
top: auto;
bottom: 48px;
}
.swiper-container-horizontal>.swiper-pagination-progressbar {
width: 20%;
height: 4px;
left: 48%;
top: 95%;
background-color: rgba(232, 227, 227, 0.2);
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
width: 100%;
background-color: #f06a44;
}
h2 {
font-family: sans-serif;
font-size: 50px;
font-weight: bold;
color: #ffffff;
text-align: left;
}
.swiper-slide:nth-Child(even){
background: #cccccc;
}
.swiper-slide:nth-Child(odd){
background: #666666;
}
.caption {
text-align: center;
padding-top: 20px;
}
.counter, .counter span {
position:relative;
}
.counter .next, .counter .count {
position:absolute;
}
.counter .next {
transform:translateY(-12px);
left:0;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<div class="wrapper">
<div class="swiper-container slider-main">
<div class="swiper-wrapper">
<div class="swiper-slide sl-one">
<h2>Slider Text One</h2>
<img src="https://i.ibb.co/92rG5SH/ts4.jpg">
</div>
<div class="swiper-slide sl-two">
<h2>Slider Text Two</h2>
<img src="https://i.ibb.co/9TXDX3G/ol2.jpg">
</div>
<div class="swiper-slide sl-three">
<h2>Slider Text Three</h2>
<img src="https://i.ibb.co/Wxx3h1N/pim-chu-294493-unsplash.jpg">
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-pagination fraction"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<span class="fraction"></span>
</div>
答案 0 :(得分:1)
代替在Swiper的启动过程中使用onSlideChangeStart
,您可以像下面这样设置更改功能:
mainslider.on('slideChange', function () { ... }
或
mainslider.on('transitionStart', function () { ... }
结果:
$(document).ready(function() {
var mainslider = new Swiper('.slider-main', {
pagination: {
el: '.swiper-pagination',
type: 'progressbar',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
var counter = $('.fraction');
var currentCount = $('<span class="count">1<span/>');
counter.append(currentCount);
mainslider.on('transitionStart', function () {
var index = this.activeIndex + 1,
$current = $(".photo-slide").eq(index),
$c_cur = $("#count_cur"),
$c_next = $("#count_next"),
dur = 0.8;
var prevCount = $('.count');
currentCount = $('<span class="count next">' + index + '<span/>');
counter.html(currentCount);
});
});
我删除了TweenMax部分。