Swiper 导航栏向左滑动效果

spriteson

已于 2022-03-02 15:01:05 修改

阅读量828

点赞数

分类专栏： JavaScript 文章标签： css html javascript

于 2022-03-01 13:33:22 首次发布

原文链接：https://blog.csdn.net/weixin_45785873/article/details/108538279

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

根据当前点击的“标签”为起点，当前标签的位置大于视口的一半时，让容器的位置偏移一定的位置，让当前点击的“标签”始终在视口的中间位置。
在这里插入图片描述

1、引入相关插件

 <link rel="stylesheet" href="../css/swiper.css">
<script src="http://www.jq22.com/jquery/jquery-1.7.1.js"></script>
<script src="../js/swiper.js"></script>

2、编写html(界面)

<div class="box">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">综合</div>
            <div class="swiper-slide">单曲</div>
            <div class="swiper-slide">视频</div>
            <div class="swiper-slide">歌手</div>
            <div class="swiper-slide">专辑</div>
            <div class="swiper-slide">歌单</div>
            <div class="swiper-slide">主播电台</div>
            <span></span>
        </div>
    </div>
</div>

3、css

        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 500px;
            height: 50px;
            border: 1px solid #000;
            margin: 100px auto;
        }
        .swiper-container{
            width: auto!important;
            height: 100%;
            text-align: center;
            line-height: 50px;
            color: #000;
            font-size: 20px;
        }
        .swiper-wrapper{
            position: relative;
            width: auto!important;
            height: 100%;
        }
        .swiper-slide {
            list-style: none;
            display: flex;
            justify-content: flex-start;
            flex-wrap: nowrap;
            cursor: pointer;
        }
        .swiper-wrapper span{
            position: absolute;
            height: 3px;
            background: #000;
            left: 1%;
            top: 85%;
        }
        .swiper-slide{
            width: auto!important;
            margin-right: 15px!important;
            padding: 0 18px;
        }
/*为了让每个swiper-slide的宽度由内容撑起，右边显示一半是提示用户这个导航栏是可以滚动的，所以在初始化时要设置swiper的slidesPerView为auto，slidesPerView: “auto”, 同时要在css设置swiper-slide的样式为：*/

.swiper-slide{
            width: auto!important;
            margin-right: 15px!important;
            padding: 0 18px;
        }

4、js

 $(function () {
        $(".swiper-wrapper span").css({width: $(".swiper-slide")[0].offsetWidth});
        let navScroll = new Swiper('.box .swiper-container', {
            freeMode:true,
            slidesPerView: "auto",
            freeModeMomentumRatio: 0.5,
            on:{
            //当前swiper-slide点击时触发事件
                click:function (e) {
                    let thisWidth = this.clickedSlide.offsetWidth;
                    let thisLeft = this.clickedSlide.offsetLeft;
                    let offsetX = this.width / 2 - thisLeft - thisWidth  / 2;
                    //偏移量在1/2视口内时，容器不发生偏移
                    if (offsetX > 0){
                        offsetX = 0;
                    }
                    //offsetX小于容器最大偏移时，让偏移量等于容器最大的偏移量
                    else if (offsetX < this.maxTranslate()){
                        offsetX = this.maxTranslate();
                    }
                    //设置容器的过渡动画
                    this.setTransition(300);
                    this.setTranslate(offsetX);
                     //滚动条位置和长度执行动画
                    $(".swiper-wrapper span").animate({left: thisLeft, width: thisWidth},400);
                }
            }
        });
    })

转载：https://blog.csdn.net/weixin_45785873/article/details/108538279

方法二：

<div class="zhsq_flnav">
    <div class="swiper-container gallery-thumbs">
        <div class="swiper-wrapper">
            <div class="swiper-slide">栏目1</div>
            <div class="swiper-slide">栏目2</div>
            <div class="swiper-slide">栏目3</div>
            <div class="swiper-slide">栏目4</div>
            <div class="swiper-slide">栏目5</div>
            <div class="swiper-slide">栏目6</div>
            <div class="swiper-slide">栏目7</div>
            <div class="swiper-slide">栏目8</div>
        </div>
    </div>
    <div class="gallery-top"></div>
  </div>
  
  
  <script>
    $(function () {
        var galleryThumbs = new Swiper('.gallery-thumbs', {
            spaceBetween: 10,
            slidesPerView:'auto',
            freeMode: true,
            watchSlidesVisibility: true,
            watchSlidesProgress: true,
            on: {
                //当前swiper-slide点击时触发事件
                click: function (e) {
                    updateNavPosition()
                }
            }

        });
        var galleryTop = new Swiper('.gallery-top', {

            thumbs: {
                swiper: galleryThumbs
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });

//当前选中的line
        function updateNavPosition() {
            var ccc=galleryTop.realIndex
            console.log(ccc)

        }


    })
</script>