Как считать слайды по одному при том что в slick стоит slidesToScroll: 4?

Question

[freeman0204]

Сейчас слайдер листает по 4 слайда за раз и естественно считает перелистывание 1,5 и т.д. Кнопки на слик у меня кастомные и блок с выводом количества слайдов и текущий слайд тоже кастомные.

Ниже есть одно решение, но оно не всегда срабатывает.

Как еще можно реализовать данный функционал на слик? Что бы при пролистывании 4 слайда за раз писало 1/10, 2/10, 3/10 и т.д.

var total_1 = $('.slider_product_js_tab_2 .slick-slide:not(.slick-cloned)').length / 4;

            $('.wrapper_arrow_tab_2 .total').text(Math.ceil(total_1));
            $('.slider_product_js_tab_2').on('afterChange', function (event, slick, currentSlide, nextSlide) {
                $('.wrapper_arrow_tab_2 .current').text(currentSlide / 4 + 1);
            });

Comments

[Вадим]

Что бы при пролистывании 4 слайда за раз писало 1/10, 2/10, 3/10

А суммарно слайдов сколько? 40?

[freeman0204]

Вадим, может быть по разному, и разные слайдеры есть

[Вадим]

freeman0204, Ну смотрите, получается, нам нужно знать сколько слайдов за раз проматывает и сколько слайдов всего, чтобы выводить корректное значение в счётчике.
Для этого нужно поделить количество слайдов, на количество прокручеваемых слайдов за раз с округлением в верх, чтобы узнать сколько у нас всего "страниц".
Потом, по каждому нажатию, смотреть индекс текущего слайда и определять к какой странице он относится.
Я верно понял чего Вы хотите достичь?

[freeman0204]

Вадим, думаю да

[Вадим]

freeman0204, Ну тогда действуйте! :-)
В аргументе slick обработчика события afterChange, насколько я помню, можно найти всю нужную для этих расчётов информацию.
Ну а если не получится - пишите, будет разбираться.

[freeman0204]

Вадим,

var total_1 = $('.slider_product_js_tab_2 .slick-slide:not(.slick-cloned)').length / 4;

            $('.wrapper_arrow_tab_2 .total').text(Math.ceil(total_1));
            $('.slider_product_js_tab_2').on('afterChange', function (event, slick, currentSlide, nextSlide) {
                $('.wrapper_arrow_tab_2 .current').text(currentSlide / 4 + 1);
            });

Скидывал в вопросе код. Но он то работает то нет. Подозреваю что эта функция не работает Math.ceil

[Вадим]

freeman0204, Ага, код я видел. Только не вижу в нём вычислений, основывающихся на количестве слайдов всего и сколько слайдов за раз прокручивается.

[freeman0204]

Вадим, Не совсем понял как их сделать

[freeman0204]

freeman0204, А как менять количество через медиа запрос? Возможно нужен еще resize. По старому я менял так:

if ($(window).width() < 1530) {
                var total_1 = $('.slider_product_js .slick-slide:not(.slick-cloned)').length / 3;

                $('.wrapper_arrow_tab_1 .total').text(Math.ceil(total_1));
                $('.slider_product_js').on('afterChange', function (event, slick, currentSlide, nextSlide) {
                    $('.wrapper_arrow_tab_1 .current').text(currentSlide / 3 + 1);
                });
            }

И то же самое делал в resize, но когда ставлю медиа условия, на пк работать не хочет

Answer 1

[Вадим]

Округления вверх нужны для нечётных комбинаций

Comments

[freeman0204]

Спасибо!