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>