• 遍历实例化swiper



    var list = $('.p04-s2 li');
    list.each(function (index) {
    new Swiper ($(this).find('.swiper-container'), {
    spaceBetween: 10,
    slidesPerView : 3,
    watchOverflow: true,
    centeredSlides : true,
    loop: true,
    breakpoints: {
    1500: {
    slidesPerView: 2
    },
    1200: {
    slidesPerView: 1
    }
    },
    pagination: {
    el: $(this).find('.swiper-pagination'),
    clickable :true
    },
    navigation: {
    prevEl: $(this).find('.prev-btn'),
    nextEl: $(this).find('.next-btn'),
    }
    });
    });

    如果是tab下遍历swiper

     
            function initSwiper($element) {
                new Swiper ($element.find('.swiper-container'), {
                    spaceBetween: 20,
                    slidesPerView : s1PerNum,
                    watchOverflow: true,
                    loopedSlides: 5,
                    loop: isLoop($element.find('.swiper-slide'), s1PerNum),
                    breakpoints: { 
                        1366: {
                            slidesPerView: 3
                        },
                        960: {
                            slidesPerView: 2
                        },
                        540: {
                            slidesPerView: 1
                        }
                    },
                    navigation: {
                        prevEl: $element.find('.prev'),
                        nextEl: $element.find('.next')
                    }
                }); 
            }
     
            $('.tab li').click(function() {
                $('.tab li').removeClass('current');
                $(this).addClass('current');
                var clickIndex = $(this).index();
                $currentLI = $('.text-slider > li').removeClass('active').eq(clickIndex).addClass('active');
                if (!$currentLI.data('initState')) {
                    initSwiper($currentLI);
                    $currentLI.data('initState', true);
                }
            }).eq(0).trigger('click'); 
  • 相关阅读:
    记事本开发者日记~二
    《梦断代码》读后感①
    记事本开发日记~一
    仓库管理msi系统
    java web + mysql 的增删改查
    第九周动手动脑
    四则运算答题版
    JAVA常用的异常处理情况
    继承和多态中动手动脑
    laravel1
  • 原文地址:https://www.cnblogs.com/gduf/p/12021039.html
Copyright © 2020-2023  润新知