主页 / 问题 / 814771
Accepted
YourDeveloper
Asked:2020-04-16 13:24:24 +0000 UTC2020-04-16 13:24:24 +0000 UTC

在 swiper 幻灯片中显示活动幻灯片的数量

  • 772

我不知道如何为活动幻灯片的数量设置数字输出，即第一个 6/10，点击下一个变成 8/10，等等。此外，在小分辨率下，活动（可见）幻灯片的数量会减少。

PS我试图在点击下一个/上一个时加/减2并插入这个值，但一切都在自适应上崩溃

var swiper = new Swiper('.swiper-container', {
  slidesPerView: 3,
  slidesPerColumn: 2,
  spaceBetween: 0,
  navigation: {
    nextEl: '.sw-next',
    prevEl: '.sw-prev',
   },
  breakpoints: {
    // when window width is <= 320px
    320: {
      slidesPerView: 1,
      spaceBetween: 10
    },
    // when window width is <= 480px
    480: {
      slidesPerView: 2,
      spaceBetween: 20
    },
    // when window width is <= 640px
    640: {
      slidesPerView: 3,
      spaceBetween: 30
    }
  }
});
body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color:#000;
  margin: 0;
  padding: 0;
  text-align: center;
}
.swiper-container {
  width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  height: 100px;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.sw-nav .sw-prev,
.sw-nav .sw-next {
  cursor: pointer;
  font-size: 18px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.2/css/swiper.min.css" rel="stylesheet"/>
<!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
      <div class="swiper-slide">Slide 10</div>
    </div>
  </div>
  
 <div class="sw-nav">
    <span class="sw-prev">prev</span>
    <span class="sw-next">next</span>
  </div>
  
  <div class="numbers-slide">
    <span class="ns-active">6</span>
    <span>/10</span>
  </div>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.2/js/swiper.min.js"></script>

javascript

2 个回答

  1. 下午好，在文档中有初始化参数的描述。

    属性之一：

    pagination: {type: 'fraction'};

    这就是你需要的。

    链接：

    码头

    使用示例

    • 1
  2. Best Answer

    不知何故，我将幻灯片的数量增加到 16，但在这种情况下很容易重做，唯一的减号是禁用 allowTouchMove ，tk。我不知道如何捕捉用户何时向前滑动，何时向后滑动。

    var swiper = new Swiper('.swiper-container', {
  slidesPerView: 4,
  slidesPerColumn: 2,
  spaceBetween: 0,
  allowTouchMove: false,
  navigation: {
    nextEl: '.sw-next',
    prevEl: '.sw-prev',
   },
    breakpoints: {
	    650: {
	      slidesPerView: 1,
	    },
	    992: {
	      slidesPerView: 2,
	    },
	    1300: {
	      slidesPerView: 3,
	    }
	  },
});
// Pagination for serviceSlider
var allSlides = $('.swiper-slide').length;
$('.ns-total').html(' /'+allSlides);
$('.sw-next').click(function() {
  if(activeSlides == allSlides) {
    activeSlides = allSlides;
  } else {
    activeSlides+=2;
    $('.ns-active').html(activeSlides);
  }
});
$('.sw-prev').click(function() {
  if(activeSlides == minValueSlide) {
    activeSlides = minValueSlide;
  } else {
    activeSlides-=2;
    $('.ns-active').html(activeSlides);
  }
});

// for adaptive
var activeSlides;
var minValueSlide;
function variChange(winWidth) {
  if (winWidth > 1300) {
    activeSlides = 8;
    minValueSlide = 8;
  }
  if (winWidth <= 1300 && winWidth > 992) {
    activeSlides = 6;
    minValueSlide = 6;
    $('.ns-active').html(activeSlides);
  }
  if (winWidth <= 992 && winWidth > 650) {
    activeSlides = 4;
    minValueSlide = 4;
    $('.ns-active').html(activeSlides);
  }
  if (winWidth <= 650 && winWidth > 0) {
    activeSlides = 2;
    minValueSlide = 2;
    $('.ns-active').html(activeSlides);
  }
}
variChange($(window).width()); // $(window).width() - ширина экрана
$(window).resize(function() {
  variChange($(window).width());
});
    body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color:#000;
  margin: 0;
  padding: 0;
  text-align: center;
}
.swiper-container {
  width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  height: 100px;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.sw-nav .sw-prev,
.sw-nav .sw-next {
  cursor: pointer;
  font-size: 18px;
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.2/css/swiper.min.css" rel="stylesheet"/>
<!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
      <div class="swiper-slide">Slide 10</div>
      <div class="swiper-slide">Slide 11</div>
      <div class="swiper-slide">Slide 12</div>
      <div class="swiper-slide">Slide 13</div>
      <div class="swiper-slide">Slide 14</div>
      <div class="swiper-slide">Slide 15</div>
      <div class="swiper-slide">Slide 16</div>
    </div>
  </div>
  
 <div class="sw-nav">
    <span class="sw-prev">prev</span>
    <span class="sw-next">next</span>
  </div>
  
  <div class="numbers-slide">
    <span class="ns-active">6</span>
    <span class="ns-total">/10</span>
  </div>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.2/js/swiper.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    • 0

相关问题