Swiper.js轮播插件实现手机端横向滑动菜单效果

Web前端开发 / 15 次阅读

网页菜单左右横向滑动是手机端最常见的菜单布局效果，简单的左右滑动一般可以直接通过css样式overflow-x:scroll;（或auto自适应显示滚动）结合jQuery的scrollLeft()方法实现，但想要扩展性强一点，通过Swiper.js轮播插件实现会更好，而且个人感觉更丝滑。

效果如下：

swiper-Horizontal-sliding-menu-on-mobile-phone.jpg

效果基于Swiper 8.4.7版本，可自行前往官网下载：https://swiperjs.com/

HTML代码：

<link rel="stylesheet" type="text/css" href="../swiper-8.4.7/swiper-bundle.css" media="screen"/>
<script src="../swiper-8.4.7/swiper-bundle.min.js"></script>
<script>
var menuID = 1;
</script>
<div class="submenu">
    <div class="swiper">
        <div class="swiper-wrapper">        
            <div class="swiper-slide" id="menu1">
                <a href="#">公司新闻</a>
            </div>            
            <div class="swiper-slide" id="menu2">
                <a href="#">行业资讯</a>
            </div>            
            <div class="swiper-slide" id="menu3">
                <a href="#">媒体报道</a>
            </div>            
            <div class="swiper-slide" id="menu4">
                <a href="#">最新活动</a>
            </div>            
            <div class="swiper-slide" id="menu5">
                <a href="#">企业文化</a>
            </div>            
            <div class="swiper-slide" id="menu6">
                <a href="#">发展历程</a>
            </div>
        </div>
    </div>
    <div class="arrow prev"></div>                
    <div class="arrow next"></div>
</div>

CSS代码：

