有寫過左右輪播的文章,
接下來要寫左右輪播時,
如何在圖片上放文字和文字背景呢?
一樣要先載入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
}
}
]
});
完成如下:
留言列表