Swiper常用总结

最新推荐文章于 2024-10-03 19:13:18 发布

cdgogo

最新推荐文章于 2024-10-03 19:13:18 发布

阅读量401

点赞数

分类专栏： # Swiper

本文链接：https://blog.csdn.net/qq_36699230/article/details/107381255

版权

Swiper 专栏收录该内容

1 篇文章

订阅专栏

本文总结了Swiper的用法和初始化步骤，以及如何在点击时为当前swiper-slide添加class，更多内容敬请期待。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、用法和初始化

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>
// 导航等组件可以放在container之外

<script>
  var mySwiper = new Swiper ('.swiper-container', {
    autoplay:true,
    loop: true,
    autoHeight: true, //高度随内容变化
    pagination: { 
      el: '.swiper-pagination',
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })
  </script>

二、给当前点击的swiper-slide,添加一个class

在这里插入图片描述

   <script>
        var mySwiper = new Swiper('#swiper1', {
            slidesPerView: 5,
            on: {
                click: function () {
                    // alert(this.clickedIndex);
                    var index = this.clickedIndex;
                    a(index)
                }
            }
        })

        function a(i) {
            $("#swiper1 .swiper-slide").eq(i).addClass('active').siblings().removeClass('active');
        }
    </script>