轮播图

最新推荐文章于 2024-01-15 18:56:46 发布

hua_huahua_hua

最新推荐文章于 2024-01-15 18:56:46 发布

阅读量99

点赞数

分类专栏：轮播图文章标签： javascript

本文链接：https://blog.csdn.net/hua_huahua_hua/article/details/109286211

版权

轮播图专栏收录该内容

1 篇文章 0 订阅

订阅专栏

轮播图
css

<link rel="stylesheet" href="css/swiper.min.css">
.swiper-wrapper img{
width: 100%;
height: auto;

}

html

    <script>        
            var mySwiper = new Swiper ('.swiper-container', {
               direction : 'horizontal', // 垂直切换选项
              loop: true, // 循环模式选项
              autoplay:true,
              effect : 'cube',
              cubeEffect: {
    slideShadows: true,
    shadow: true,
    shadowOffset: 100,
    shadowScale: 0.6
  }, 
              // 如果需要分页器
              pagination: {
                el: '.swiper-pagination',
              },
              
              // 如果需要前进后退按钮
              navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
              },
              
              // 如果需要滚动条
              scrollbar: {
                el: '.swiper-scrollbar',
              },
            })        
    </script>