0

Не могу понять, как настроить вывод в цифрах число активных слайдов, то есть сначала 6/10, нажали на next стало 8/10 и т.д. Причем на маленьких разрешения количество активных(видимых) слайдов уменьшается.

P.S. Пытался при клике на next/prev прибавлять/отнимать 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>

2 ответа 2

1

Добрый день, в документации есть описание параметров инициализации.

Одно из свойств:

pagination: {type: 'fraction'};

Это то, что вам нужно.

Ссылки:

Доки

Пример использования

5
  • Вроде бы то, но под мой пример не совсем подходит, свойство не количество слайдов считает, а количество переключений 16 апр 2018 в 9:45
  • @YourDeveloper, как раз таки их компонент "пагинация" служит для подсчета страниц и навигации по ним. :) Пожалуйста, почитайте повнимательнее или посмотрите ещё демки тут: idangero.us/swiper/demos Возможно, я что-то неправильно понял. В этом случае уточните задачу. :) Успехов!
    – PasVV
    16 апр 2018 в 10:15
  • Именно для страниц, а мне нужен подсчет слайдов :) 16 апр 2018 в 10:21
  • Соединив свои знания JS, написал простенькие функции при клике вперед/назад +-2 к числу активных айтемов, в зависимости от ширины, просто меняю это число. Чуть позже выложу код 16 апр 2018 в 10:26
  • @YourDeveloper, под страницами я подразумевал слайды. Простите. Ваше решение будет, конечно, будет работать. Но вы немного усложнили себе задачу на будущее. Потом будет тяжело вспомнить как это работает и почему вы отказались от pagination. Выложите решение, интересно посмотреть. :)
    – PasVV
    16 апр 2018 в 10:40
0

Как-то так, увеличил количество слайдов до 16, но в случае чего там легко переделать, единственный минус отключил allowTouchMove , т.к. не сообразил как поймать, когда пользователь вперед свайпнул, а когда назад.

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.