swiper手机导航效果，超出部分可左右拖拽
  • 分享到微信朋友圈
    X
立即下载 查看演示

本文介绍如何使用swiper制作一个手机导航效果，超出部分可以左右拖拽。

Swiper是一个流行的开源的移动端触摸滑动插件，用于创建滑动、轮播等交互效果。它支持多种滑动模式和自定义配置，非常适合用于创建幻灯片展示。

手机效果.jpg
手机效果图

使用方法

1. 在 HTML 文档中包含 jQuery 库和 swiper.js。

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/swiper.js" type="text/javascript"></script>

2. swiper初始化。

<script>
 var mySwiper = new Swiper(".sub-nav-tj .swiper-container", { 
    observer: true,//开启动态检查器
    observeParents: true,//监测Swiper 的祖/父元素
    slidesPerView: "auto",//自动根据slides的宽度来设定数量。
    freeMode: true,//启用自由模式功能。
    mousewheelControl: true,//是否开启鼠标控制Swiper切换。
    on: {
        //手指触碰Swiper并拖动slide时执行。
      sliderMove: function (e) { 
      },
    },
  });
</script>