swiper轮播图以及网格左右滑动

网格左右滑动

html

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">slider1</div>
    <div class="swiper-slide">slider2</div>
    <div class="swiper-slide">slider3</div>
  </div>
</div>

js初始化

<script language="javascript"> 
var mySwiper = new Swiper('.swiper-container',{
	slidesPerView : 3,    // 页面显示的个数
	spaceBetween : 20,    //间距
	//spaceBetween : '10%',按container的百分比
	// 	遇到ajax动态渲染的数据，解决滑动失效问题
	// 启动动态检查器(OB/观众/观看者)，当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper。
	observer:true,
	// 将observe应用于Swiper的父元素。当Swiper的父元素变化时，例如window.resize，Swiper更新
	observeParents:true,
	// 子slide更新时，swiper是否更新
	observeSlideChildren:true,
})
</script>

轮播图

       <!-- swiper轮播图 -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="../img/eco.png" alt=""></div>
                <div class="swiper-slide"><img src="../img/eco.png" alt=""></div>
                <div class="swiper-slide"><img src="../img/eco.png" alt=""></div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
        </div>

  // 轮播图
    var mySwiper = new Swiper('.swiper-container', {
        direction: 'horizontal', // 垂直切换选项
        loop: true, // 循环模式选项
        autoplay: true,
        // 手动之后，继续自动
        autoplay: {
            disableOnInteraction: false,
        },
        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },

    })

    // 轮播图
    .swiper-container {
        width: 100%;
        height: 2.27rem;
        .swiper-pagination-bullet {
            width: 0.12rem;
            height: 0.08rem;
            background: rgba(255, 255, 255, 1);
            opacity: 0.4;
            border-radius: 0.04rem;
        }
        .swiper-pagination-bullet-active {
            width: 0.18rem;
            height: 0.08rem;
            background: rgba(255, 255, 255, 1);
            border-radius: 0.04rem;
            opacity: 1;
        }
    }