swiper轮播图常用配置

swiper轮播图常用配置

1. 首先引入swiper.css和swiper.js
2. 引入jQuery
   代码块如下
   css:

*{
    
    
    margin: 0;
    padding: 0;
}
html,body{
    
    
    width: 100%;
    height: 100%;
}
.swiper-container {
    
    
    width: 100%;
    height: 600px;
}
.swiper-slide {
    
    
    text-align: center;
    font-size: 18px;
    background: burlywood;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

html:

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>
        <div class="swiper-slide">Slide 9</div>
        <div class="swiper-slide">Slide 10</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>

js:

var swiper = new Swiper('.swiper-container', {
    
    
    slidesPerView: 4, //swiper-slide一页显示的个数
    spaceBetween: 30, //swiper-slide之间的间距
    autoplay:1000,
    loop:true,   //设置循环播放
    // 如果需要分页器
    pagination: '.swiper-pagination',

    // 如果需要前进后退按钮
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',

    // 如果需要滚动条
    scrollbar: '.swiper-scrollbar',
    // pagination: {
    
    
    //     el: '.swiper-pagination',
    //     clickable: true,
    // },
});