下面上首页轮播图部分代码,先看效果图:
下面上代码:
<div class="hero-section">
<div class="hero-slider">
<!--Hero Item start-->
<div class="hero-item hero-item-2" style="background-image: url(assets/images/hero/hero-2.jpg)">
<div class="container container-1520">
<div class="row">
<div class="col-12">
<!--Hero Content start-->
<div class="hero-content">
<h1>THE WITCHER 3</h1>
<h2>BETTLE BEGAN’S HERE</h2>
<a class="df-btn" href="#">Buy now</a>
</div>
<!--Hero Content end-->
</div>
</div>
</div>
</div>
<!--Hero Item end-->
<!--Hero Item start-->
<div class="hero-item hero-item-2" style="background-image: url(assets/images/hero/hero-3.jpg)">
<div class="container container-1520">
<div class="row">
<div class="col-12">
<!--Hero Content start-->
<div class="hero-content">
<h1>THE WITCHER 3</h1>
<h2>BETTLE BEGAN’S HERE</h2>
<a class="df-btn" href="#">Buy now</a>
</div>
<!--Hero Content end-->
</div>
</div>
</div>
</div>
<!--Hero Item end-->
</div>
</div>
.hero-item {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-size: cover;
display: flex!important;
background-repeat: no-repeat;
background-position: center center;
}
.hero-item.hero-item-2 {
height: 860px; }
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
.hero-item.hero-item-2 {
height: 600px; } }
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.hero-item.hero-item-2 {
height: 600px; } }
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero-item.hero-item-2 {
height: 500px; } }
@media only screen and (max-width: 767px) {
.hero-item.hero-item-2 {
height: 400px; } }
.hero-item.hero-item-4 {
height: 750px; }
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
.hero-item.hero-item-4 {
height: 500px; } }
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.hero-item.hero-item-4 {
height: 400px; } }
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero-item.hero-item-4 {
height: 300px; } }
@media only screen and (max-width: 767px) {
.hero-item.hero-item-4 {
height: 300px; } }
.hero-slider .slick-arrow.slick-prev {
right: calc(50% + 7px);
left: auto;
}
.hero-slider .slick-arrow.slick-next {
left: calc(50% + 7px);
right: auto;
}
.hero-slider .slick-arrow {
position: absolute;
bottom: 70px;
z-index: 9;
border: none;
background-color: transparent;
/* color: #061da4; */
/* text-align: center; */
/* opacity: 1; */
font-size: 17px;
line-height: 28px;
color: #b6b6b6;
font-family: "Qanto";
}
.hero-content{
text-align: center;
}
.slick-active .hero-content > :nth-child(1) {
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.slick-active .hero-content > :nth-child(2) {
-webkit-animation-delay: 0.5s;
animation-delay: 1s;
}
.slick-active .hero-content > :nth-child(3) {
-webkit-animation-delay: 0.5s;
animation-delay: 1.5s;
}
.slick-active .hero-content > * {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-duration: 1s;
animation-duration: 1s;
}
.hero-content {
text-align: center; }
.hero-content h1 {
font-size: 100px;
line-height: 90px;
font-weight: 300;
font-family: "Bauhaus 93";
color: #ffffff;
text-shadow: -6px 4px 1px #252525;
}
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
.hero-content h1 {
font-size: 90px; } }
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.hero-content h1 {
font-size: 80px;
line-height: 80px; } }
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero-content h1 {
font-size: 50px;
line-height: 50px; } }
@media only screen and (max-width: 767px) {
.hero-content h1 {
font-size: 36px;
line-height: 45px; } }
.hero-content h2 {
font-size: 100px;
line-height: 90px;
font-weight: 300;
font-family: "Bauhaus 93";
color: #ffffff;
text-shadow: -6px 4px 1px #252525; }
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
.hero-content h2 {
font-size: 90px; } }
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.hero-content h2 {
font-size: 80px;
line-height: 80px; } }
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero-content h2 {
font-size: 50px;
line-height: 50px; } }
@media only screen and (max-width: 767px) {
.hero-content h2 {
font-size: 36px;
line-height: 45px; } }
.slick-active .hero-content > :nth-child(3) {
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;
}
.hero-content .df-btn {
background-color: #ffffff;
font-size: 20px;
color: #151515;
border-radius: 50px;
margin-top: 30px;
line-height: 26px;
}
$('.hero-slider').slick({
infinite: true,
fade: true,
dots: false,
prevArrow: '<button class="slick-prev"><i class="icofont-long-arrow-left"></i>Pre</button>',
nextArrow: '<button class="slick-next">Next<i class="icofont-long-arrow-right"></i></button>',
responsive: [
{
breakpoint: 992,
settings: {
dots: false,
arrows: true,
}
},
]
});