Как сделать числа слайдов с слайдере?

99
28 февраля 2022, 15:50

Как сделать число текущего и общего количество слайдов на slick.js? Например, 1/3 (первый из трех), 2/3 (второй из трех).

$(document).ready(function(){ 
    $('.customer-logos').slick({ 
        slidesToShow: 6, 
        slidesToScroll: 1, 
        autoplay: true, 
        autoplaySpeed: 1500, 
        arrows: false, 
        dots: false, 
        pauseOnHover: false, 
        responsive: [{ 
            breakpoint: 768, 
            settings: { 
                slidesToShow: 4 
            } 
        }, { 
            breakpoint: 520, 
            settings: { 
                slidesToShow: 3 
            } 
        }] 
    }); 
});
h2{ 
  text-align:center; 
  padding: 20px; 
} 
/* Slider */ 
 
.slick-slide { 
    margin: 0px 20px; 
} 
 
.slick-slide img { 
    width: 100%; 
} 
 
.slick-slider 
{ 
    position: relative; 
    display: block; 
    box-sizing: border-box; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
            user-select: none; 
    -webkit-touch-callout: none; 
    -khtml-user-select: none; 
    -ms-touch-action: pan-y; 
        touch-action: pan-y; 
    -webkit-tap-highlight-color: transparent; 
} 
 
.slick-list 
{ 
    position: relative; 
    display: block; 
    overflow: hidden; 
    margin: 0; 
    padding: 0; 
} 
.slick-list:focus 
{ 
    outline: none; 
} 
.slick-list.dragging 
{ 
    cursor: pointer; 
    cursor: hand; 
} 
 
.slick-slider .slick-track, 
.slick-slider .slick-list 
{ 
    -webkit-transform: translate3d(0, 0, 0); 
       -moz-transform: translate3d(0, 0, 0); 
        -ms-transform: translate3d(0, 0, 0); 
         -o-transform: translate3d(0, 0, 0); 
            transform: translate3d(0, 0, 0); 
} 
 
.slick-track 
{ 
    position: relative; 
    top: 0; 
    left: 0; 
    display: block; 
} 
.slick-track:before, 
.slick-track:after 
{ 
    display: table; 
    content: ''; 
} 
.slick-track:after 
{ 
    clear: both; 
} 
.slick-loading .slick-track 
{ 
    visibility: hidden; 
} 
 
.slick-slide 
{ 
    display: none; 
    float: left; 
    height: 100%; 
    min-height: 1px; 
} 
[dir='rtl'] .slick-slide 
{ 
    float: right; 
} 
.slick-slide img 
{ 
    display: block; 
} 
.slick-slide.slick-loading img 
{ 
    display: none; 
} 
.slick-slide.dragging img 
{ 
    pointer-events: none; 
} 
.slick-initialized .slick-slide 
{ 
    display: block; 
} 
.slick-loading .slick-slide 
{ 
    visibility: hidden; 
} 
.slick-vertical .slick-slide 
{ 
    display: block; 
    height: auto; 
    border: 1px solid transparent; 
} 
.slick-arrow.slick-hidden { 
    display: none; 
}
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
 
<div class="container"> 
  <h2>Our  Partners</h2> 
   <section class="customer-logos slider"> 
      <div class="slide"><img src="https://image.freepik.com/free-vector/luxury-letter-e-logo-design_1017-8903.jpg"></div> 
      <div class="slide"><img src="https://image.freepik.com/free-vector/3d-box-logo_1103-876.jpg"></div> 
      <div class="slide"><img src="https://image.freepik.com/free-vector/blue-tech-logo_1103-822.jpg"></div> 
      <div class="slide"><img src="https://image.freepik.com/free-vector/colors-curl-logo-template_23-2147536125.jpg"></div> 
      <div class="slide"><img src="https://image.freepik.com/free-vector/abstract-cross-logo_23-2147536124.jpg"></div> 
      <div class="slide"><img src="https://image.freepik.com/free-vector/football-logo-background_1195-244.jpg"></div> 
      <div class="slide"><img src="https://image.freepik.com/free-vector/background-of-spots-halftone_1035-3847.jpg"></div> 
      <div class="slide"><img src="https://image.freepik.com/free-vector/retro-label-on-rustic-background_82147503374.jpg"></div> 
   </section> 
</div>

Answer 1

Возможно это имеете ввиду, номер слайда из всего количества:

$('.customer-logos').each(function() { 
 
  var $this = $(this), 
    $status = $this.closest('.section').find('.slider-num'); 
 
 
  $this.on('init reInit afterChange', function(event, slick, currentSlide, nextSlide) { 
 
    var i = (currentSlide ? currentSlide : 0) + 1; 
    $status.html('<strong>' + (((i) < 10) ? "0" + (i) : i) + '</strong>' + '<small>/' + (((slick.slideCount) < 10) ? "0" + (slick.slideCount) : slick.slideCount) + '</<small>'); 
  }); 
 
  $this.slick({ 
    slidesToShow: 6, 
    slidesToScroll: 1, 
    autoplay: true, 
    autoplaySpeed: 1500, 
    arrows: false, 
    dots: false, 
    pauseOnHover: false, 
    focusOnSelect: true, 
    responsive: [{ 
      breakpoint: 768, 
      settings: { 
        slidesToShow: 4 
      } 
    }, { 
      breakpoint: 520, 
      settings: { 
        slidesToShow: 3 
      } 
    }] 
  }); 
});
h2 { 
  text-align: center; 
  padding: 20px; 
} 
 
 
/* Slider */ 
 
