前端之旅

一、左右輪播

要先載入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
      }
    }
  ]
});

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

二、效果介紹：

１． 需要左右兩邊可滑動的箭頭〈如完成圖上〉：

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

２．畫面中一次輪播的幾張圖片：

slidesToShow: 4

３．左右滑動時，一次更新幾張圖片：

slidesToScroll: 1

４．照片播完時，再重新播放：

infinite: true

５．照片自動播放：

autoplay: true

６．每次輪播時間的間隔：

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;
}

完成如下：