<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">slider1</div> <div class="swiper-slide">slider2</div> <div class="swiper-slide">slider3</div> <div class="swiper-slide">slider4</div> <div class="swiper-slide">slider5</div> <div class="swiper-slide">slider6</div> <div class="swiper-slide">slider7</div> <div class="swiper-slide">slider8</div> <div class="swiper-slide">slider9</div> <div class="swiper-slide">slider10</div> <div class="swiper-slide">slider11</div> <div class="swiper-slide">slider12</div> </div> </div> <div class="navigation"> <button onclick="prev()">Previous</button> <button onclick="next()">Next</button> </div> <script> x = 0; function prev() { x = x + 500; y = x + 'px' // document.querySelector('.swiper-wrapper').style = 'transition-duration: 300ms; transform: translate3d(' + y + ', 0px, 0px);' document.querySelector('.swiper-wrapper').style = 'transition-duration: 300ms; transform: translateX(' + y + ');' } function next() { x = x - 500; y = x + 'px' document.querySelector('.swiper-wrapper').style = 'transition-duration: 300ms; transform: translateX(' + y + ');' } </script> <style> body { box-sizing: border-box; } .swiper-container { display: flex; overflow: hidden; width: 500px; height: 700px; border: 1px solid red; margin: auto; box-sizing: border-box; } .swiper-wrapper { width: 100%; height: 100%; align-items: center; display: flex; } .swiper-slide { width: 500px; height: 700px; border: 1px solid green; flex-shrink: 0; box-sizing: border-box; } .navigation { display: flex; justify-content: center; align-items: center; margin-top: 20px; } .navigation button { width: 100px; } </style>
标签:box,flex,功通,wrapper,width,swiper,border,模拟 From: https://www.cnblogs.com/dming4/p/17539135.html