前端之旅

有寫過左右輪播的文章，

接下來要寫左右輪播時，

如何在圖片上放文字和文字背景呢？

一樣要先載入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>
        <div class="banner">
            <div class="slider single-item responsive">
                <div><div class="pic_01"><p class="Title">01</p></div></div>
                <div><div class="pic_02"><p class="Title">02</p></div></div>
                <div><div class="pic_03"><p class="Title">03</p></div></div>
                <div><div class="pic_04"><p class="Title">04</p></div></div>
                <div><div class="pic_05"><p class="Title">05</p></div></div>
            </div>
        </div>
    </div>

CSS：

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

.slick-slide {
    height: 200px;
}

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

.pic_01, .pic_02, .pic_03, .pic_04, .pic_05 {
    height: 200px;
    width: 195px;
    margin: auto;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.pic_01 {
    background-image: url(../images/1.png);
}

.pic_02 {
    background-image: url(../images/2.png);
}

.pic_03 {
    background-image: url(../images/3.png);
    
}
.pic_04 {
    background-image: url(../images/4.png);
    
}
.pic_05 {
    background-image: url(../images/5.png);
    
}

.Title {
    text-align: center;
    padding: 0px 0px;
    margin: 16px;
    display: block;
    float: left;
    width: 160px;
    margin-top: 158px;
    background: rgba(94, 101, 105, 0.36);
    width: 195px;
    margin-left: 0px;
    color: #FFF;
}

JavaScript：

$('.responsive').slick({
  infinite: true,
  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
      }
    }
  ]
});

完成如下：