<div class="slider">
<div class="slide">
<div class="slide-container">
<div class="slide-text">
<h3>Только ночь, только хардкор</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque similique sint pariatur sequi, id, earum debitis unde iusto perferendis quisquam ab error sunt doloribus numquam quibusdam! Fuga quo, quos maiores eum possimus corporis repellat dicta, natus ipsa nam delectus dolorem cumque repudiandae magnam atque mollitia dolores id eaque, reiciendis soluta enim! Quasi magni dicta sed officiis placeat neque quidem dolorem a illo?</p>
<a href="#" class="slide-btn">Узнать больше</a>
</div>
<div class="slide-image" style="background-image: url(https://www.androidcentral.com/sites/androidcentral.com/files/topic_images/2015/cheap-tablets.png);"></div>
</div>
</div>
<div class="slide">
<div class="slide-container">
<div class="slide-text">
<h3>Только ночь, только хардкор</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque similique sint pariatur sequi, id, earum debitis unde iusto perferendis quisquam ab error sunt doloribus numquam quibusdam! Fuga quo, quos maiores eum possimus corporis repellat dicta, natus ipsa nam delectus dolorem cumque repudiandae magnam atque mollitia dolores id eaque, reiciendis soluta enim! Quasi magni dicta sed officiis placeat neque quidem dolorem a illo?</p>
<a href="#" class="slide-btn">Узнать больше</a>
</div>
<div class="slide-image" style="background-image: url(https://mbtskoudsalg.com/images/hp-laptop-png-4.png);"></div>
</div>
</div>
<div class="slide">
<div class="slide-container">
<div class="slide-text">
<h3>Только ночь, только хардкор</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque similique sint pariatur sequi, id, earum debitis unde iusto perferendis quisquam ab error sunt doloribus numquam quibusdam! Fuga quo, quos maiores eum possimus corporis repellat dicta, natus ipsa nam delectus dolorem cumque repudiandae magnam atque mollitia dolores id eaque, reiciendis soluta enim! Quasi magni dicta sed officiis placeat neque quidem dolorem a illo?</p>
<a href="#" class="slide-btn">Узнать больше</a>
</div>
<div class="slide-image" style="background-image: url(https://www.androidcentral.com/sites/androidcentral.com/files/topic_images/2015/cheap-tablets.png);"></div>
</div>
</div>
</div>
body {
font-family: sans-serif;
}
.slide {
display: block;
position: relative;
}
.slide-container {
background-color: #eee;
height: 100vh;
max-height: 700px;
display: flex;
flex-direction: row;
align-items: center;
}
.slide-text {
padding: 40px;
width: 40%;
flex-shrink: 0;
}
.slide-text h3 {
text-transform: uppercase;
font-size: 30px;
}
.slide-text p {
font-size: 14px;
padding: 10px 0;
margin-bottom: 10px;
line-height: 1.5;
}
.slide-btn {
display: inline-block;
padding: 20px 45px;
background-color: #fb565a;
text-decoration: none;
color: #FFF;
text-transform: uppercase;
}
.slide-image {
background-size: cover;
background-repeat: no-repeat;
background-position: center ;
height: 100%;
width: 100%;
}
.slick-dots {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 40px;
}
.slick-dots li {
display: inline-block;
}
.slick-dots li button {
display: inline-block;
margin: 0 5px;
border: 1px solid #FFF;
background-color: #fff;
color: #FFF;
border-radius: 50%;
outline: none;
cursor: pointer;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
}
.slick-dots li.slick-active button {
background-color: #fb565a;
color: #fb565a;
}
@media screen and (max-width: 640px) {
.slide-text {
width: 100%;
}
.slide-image {
display: none;
}
}
$(document).ready(function() {
$(".slider").slick({
dots: true,
arrows: false,
autoplay: true,
speed: 300,
slidesToShow: 1,
});
});
