今天遇到需求需要做個淘寶那樣的商品詳情頁如圖（這里只差放圖片了）支持移動端，當然用的是swiper.js支持左右滑動

上代碼
html代碼

<div 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><!-- Add Pagination --><div class="swiper-pagination"></div></div>

css代碼

.swiper-pagination-fraction, .swiper-pagination-custom,.swiper-container-horizontal > .swiper-pagination-bullets {bottom: 10px;left: 0;width: 100%; }.swiper-pagination {position: absolute;text-align: center;transition: 300ms opacity;transform: translate3d(0, 0, 0);z-index: 10;}.swiper-slide {flex-shrink: 0;width: 100%;height: 100%;position: relative;transition-property: transform;}.swiper-wrapper {position: relative;width: 100%;height: 100%;z-index: 1;display: flex;transition-property: transform;box-sizing: content-box;}.swiper-container {width: 100%;height: 500px;margin-left: auto;margin-right: auto;position: relative;overflow: hidden;list-style: none;padding: 0;z-index: 1; }.swiper-slide {text-align: center;font-size: 18px;background: red;/* 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;}

js代碼，記得引入swiper.min.js文件自己去官網下吧，我用的5版本

<script src="js/swiper.min.js"></script> <script>var swiper = new Swiper('.swiper-container', {pagination: {el: '.swiper-pagination',type: 'fraction',},});

上面這些代碼只需要ctrl+c就能做出更我一樣的效果，記得點贊，謝謝啦

總結

以上是生活随笔為你收集整理的仿淘宝商品详情页图片滑动并且数字也跟着变化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。