响应式游戏网站之首页轮播图制作

下面上首页轮播图部分代码，先看效果图：

下面上代码：

 <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,
            }
        },
    ]
});