Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.07.2021, 22:27
Интересующийся
Отправить личное сообщение для Tempest Посмотреть профиль Найти все сообщения от Tempest
 
Регистрация: 21.05.2018
Сообщений: 25

Почему при пролистывании Swiper JS назад слайды отображаются неверно?
Я хотел сделать так, чтобы в Swiper JS работали одновременно пагинация с фракцией и прогрессбар. Но в пагинации с фракцией возникла проблема: при пролистывании слайдов о обратном порядке почему-то слайд который был третьим в пагинации с фракцией отображается, как 1 или 2 и тоже самое с другими слайдами. На картинке, которую я прикрепил данный слайд является первым, а при пролистывании назад отображается 3.

Сам сайт http://cn39614.tmweb.ru/
Весь код https://jsfiddle.net/k8L9t4j3/

<section class="spaces">
        <div class="wrapper">
            <div class="content">
                <div class="spaces-title">
                    <h3>Our Spaces</h3>
                    <p>Our space is designed to give you a different experience when working with your team or personally</p>
                    <div class="plug"></div>
                </div>
                <div class="image-slider swiper-container">
                    <div class="image-slider__wrapper swiper-wrapper">
                        <!-- Slides -->
                        <div class="image-slider__slide swiper-slide">
                            <div class="image-slider__image one">
                                <img src="img/space-1.jpg" alt="1">
                            </div>
                        </div>
                        <div class="image-slider__slide swiper-slide">
                            <div class="image-slider__image">
                                <img src="img/space-2.jpg" alt="2">
                            </div>
                        </div>
                        <div class="image-slider__slide swiper-slide">
                            <div class="image-slider__image">
                                <img src="img/space-3.jpg" alt="3">
                            </div>
                        </div>
                        <div class="image-slider__slide swiper-slide">
                            <div class="image-slider__image">
                                <img src="img/space-4.jpg" alt="4">
                            </div>
                        </div>
                    </div>
                    <div class="swiper-pagination"></div>
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                    <div class="image-slider__fraction">
                        <div class="image-slider__current"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>



var totalSlide = $('.image-slider .swiper-slide').length;
    const swiper = new Swiper('.image-slider', {
        // Optional parameters
        slidesPerView: 3,
        spaceBetween: 30,
        centeredSlides: true,
        loop: true,
        loopedSLides: 3,
        simulateTouch: true,
        grabCursor: true,
        speed: 800,
        pagination: {
            el: '.swiper-pagination',
            type: 'progressbar'
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        autoplay: {
            delay: 1000,
        }
    });


    swiper.on('slideChange', function() {
        var fragment = document.querySelector('.image-slider__current');
        var current = parseInt($('.swiper-slide-active img').attr('alt')) + 1;
        if (current > totalSlide)
            current = 1;
        var idx = current < 10 ? ("0" + current) : current;
        var tdx = totalSlide < 10 ? ("0" + totalSlide) : totalSlide;
        fragment.innerHTML = (idx + '/' + tdx);
    });
Изображения:
Тип файла: jpg Screenshot_1.jpg (93.5 Кб, 3 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 14.07.2021, 22:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Tempest
Почему
большинство плагинов используют клонирование элементов, для создания эффекта непрерывности обычно их по два слева и справа
было 12345 станет 451234512
Ответить с цитированием
  #3 (permalink)  
Старый 19.07.2021, 22:36
Интересующийся
Отправить личное сообщение для Tempest Посмотреть профиль Найти все сообщения от Tempest
 
Регистрация: 21.05.2018
Сообщений: 25

и как это исправить?
Ответить с цитированием
  #4 (permalink)  
Старый 19.07.2021, 23:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Tempest
и как это исправить?
читать документацию ... а пока можно попробовать так
function() {
     var fragment = document.querySelector('.image-slider__current');
     var idx = this.realIndex + 1;
     var tdx = this.slides.length - 2;
     fragment.innerHTML = (idx.toString().padStart(2,'0') + '/' + tdx.toString().padStart(2,'0'));
}

Последний раз редактировалось рони, 19.07.2021 в 23:17.
Ответить с цитированием
  #5 (permalink)  
Старый 20.07.2021, 19:15
Интересующийся
Отправить личное сообщение для Tempest Посмотреть профиль Найти все сообщения от Tempest
 
Регистрация: 21.05.2018
Сообщений: 25

рони, Вставил этот код и слайдер и пагинация вообще исчезли.
https://jsfiddle.net/2wqjfL4a/
Ответить с цитированием
  #6 (permalink)  
Старый 20.07.2021, 20:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Tempest,
код написан для вашего сообщения #1;
swiper.on('slideChange', function(){
    var fragment = document.querySelector('.image-slider__current');
    var idx = this.realIndex + 1; 
    var tdx = Array.from(this.slides).filter(({classList}) => !classList.contains('swiper-slide-duplicate') ).length;
    fragment.innerHTML = (idx.toString().padStart(2,'0') + '/' + tdx.toString().padStart(2,'0'));
    });
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Почему в Swiper JS пагинация с фракцией не работает? Tempest Общие вопросы Javascript 2 12.07.2021 04:47
Нужно найти ошибку почему не отображаются действия на сайте с JS кода WinliteUA Общие вопросы Javascript 2 04.03.2021 18:31