html {font-size:100px;}
.submenu {position: relative;}
.submenu .swiper-slide {width: auto;font-size:0.18rem;line-height:2em;padding:0.32rem 0;}
.submenu .swiper-slide:after{content:'';display:block;position:absolute;left:0;bottom:0;height:2px;width:100%;background-color:var(--blue-color);opacity:0;}
.submenu a{display:block;white-space:nowrap;}
.submenu a:not(:hover){color:#666;}
.submenu .cur:after{opacity:1;}
.submenu .cur a{color:var(--blue-color);}

@keyframes slideLeft {
    0% {
        left:-0.1rem;
        opacity: 1;
    }
    50% {
        left:-0.2rem;
        opacity: 0;
    }
    100% {
        left:-0.1rem;
        opacity: 1;
    }
}
@keyframes slideRight {
    0% {
        right:-0.1rem;
        opacity: 1;
    }
    50% {
        right:-0.2rem;
        opacity: 0;
    }    
    100% {
        right:-0.1rem;
        opacity: 1;
    }
}
@media only screen and (max-width:750px){
    .submenu {padding:0 0.2rem;}
    .submenu .swiper-slide {padding:0.2rem 0;}
    .submenu .arrow {position: absolute; top:50%; transform: translateY(-50%); width:0.2rem; height: 0.16rem; background: no-repeat center center; background-size: contain; cursor: pointer;}
    .submenu .prev {left:-0.1rem; background-image: url(../images/arrow_left.svg); animation: slideLeft 2s linear 0s infinite;}
    .submenu .next {right:-0.1rem; background-image: url(../images/arrow_right.svg); animation: slideRight 2s linear 0s infinite;}
}

图标素材：

把下面的代码保存为arrow_left.svg文件

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg t="1754031543365" class="icon" viewBox="0 0 1275 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16452" width="19.921875" height="16" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M88.37067278 545.75483662L498.91267239 949.13572167A45.153617 45.153617 0 0 0 561.90475433 949.13572167a43.35261768 43.35261768 0 0 0 0-61.87717792l-382.11194444-375.33675849L561.90475433 136.5421458a43.13821289 43.13821289 0 0 0 0-61.7056541 44.98209316 44.98209316 0 0 0-62.86343906 0l-410.58488057 403.38088418a42.88092715 42.88092715 0 0 0-12.64987354 33.83305224 42.88092715 42.88092715 0 0 0 12.86427832 33.7044085" fill="#D2D3D3" p-id="16453"></path>
<path d="M397.62792132 512.05042812a42.32347559 42.32347559 0 0 0 12.47834971 33.66152753L820.64827152 949.13572168A45.36802089 45.36802089 0 0 0 883.51171057 949.13572168a43.43837959 43.43837959 0 0 0 2e-8-61.74853506l-382.41211114-375.3367585L883.51171056 136.5421458a43.2239748 43.2239748 0 0 0 2e-8-61.7056541 45.11073604 45.11073604 0 0 0-63.03496289 0l-410.58488057 403.38088418a42.88092715 42.88092715 0 0 0-12.43546963 33.83305224" fill="#A3A2A2" p-id="16454"></path>
<path d="M697.53712825 512.05042812a42.45211846 42.45211846 0 0 0 12.43546875 33.66152754L1120.55747757 949.13572167A45.32513994 45.32513994 0 0 0 1183.67820325 949.13572168a43.35261768 43.35261768 0 0 0 0-61.74853506l-382.49787305-375.3367585L1183.67820325 136.5421458a43.13821289 43.13821289 0 0 0 0-61.7056541 45.06785508 45.06785508 0 0 0-62.99208281 0l-410.58488057 403.38088418a42.53788037 42.53788037 0 0 0-12.43546875 33.83305224" fill="#8C8E8D" p-id="16455"></path>
</svg>

把下面的代码保存为arrow_right.svg文件

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg t="1754031475910" class="icon" viewBox="0 0 1275 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16248" width="19.921875" height="16" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M1260.994553 473.594497L793.888989 14.63669A51.374782 51.374782 0 0 0 722.217998 14.63669a49.325645 49.325645 0 0 0 0 70.402478l434.758479 427.049823L722.217998 939.187603a49.0817 49.0817 0 0 0 0 70.207322 51.179626 51.179626 0 0 0 71.524624 0l467.154353-458.957806a48.788966 48.788966 0 0 0 14.392745-38.494495 48.788966 48.788966 0 0 0-14.63669-38.348127" fill="#D2D3D3" p-id="16249"></path>
<path d="M909.128528 511.942624a48.15471 48.15471 0 0 0-14.197589-38.299338L427.825374 14.63669A51.618726 51.618726 0 0 0 356.30075 14.63669a49.423223 49.423223 0 0 0 0 70.256111l435.100002 427.049823L356.30075 939.187603a49.179278 49.179278 0 0 0 0 70.207322 51.325993 51.325993 0 0 0 71.71978 0l467.154353-458.957806a48.788966 48.788966 0 0 0 14.148801-38.494495" fill="#A3A2A2" p-id="16250"></path>
<path d="M567.898497 511.942624a48.301077 48.301077 0 0 0-14.1488-38.299338L86.595344 14.63669A51.569937 51.569937 0 0 0 14.777985 14.63669a49.325645 49.325645 0 0 0 0 70.256111l435.19758 427.049823L14.777985 939.187603a49.0817 49.0817 0 0 0 0 70.207322 51.277204 51.277204 0 0 0 71.670992 0l467.154353-458.957806a48.398655 48.398655 0 0 0 14.1488-38.494495" fill="#8C8E8D" p-id="16251"></path>
</svg>

PS：如果不喜欢这两个箭头图标，可以自动找图片替换。

JS代码：

if(typeof menuID !='undefined' && $('#menu'+ menuID).length > 0){
    var menuIndex = $('#menu'+ menuID).index();
    $('#menu'+ menuID).addClass('cur');
}
var initialSlide = menuIndex ? menuIndex : 0;
var $submenu = new Swiper('.submenu .swiper',{
    slidesPerView:'auto',
    spaceBetween:'10%',
    slideToClickedSlide: true,
    initialSlide:initialSlide,
    navigation: {
        nextEl: '.submenu .next',
        prevEl: '.submenu .prev',
    },
    breakpoints: { 
        751: {
            spaceBetween:'5%',
        },
        1025: {
            spaceBetween:'3.333%',
        }
    }
});

如果不用initialSlide，也可以用下面的方法定位到当前栏目

$submenu.slideTo(initialSlide);

完成！