带有分数的 Swiper 滑块进度条不起作用答案

【问题标题】：Swiper Slider Progressbar with Fractions Not Working带有分数的 Swiper 滑块进度条不起作用
【发布时间】：2019-07-15 20:40:06
【问题描述】：

我正在研究 swiper 滑块，其中两种类型同时工作，一个 Fraction 和一个 Progressbar on Slides Change。我完成了进度条分数类型的问题。我正在使用 swiper 4.5.0 并从使用 Swiper 3.0.6 版本的here 获得灵感。代码与版本不兼容。
计数器不工作。我已经完成了 Progressbar 类型，但卡住了违规类型。

输出：幻灯片上的分数变化

Achieved Code Till：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>

【问题讨论】：

谁能解决我的问题，我还是被困在那里。

标签： jquery html css slider swiper

【解决方案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 部分。

【讨论】：