一、左右輪播

先載入Slick、JQuery:

<link rel="stylesheet" type="text/css" href="js/slick/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="js/slick/slick/slick-theme.css"/>

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

 

HTML:

<div style="padding-bottom: 50px;">
        <div class="banner">
            <div class="slider single-item responsive">
                <div><img src="images/1.png"><h3>1</h3></div>
                <div><img src="images/2.png"><h3>2</h3></div>
                <div><img src="images/3.png"><h3>3</h3></div>
                <div><img src="images/4.png"><h3>4</h3></div>
                <div><img src="images/5.png"><h3>5</h3></div>
            </div>
        </div>
    </div>

 

JavaScript:

在此設定要輪播的效果。

$('.responsive').slick({
  infinite: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 1,
  autoplay: true,
  arrows: true,
  prevArrow: '<button type="button" class="slick-prev Btn-prev">Previous</button>',
  nextArrow: '<button type="button" class="slick-next Btn-next">Next</button>',
  autoplaySpeed: 3000,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
  ]
});

---------------------------------------------------

二、效果介紹:

1. 需要左右兩邊可滑動的箭頭〈如完成圖上〉:

arrows: true,
prevArrow: '<button type="button" class="slick-prev Btn-prev">Previous</button>',
nextArrow: '<button type="button" class="slick-next Btn-next">Next</button>',

2.畫面中一次輪播的幾張圖片:

slidesToShow: 4

3.左右滑動時,一次更新幾張圖片:

slidesToScroll: 1

4.照片播完時,再重新播放:

infinite: true

5.照片自動播放:

autoplay: true

6.每次輪播時間的間隔:

autoplaySpeed: 3000,

 

CSS:

h3 {
    text-align: center;
}

.banner {
    width: 80%;
    margin: auto;
}

img {
    width: 200px;
}

.slick-slide {
    height: 45%;
}

.Btn-prev, .Btn-next {
background: #6994B9;
}

.slick-slide img{
    margin: auto;
}

 

完成如下:

 

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 Carol 的頭像
    Carol

    前端之旅

    Carol 發表在 痞客邦 留言(0) 人氣()