swiper 多层嵌套

最新推荐文章于 2024-09-21 20:57:10 发布

东都花神

最新推荐文章于 2024-09-21 20:57:10 发布

阅读量1.4w

点赞数

文章标签： swiper 嵌套

本文链接：https://blog.csdn.net/qq_33988065/article/details/77712287

版权

近期做了一个移动端的项目，需要使用到整屏滑动，刷新后需要停留在当前页面，第二个页面需要再次嵌套一个横向的滑动，发现网上这方面的例子少的可怜，于是自己利用swiper定制一个，下面是我制作的一个简单的demo，需要的朋友可以看一下。

<!DOCTYPE html>
<html lang="zh">
<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 href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css"; rel="stylesheet">
       <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js";></script>
       <script src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.jquery.min.js";></script>
       <style type="text/css">
         *{
           margin: 0;
           padding: 0;
         }
             .swiper-container{
               position: fixed;
               height: 100%;
               width: 100%;
               background: #EEEEEE;
             }
             .slide2 .swiper-slide{
               background: #2AC3CB;
             }
       </style>
</head>
<body>
<div class="swiper-container swiper-container-father">
  <div class="swiper-wrapper">
    <div class="swiper-slide slide1">slider1</div>
    <div class="swiper-slide slide2">
      <div class="swiper-container swiper-container-son">
        <div class="swiper-wrapper">
          <div class="swiper-slide">2.1</div>
          <div class="swiper-slide">2.2</div>
          <div class="swiper-slide">2.3 </div>
        </div>
      </div>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
    </div>
    <div class="swiper-slide slide3"> slider3</div>
  </div>
</div>
<script>
  var swiperIndex = sessionStorage.getItem('swiperIndex') ? sessionStorage.getItem('swiperIndex') : 0,
      initSwiper = {
        direction: 'vertical',
        initialSlide : swiperIndex,
        prevButton: '.pre-page-btn',
        nextButton: '.next-page-btn',
        // 切换页面成功之前的回调
        onSlideChangeStart: function (swiper) {
          sessionStorage.setItem('swiperIndex', swiper.activeIndex);
        }
      };
  var swiperFather = new Swiper('.swiper-container-father', initSwiper);
  var swiperSon = new Swiper('.swiper-container-son',{
    prevButton: '.swiper-button-prev',
    nextButton: '.swiper-button-next',
  });
</script>
</body>
</html>

在线查看