基于swiper实现带缩略图的轮播图

最新推荐文章于 2024-08-23 16:41:02 发布

Echo.OuYang

最新推荐文章于 2024-08-23 16:41:02 发布

阅读量2.9k

点赞数 1

分类专栏：前端文章标签： html5

本文链接：https://blog.csdn.net/yangzai929/article/details/113049914

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

基于swiper实现带缩略图的轮播图

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
</head>
<body>
<style>
    .swiper-container {
        width: 300px;
        height: 300px;
    }
    .test img {
        opacity: 0.5;
    }
    .swiper-slide-thumb-active img {
        opacity: 1;
    }


</style>

<div class="swiper-container" id="gallery">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="https://img.alicdn.com/imgextra/i1/101278464/TB25985ffiSBuNkSnhJXXbDcpXa_!!101278464.jpg_310x310.jpg" alt=""></div>
        <div class="swiper-slide"><img src="https://img.alicdn.com/imgextra/i2/1877304343/O1CN01yQzUZE1hx8dG0UWB5_!!1877304343.jpg_310x310.jpg" alt=""></div>
        <div class="swiper-slide"><img src="https://img.alicdn.com/imgextra/i4/1877304343/O1CN01u8Sdlo1hx8dK8BzxN_!!1877304343.jpg_310x310.jpg" alt=""></div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- 如果需要滚动条 -->
<!--    <div class="swiper-scrollbar"></div>-->
</div>
<div class="swiper-container swiper-container-thumbs" id="thumbs">
    <div class="swiper-wrappers swiper-wrapper">
        <div class="swiper-slide test swiper-slide-active swiper-slide-thumb-active"><img style="width: 100px" src="https://img.alicdn.com/imgextra/i1/101278464/TB25985ffiSBuNkSnhJXXbDcpXa_!!101278464.jpg_310x310.jpg" alt=""></div>
        <div class="swiper-slide test"><img style="width:100px" src="https://img.alicdn.com/imgextra/i2/1877304343/O1CN01yQzUZE1hx8dG0UWB5_!!1877304343.jpg_310x310.jpg" alt=""></div>
        <div class="swiper-slide test"><img style="width: 100px" src="https://img.alicdn.com/imgextra/i4/1877304343/O1CN01u8Sdlo1hx8dK8BzxN_!!1877304343.jpg_310x310.jpg" alt=""></div>
    </div>
</div>

</body>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"> </script>
<script>

    var gallerySwiper = new Swiper('#gallery',{
        autoplay:{
          disableOnInteraction:false,
        },
      
        pagination: {
            el: '.swiper-pagination',
        },
        spaceBetween: 10,
        navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
        thumbs: {
            swiper: {
                el: '#thumbs',
                spaceBetween: 5,
                slidesPerView: 3,
                watchSlidesVisibility: true,/*避免出现bug*/
            },
        }
    })

</script>
<script >

</script>
</html>```