swiper缩略图的loop为false时，滑动添加类名

最新推荐文章于 2024-06-01 15:20:37 发布

QSWQSWQSWQSWQSW

最新推荐文章于 2024-06-01 15:20:37 发布

阅读量479

点赞数

分类专栏： IT js 文章标签： swiper 缩略图

本文链接：https://blog.csdn.net/qq_43209114/article/details/115466210

版权

IT 同时被 2 个专栏收录

83 篇文章 2 订阅

订阅专栏

46 篇文章 0 订阅

订阅专栏

该博客介绍了如何利用Swiper.js库创建一个包含视频和图片的轮播组件。内容包括设置轮播参数，如空间间隔、视图数、自由模式等，以及实现点击 thumbs 轮播项时更新 top 轮播项，并添加了视频播放与暂停的控制功能。同时，展示了对应的HTML结构和CSS样式，确保轮播的视觉效果和交互体验。

摘要由CSDN通过智能技术生成

// 详情图片联动
var galleryThumbs = new Swiper('.gallery-thumbs', {
        spaceBetween: 1,
        slidesPerView: 4,
        freeMode: true,
        // loop:true,
        virtualTranslate: true,
        watchSlidesVisibility: true,
        watchSlidesProgress: true,
        on:{
            tap: function(swiper,event){
                // console.log(galleryThumbs.clickedIndex)
                var index= galleryThumbs.clickedIndex;
                a(index);
            },
            init: function(swiper){
                b()
            }, 
        },
    });
    function a(i){
        $(".gallery-thumbs .swiper-slide").eq(i).addClass('active').siblings().removeClass('active');
    }
    function b(){
        $(".gallery-thumbs .swiper-slide").eq(0).addClass('active');
    }
    var galleryTop = new Swiper('.gallery-top', {
        spaceBetween: 10,
        thumbs: {
            swiper: galleryThumbs
        },
        on: {
            slideNextTransitionEnd: function () {
                if ($("video").length == 0) {

                } else {
                    $("video")[0].pause()
                }
            },
            slideChangeTransitionEnd: function(){
                // console.log(this.activeIndex);//切换结束时，告诉我现在是第几个slide
                var index= this.activeIndex;
                a(index);
            },
        }
    });

里面方法swiper文档里都有。

html

<!-- Swiper -->
<div class="swiper-container gallery-top">
    <div class="swiper-wrapper">
        {if condition="!empty($details['product_video'])"}
            <video id="my-video" class="video-js vjs-big-play-centered swiper-slide" controls x-webkit-airplay="allow" x5-playsinline='true' playsinline='true' webkit-playsinline='true' x5-video-orientation='portraint' x5-video-player-fullscreen='true' preload="auto" data-setup="{}">
                <source src="{$details['product_video_url']}">
            </video>
            <script>
                var myVideo = videojs('my-video', {
                    bigPlayButton: true,
                    textTrackDisplay: false,
                    posterImage: false,
                    errorDisplay: false,
                })
            </script>
        {/if}
        {foreach $details['product_image'] as $val}
            <div class="swiper-slide">
                <img src="{$_placeholder_map}" class="lazyload" data-src="{:get_image_url($val, '', '100')}" />
            </div>
        {/foreach}
    </div>
</div>

<div class="swiper-container gallery-thumbs">
    <div class="swiper-wrapper" style="justify-content: center;">
        {if condition="!empty($details['product_video'])"}
            <div class="exhibits_details_video swiper-slide">
                <img src="__img__/play.png" class="exhibits_details_video_icon">
                <video class="video-js vjs-big-play-centered" style="width: 68px !important;height: 68px;" x-webkit-airplay="allow" x5-playsinline='true' playsinline='true' webkit-playsinline='true' x5-video-orientation='portraint' x5-video-player-fullscreen='true' preload="auto" data-setup="{}">
                    <source src="{$details['product_video_url']}">
                </video>
            </div>
        {/if}
        {foreach $details['product_image'] as $val}
            <div class="swiper-slide">
                <img src="{$_placeholder_map}" class="lazyload swiper_small_img" data-src="{:get_image_url($val, '', '30')}" />
            </div>
        {/foreach}
    </div>
</div>

php代码循环的，没用的去掉就行。

css

/* swiper */
.swiper-container {
  width: 100%;
  /* height: 300px; */
  margin-left: auto;
  margin-right: auto;
}

.swiper-slide {
  background-size: cover;
  background-position: center;
}

.gallery-top {
  height: 536px;
  width: 100%;
}
.gallery-top .swiper-slide img{
    height: 536px;
    width: 100%;
}

.gallery-thumbs {
  /* height: 20%; */
  box-sizing: border-box;
  padding: 10px 0;
}
.gallery-thumbs .swiper-slide {
  /* opacity: 0.4; */
  width: 68px !important;
  height: 68px;
  position: relative;
  /* object-fit: contain; */
}
.gallery-thumbs .swiper-slide img{
    width: 100%;
    height: 100%;
    content: '1';
}

.gallery-thumbs .swiper-slide:visited{
    opacity: 1;
}

.gallery-thumbs .swiper-slide-thumb-active {
    opacity: 1;
    border-bottom: 2px solid #E63A3A;
}
.active::after{
    content: '';
    width: 68px;
    height: 2px;
    background: #E63A3A;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 999;
    /* border-bottom: 2px solid #E63A3A; */
}
.gallery-top img{
    padding: 0 78px;
    object-fit: contain;
}