主页 / 问题 / 833362
Accepted
Agapkin
Asked:2020-05-25 20:12:15 +0000 UTC2020-05-25 20:12:15 +0000 UTC

刷卡器。更改分页而不是图像点（预览）

  • 772

我使用 Swiper ( http://idangero.us/swiper/api/)，我设置了所有内容，除了一件事之外，一切正常，而不是分页中的点，我需要显示图片以获得如下内容：https://yadi.sk/i/kQ-E0XVj3WX9hv

这就是我所拥有的。https://jsfiddle.net/Agapkin/ah8d8yrL/1/ 我想我应该使用renderBullet 或renderCustom，但我不明白如何？

swiper

2 个回答

  1. Best Answer
    pagination: {
  el: '.swiper-pagination',
  clickable: true,
  type : 'custom',
  bulletClass:'swiper_pagination_img'
},

    将类 swiper_pagination_img 设置为图像，它将是可点击的。它帮助了我。

    • 1

  2. 我通过创建一组图像并将它们推送到分页来解决了这个问题：

    <div class="reviews">
    <div class="reviews__container _container">
        <div class="reviews__title">Что о нас говорят?</div>
        <div class="reviews__body">
            <div class="reviews__next _icon-slider-right"></div>
            <div class="reviews__prev _icon-slider-left"></div>
            <div class="reviews__slider _swiper">
                <div class="reviews__item">
                    <div class="reviews__img">
                        <img src="img/alina.png" alt="review">
                    </div>
                    <div class="reviews__text">
                        Особенно хочу отметить работника Бадурова Яниса. Работник внимательный, доброжелательный,
                        вежливый, учтивый, почитает возраст. Даёт исчерпывающую информацию по интересующим вопросам.
                        Говорит корректно, конкретно и победно. Я очень рада, что он меня обслуживает. На эту службу
                        можно положиться. Спасибо, что в самое тяжелое время вы рядом и берёте все заботы на себя.
                        Желаю вам всем огромного человеческого счастья, терпения, крепкого здоровья и долгих-долгих
                        лет жизни
                    </div>
                    <div class="reviews__name">Ева Левен</div>
                </div>
                <div class="reviews__item">
                    <div class="reviews__img">
                        <img src="img/alina.png" alt="review">
                    </div>
                    <div class="reviews__text">
                        Особенно хочу отметить работника Бадурова Яниса. Работник внимательный, доброжелательный,
                        вежливый, учтивый, почитает возраст. Даёт исчерпывающую информацию по интересующим вопросам.
                        Говорит корректно, конкретно и победно. Я очень рада, что он меня обслуживает. На эту службу
                        можно положиться. Спасибо, что в самое тяжелое время вы рядом и берёте все заботы на себя.
                        Желаю вам всем огромного человеческого счастья, терпения, крепкого здоровья и долгих-долгих
                        лет жизни
                    </div>
                    <div class="reviews__name">Ева Левен</div>
                </div>
                <div class="reviews__item">
                    <div class="reviews__img">
                        <img src="img/alina.png" alt="review">
                    </div>
                    <div class="reviews__text">
                        Особенно хочу отметить работника Бадурова Яниса. Работник внимательный, доброжелательный,
                        вежливый, учтивый, почитает возраст. Даёт исчерпывающую информацию по интересующим вопросам.
                        Говорит корректно, конкретно и победно. Я очень рада, что он меня обслуживает. На эту службу
                        можно положиться. Спасибо, что в самое тяжелое время вы рядом и берёте все заботы на себя.
                        Желаю вам всем огромного человеческого счастья, терпения, крепкого здоровья и долгих-долгих
                        лет жизни
                    </div>
                    <div class="reviews__name">Ева Левен</div>
                </div>
            </div>
            <div class="reviews__pagging"></div>
        </div>
    </div>
</div>

    然后我使用该功能，renderBullet只需替换它，一切正常：

    let sliderImages = document.querySelectorAll('.reviews__img');

let sliderThumbnails = [];

sliderImages.forEach(sliderImage => {
    sliderThumbnails.push(sliderImage.innerHTML);
});

let sliderReviews = new Swiper('.reviews__slider', {
    /*
    effect: 'fade',
    autoplay: {
        delay: 3000,
        disableOnInteraction: false,
    },
    */
    observer: true,
    observeParents: true,
    slidesPerView: 1,
    spaceBetween: 0,
    autoHeight: true,
    speed: 800,
    //touchRatio: 0,
    //simulateTouch: false,
    //loop: true,
    //preloadImages: false,
    //lazy: true,
    // Dotts
    pagination: {
        el: '.reviews__pagging',
        clickable: true,
        bulletActiveClass:'reviews__img-active',
        renderBullet: function (index, className) {
            return '<div class="reviews__img-thumbnail ' + className + '">' + (sliderThumbnails[index]) + '</div>';
         },
    },
    // Arrows
    navigation: {
        nextEl: '.reviews__next',
        prevEl: '.reviews__prev',
    },
    /*
    breakpoints: {
        320: {
            slidesPerView: 1,
            spaceBetween: 0,
            autoHeight: true,
        },
        768: {
            slidesPerView: 2,
            spaceBetween: 20,
        },
        992: {
            slidesPerView: 3,
            spaceBetween: 20,
        },
        1268: {
            slidesPerView: 4,
            spaceBetween: 30,
        },
    },
    */
    on: {
        lazyImageReady: function () {
            ibg();
        },
    }
    // And if we need scrollbar
    //scrollbar: {
    //  el: '.swiper-scrollbar',
    //},
});

    通常，缩略图是动态生成的。

    • 0

相关问题