利用swiper.js插件，来创建立体轮播图

最新推荐文章于 2022-09-05 15:05:42 发布

我最帅气257

最新推荐文章于 2022-09-05 15:05:42 发布

阅读量344

点赞数

本文链接：https://blog.csdn.net/weixin_56115652/article/details/118308239

版权


```html
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./swiper.min.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #swiper{
            width: 60%;
            margin: 30px auto;
          
        }
        .swiper-container{
            width: 100%;
            border: 1px solid red;
            overflow: hidden;
        }
        /* .swiper-wrapper{
            width: 100%;
            /* height: 200px;
            border: 1px solid yellow;
        } */
        .swiper-slide{
             width: 60%;
            /* height: 200px; */
            border: 1px solid rebeccapurple;
        }
        .swiper-slide img{
             width: 100%;
        }
    </style>
</head>
<body>
    <div id="swiper">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <img src="./img/01 (1).JPG" alt="">
                </div>
                <div class="swiper-slide">
                   <img src="./img/01 (2).JPG" alt="">
                </div>
                <div class="swiper-slide">
                   <img src="./img/02.JPG" alt="">
                </div>
                <div class="swiper-slide">
                   <img src="./img/01 (2).JPG" alt="">
                </div>
                <div class="swiper-slide">
                   <img src="./img/02.JPG" alt="">
                </div>
            </div>
        </div>
    </div>
    <script type="text/Javascript" src="./swiper.js"></script>
    <script>
var swiper = new Swiper('#swiper .swiper-container', {
//重置Swiper监听器
observer:true,
observeParents:true,
  //切换效果   3d流
  effect: 'coverflow',
  //显示的数量
  slidesPerView: 4  ,
  //为true默认居中 默认居左
  centeredSlides: true,
  coverflowEffect: {
      //3d旋转角度
      rotate: 0,
      //每个slide之间的拉伸，越大靠的越紧
      stretch: 10,
      //深度值，越大距离越远，看起来越小
      depth: 80,
      //值越大，效果越明显
      modifier: 3,
      //是否开启阴影
      slideShadows: false,
  },
  //环路 循环播放
  loop: true,
  // 分页器
  pagination: {
      el: '.swiper-pagination',
      // 点击分页器切换
      clickable: true,
  },
  //自动播放和暂停
  autoplay: {
      stopOnLastSlide: false,
      disableOnInteraction: false,
  },
  //左右箭头
  navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
  },
});
  </script>


    </script>
</body>
</html>

我最帅气257

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
利用swiper.js插件，来创建立体轮播图

```html <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <ti.
复制链接

扫一扫