.slick-slide { 
  margin: 0px 20px; 
} 
 
.slick-slide img { 
  width: 100%; 
} 
 
.slick-slider { 
  position: relative; 
  display: block; 
  box-sizing: border-box; 
  -webkit-user-select: none; 
  -moz-user-select: none; 
  -ms-user-select: none; 
  user-select: none; 
  -webkit-touch-callout: none; 
  -khtml-user-select: none; 
  -ms-touch-action: pan-y; 
  touch-action: pan-y; 
  -webkit-tap-highlight-color: transparent; 
} 
 
.slick-list { 
  position: relative; 
  display: block; 
  overflow: hidden; 
  margin: 0; 
  padding: 0; 
} 
 
.slick-list:focus { 
  outline: none; 
} 
 
.slick-list.dragging { 
  cursor: pointer; 
  cursor: hand; 
} 
 
.slick-slider .slick-track, 
.slick-slider .slick-list { 
  -webkit-transform: translate3d(0, 0, 0); 
  -moz-transform: translate3d(0, 0, 0); 
  -ms-transform: translate3d(0, 0, 0); 
  -o-transform: translate3d(0, 0, 0); 
  transform: translate3d(0, 0, 0); 
} 
 
.slick-track { 
  position: relative; 
  top: 0; 
  left: 0; 
  display: block; 
} 
 
.slick-track:before, 
.slick-track:after { 
  display: table; 
  content: ''; 
} 
 
.slick-track:after { 
  clear: both; 
} 
 
.slick-loading .slick-track { 
  visibility: hidden; 
} 
 
.slick-slide { 
  display: none; 
  float: left; 
  height: 100%; 
  min-height: 1px; 
} 
 
[dir='rtl'] .slick-slide { 
  float: right; 
} 
 
.slick-slide img { 
  display: block; 
} 
 
.slick-slide.slick-loading img { 
  display: none; 
} 
 
.slick-slide.dragging img { 
  pointer-events: none; 
} 
 
.slick-initialized .slick-slide { 
  display: block; 
} 
 
.slick-loading .slick-slide { 
  visibility: hidden; 
} 
 
.slick-vertical .slick-slide { 
  display: block; 
  height: auto; 
  border: 1px solid transparent; 
} 
 
.slick-arrow.slick-hidden { 
  display: none; 
}
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
 
<div class="section container"> 
  <h2>Our Partners</h2> 
  <section class="customer-logos slider"> 
    <div class="slide"><img src="https://image.freepik.com/free-vector/luxury-letter-e-logo-design_1017-8903.jpg"></div> 
    <div class="slide"><img src="https://image.freepik.com/free-vector/3d-box-logo_1103-876.jpg"></div> 
    <div class="slide"><img src="https://image.freepik.com/free-vector/blue-tech-logo_1103-822.jpg"></div> 
    <div class="slide"><img src="https://image.freepik.com/free-vector/colors-curl-logo-template_23-2147536125.jpg"></div> 
    <div class="slide"><img src="https://image.freepik.com/free-vector/abstract-cross-logo_23-2147536124.jpg"></div> 
    <div class="slide"><img src="https://image.freepik.com/free-vector/football-logo-background_1195-244.jpg"></div> 
    <div class="slide"><img src="https://image.freepik.com/free-vector/background-of-spots-halftone_1035-3847.jpg"></div> 
    <div class="slide"><img src="https://image.freepik.com/free-vector/retro-label-on-rustic-background_82147503374.jpg"></div> 
  </section> 
  <br> 
  <div class="slider-num"> 
    <strong></strong> 
    <small></small> 
  </div> 
</div>

Answer 2

У тебя текущему слайду после инициализации слайдера присваивается активный класс == .slick-active Тебе надо просто получать текущее значение этого элемента относительно общего количества слайдов. Встроенной возможности насколько мне известно, - нет. Есть dots в навигации, но это наверное не то что тебе надо

READ ALSO
не работает на github pages ajax запрос post

не работает на github pages ajax запрос post

Через локальный сервер работает а через гитхаб нетВ чем может быть проблема https://kamran92

118
Как задать определённое сообщение в переменную? JavaScript, Discord.js

Как задать определённое сообщение в переменную? JavaScript, Discord.js

Я хочу чтоб бот определённое сообщение брал в переменнуюК примеру кто то написал "Привет!" и бот сохранил это сообщение в переменную

77
каталог с механикой push-уведомлений

каталог с механикой push-уведомлений

У меня в игре есть магазин,в котором эмблемы купленных предметов удаляютсяМне нужно что бы после покупки чего-либо рядом расположенные эмблемы...

101
Как правильно должен выглядеть Model в MVVM?

Как правильно должен выглядеть Model в MVVM?

Возьмем простое View, в котором есть два TextBox и Button

88