优雅的swiper实例

于 2018-07-26 20:03:00 发布
阅读量133 收藏 1
点赞数
原文链接：http://www.cnblogs.com/zph666/p/9373997.html
版权

swiper实例

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
  <meta charset="utf-8">
  <title>Swiper demo</title>
  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/css/swiper.css">


  <!-- Demo styles -->
  <style>
    html, body {
      position: relative;
      height: 100%;
    }
    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color:#000;
      margin: 0;
      padding: 0;
    }
    .swiper-container {
      width: 100%;
      height: 100%;
    }
    #nav{
      width: 100%;
      height: 50px;
      position: absolute;
      left: 0;
      top:0;
      z-index: 3;
      border-bottom: 1px solid red;
      background: #fff;
    }
    #nav .swiper-slide{
      line-height:50px;
      text-align: center;
      width: auto;
      padding: 0 12px;
    }
    #nav .active{
      color: red;
    }

    #page .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
    .scoll_content{
      height: auto;
    }
  </style>
</head>
<body>
  <div class="swiper-container" id="outside">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        1
      </div>
      <div class="swiper-slide">
        <!-- Swiper -->
        <div id="nav" 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 class="swiper-slide">Slide 4</div>
            <div class="swiper-slide">Slide 5</div>
            <div class="swiper-slide">Slide 6</div>
            <div class="swiper-slide">Slide 7</div>
            <div class="swiper-slide">Slide 8</div>
            <div class="swiper-slide">Slide 9</div>
            <div class="swiper-slide">Slide 10</div>
            <div class="swiper-slide">Slide 11</div>
            <div class="swiper-slide">Slide 12</div>
            <div class="swiper-slide">Slide 13</div>
            <div class="swiper-slide">Slide 141423421412341123423142412</div>
          </div>
        </div>
        <div class="swiper-container" id="page">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <div class="swiper-container scroll">
                <div class="swiper-wrapper">
                  <div class="swiper-slide scoll_content">
                    <ul>
                      <li>li1</li>
                      <li>li2</li>
                      <li>li3</li>
                      <li>li4</li>
                      <li>li5</li>
                      <li>li6</li>
                      <li>li7</li>
                      <li>li8</li>
                      <li>li9</li>
                      <li>li10</li>
                      <li>li11</li>
                      <li>li12</li>
                      <li>li13</li>
                      <li>li14</li>
                      <li>li15</li>
                      <li>li16</li>
                      <li>li17</li>
                      <li>li18</li>
                      <li>li19</li>
                      <li>li20</li>
                      <li>li21</li>
                      <li>li22</li>
                      <li>li23</li>
                      <li>li24</li>
                      <li>li25</li>
                      <li>li26</li>
                      <li>li27</li>
                      <li>li28</li>
                      <li>li29</li>
                      <li>li30</li>
                      <li>li31</li>
                      <li>li32</li>
                      <li>li33</li>
                      <li>li34</li>
                      <li>li35</li>
                      <li>li36</li>
                      <li>li37</li>
                      <li>li38</li>
                      <li>li39</li>
                      <li>li40</li>
                      <li>li41</li>
                      <li>li42</li>
                      <li>li43</li>
                      <li>li44</li>
                      <li>li45</li>
                      <li>li46</li>
                      <li>li47</li>
                      <li>li48</li>
                      <li>li49</li>
                      <li>li50</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="swiper-container scroll">
                <div class="swiper-wrapper">
                  <div class="swiper-slide scoll_content">
                    <ul>
                      <li>li1</li>
                      <li>li2</li>
                      <li>li3</li>
                      <li>li4</li>
                      <li>li5</li>
                      <li>li6</li>
                      <li>li7</li>
                      <li>li8</li>
                      <li>li9</li>
                      <li>li10</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="swiper-container scroll">
                <div class="swiper-wrapper">
                  <div class="swiper-slide scoll_content">
                    <ul>
                      <li>li1</li>
                      <li>li2</li>
                      <li>li3</li>
                      <li>li4</li>
                      <li>li5</li>
                      <li>li6</li>
                      <li>li7</li>
                      <li>li8</li>
                      <li>li9</li>
                      <li>li10</li>
                      <li>li11</li>
                      <li>li12</li>
                      <li>li13</li>
                      <li>li14</li>
                      <li>li15</li>
                      <li>li16</li>
                      <li>li17</li>
                      <li>li18</li>
                      <li>li19</li>
                      <li>li20</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="swiper-container scroll">
                <div class="swiper-wrapper">
                  <div class="swiper-slide scoll_content">
                    <ul>
                      <li>li1</li>
                      <li>li2</li>
                      <li>li3</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="swiper-container scroll">
                <div class="swiper-wrapper">
                  <div class="swiper-slide scoll_content">
                    <ul>
                      <li>li1</li>
                      <li>li2</li>
                      <li>li3</li>
                      <li>li4</li>
                      <li>li5</li>
                      <li>li6</li>
                      <li>li7</li>
                      <li>li8</li>
                      <li>li9</li>
                      <li>li10</li>
                      <li>li11</li>
                      <li>li12</li>
                      <li>li13</li>
                      <li>li14</li>
                      <li>li15</li>
                      <li>li16</li>
                      <li>li17</li>
                      <li>li18</li>
                      <li>li19</li>
                      <li>li20</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="swiper-container scroll">
                <div class="swiper-wrapper">
                  <div class="swiper-slide scoll_content">
                    <ul>
                      <li>li1</li>
                      <li>li2</li>
                      <li>li3</li>
                      <li>li4</li>
                      <li>li5</li>
                      <li>li6</li>
                      <li>li7</li>
                      <li>li8</li>
                      <li>li9</li>
                      <li>li10</li>
                      <li>li11</li>
                      <li>li12</li>
                      <li>li13</li>
                      <li>li14</li>
                      <li>li15</li>
                      <li>li16</li>
                      <li>li17</li>
                      <li>li18</li>
                      <li>li19</li>
                      <li>li20</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="swiper-container scroll">
                <div class="swiper-wrapper">
                  <div class="swiper-slide scoll_content">
                    <ul>
                      <li>li1</li>
                      <li>li2</li>
                      <li>li3</li>
                      <li>li4</li>
                      <li>li5</li>
                      <li>li6</li>
                      <li>li7</li>
                      <li>li8</li>
                      <li>li9</li>
                      <li>li10</li>
                      <li>li11</li>
                      <li>li12</li>
                      <li>li13</li>
                      <li>li14</li>
                      <li>li15</li>
                      <li>li16</li>
                      <li>li17</li>
                      <li>li18</li>
                      <li>li19</li>
                      <li>li20</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="swiper-container scroll">
                <div class="swiper-wrapper">
                  <div class="swiper-slide scoll_content">
                    <ul>
                      <li>li1</li>
                      <li>li2</li>
                      <li>li3</li>
                      <li>li4</li>
                      <li>li5</li>
                      <li>li6</li>
                      <li>li7</li>
                      <li>li8</li>
                      <li>li9</li>
                      <li>li10</li>
                      <li>li11</li>
                      <li>li12</li>
                      <li>li13</li>
                      <li>li14</li>
                      <li>li15</li>
                      <li>li16</li>
                      <li>li17</li>
                      <li>li18</li>
                      <li>li19</li>
                      <li>li20</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="swiper-container scroll">
                <div class="swiper-wrapper">
                  <div class="swiper-slide scoll_content">
                    <ul>
                      <li>li1</li>
                      <li>li2</li>
                      <li>li3</li>
                      <li>li4</li>
                      <li>li5</li>
                      <li>li6</li>
                      <li>li7</li>
                      <li>li8</li>
                      <li>li9</li>
                      <li>li10</li>
                      <li>li11</li>
                      <li>li12</li>
                      <li>li13</li>
                      <li>li14</li>
                      <li>li15</li>
                      <li>li16</li>
                      <li>li17</li>
                      <li>li18</li>
                      <li>li19</li>
                      <li>li20</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <div class="swiper-slide">Slide 10</div>
            <div class="swiper-slide">Slide 11</div>
            <div class="swiper-slide">Slide 12</div>
            <div class="swiper-slide">Slide 13</div>
            <div class="swiper-slide">Slide 14</div>
          </div>
          <div class="swiper-pagination"></div>
        </div>
      </div>
    </div>
  </div>

  <!-- Swiper JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/js/swiper.js"></script>


  <script>

   var outsideSwiper = new Swiper('#outside', {
     direction: 'vertical',
     height: window.innerHeight,
   })

    var clientWidth = 0
    var navAllWidth = 0

    var pageSwiper = new Swiper('#page', {
      spaceBetween: 10,
      pagination: {
        el: '#page .swiper-pagination'
      },
      on: {
        slideChangeTransitionStart() {
          var index = this.activeIndex
          var slides = navSwiper.slides

          slides.removeClass('active')
          slides.eq(index).addClass('active')
          navSwiper.setTransition(300)

          var slideLeft = slides[index].offsetLeft
          var slideWidth = slides[index].offsetWidth

//          console.log(slideLeft)
//          console.log(navAllWidth - clientWidth/2)
//          console.log('-----')

          var centerLeft = (clientWidth-slideWidth)/2
          if (slideLeft < centerLeft) {
            navSwiper.setTranslate(0)
          } else {
            if (slideLeft > navAllWidth - (clientWidth+slideWidth)/2) {
              navSwiper.setTranslate(clientWidth - navAllWidth)
            } else {
              navSwiper.setTranslate(centerLeft - slideLeft)
            }
          }
        }
      }
    });


    var navSwiper = new Swiper('#nav', {
      slidesPerView: 'auto',
      freeMode: true,
      freeModeSticky: true,
      on: {
        init() {
//          console.log(this)
          this.slides.eq(0).addClass('active')
          clientWidth = parseInt(this.$wrapperEl.css('width')) //Nav的可视宽度
          for (var i=0; i<this.slides.length; i++) {
            navAllWidth += parseInt(this.slides[i].offsetWidth)
          }
        },
        tap() {
          var index = this.clickedIndex
          pageSwiper.slideTo(index, 0)
        }
      }
    });

    var navHeight = document.getElementById('nav').offsetHeight

    var contentSwiper = new Swiper('.scroll', {
      direction: 'vertical',
      freeMode: true,
      slidesPerView: 'auto',
      slidesOffsetBefore: navHeight,
      mousewheel: {
        releaseOnEdges: true,
      },
      on: {
        touchMove() {
          if (this.translate>navHeight+20) {
            outsideSwiper.slideTo(0)
          }
        }
      }
    })

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

 

转载于:https://www.cnblogs.com/zph666/p/9373997.html

weixin_30439031
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值