Привет, помогите решить баг со slick-слайдером: на первом слайдере у меня есть изображение, блок с текстом и под блоком с текстом - две кнопки. Когда у меня только один слайдер, все отображается, а когда я добавил второй слайдер, по непонятным мне причинам изображение с первого слайдера слетело, кнопки тоже, причем на втором слайдере тоже - там у меня скопированный блок с текстом и две кнопки (по макету так надо :D).
HTML код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lucid</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
<header class="header">
<div class="logo">
<h1 class="header__text">Lucid</h1>
<span class="header__text">Onepage theme</span>
</div>
<div class="menu" id="menu">
<ol class="list">
<li class="menu__link"><a href="">Home</a></li>
<li class="menu__link"><a href="">Features</a></li>
<li class="menu__link"><a href="">About</a></li>
<li class="menu__link"><a href="">Testimonials</a></a></li>
<li class="menu__link"><a href="">Pricing</a></li>
<li class="menu_link"><a href="">Contact</a></li>
</ol>
</div>
</header>
<div class="slider">
<!-- slider #1 -->
<div class="slider__item slider__introducing">
<div class="slider__introducing_text">
<span class="slider__introducing_span"> introducing lucid theme</span>
<h2 class="slider__introducing_h2">Carefully crafted and beautiful landing page.</h2>
<p class="slider__introducing_p">ullamcorper et turpis eget hendrerit. Praesent varius risus mi, at
elementum magna ultricies accumsan. Cras venenatis lacus sed dolor placerat tempus. Morbi
blandit at
neque ut imperdiet.</p>
</div>
<button class="slider__button slider__button_blue">
<p>download now</p>
</button>
<button class="slider__button slider__button_gray">
<p>view features</p>
</button>
<img data-lazy="img/devices.png" alt="devices" class="slider__img">
</div>
<!-- slider #2 -->
<div class="slider__item slider__introducing">
<div class="slider__introducing_text">
<span class="slider__introducing_span"> introducing lucid theme</span> -->
<h2 class="slider__introducing_h2">Carefully crafted and beautiful landing page.</h2>
<p class="slider__introducing_p">ullamcorper et turpis eget hendrerit. Praesent varius risus
mi,
at
elementum magna ultricies accumsan. Cras venenatis lacus sed dolor placerat tempus. Morbi
blandit at
neque ut imperdiet.</p>
</div>
<button class="slider__button slider__button_blue">
<p>download now</p>
</button>
<button class="slider__button slider__button_gray">
<p>view features</p>
</button>
</div>
</div>
<footer class="footer"></footer>
</div>
<!-- <script type="text/javascript">
$(document).ready(function () {
$("#menu").on("click", "a", function (event) {
event.preventDefault();
var id = $(this).attr('href'),
top = $(id).offset().top;
$('body,html').animate({ scrollTop: top }, 1500);
});
});
</script> -->
<script src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous">
</script>
<script src="js/script.js"></script>
<script src="js/slick.min.js"></script>
</body>
</html>
CSS код:
@import "reset-min.scss";
// !Fonts
@font-face {
font-family: quicksand-bold;
src: url(#src/fonts/quicksand-bold.ttf);
}
@font-face {
font-family: quicksand-bold;
src: url(#src/fonts/sourcesanspro-regular.ttf);
}
@font-face {
font-family: sourcesanspro semibold;
src: url(#src/fonts/source_sans_pro/sourcesanspro-semibold.ttf);
}
// !SCSS Stuff
$up: uppercase;
$maxWidth: 1440;
@mixin adaptiv-font($pcSize, $mobSize) {
$addSize: $pcSize - $mobSize;
$maxWidth: $maxWidth - 320;
font-size: calc(#{$mobSize + px} + #{$addSize} * ((100vw - 320px) / #{$maxWidth}));
}
// !Global
a {
color: white;
font-family: "sourcesanspro-semibold", sans-serif;
@include adaptiv-font(16, 8);
text-decoration: none;
}
a:active {
border-bottom: 1px solid #008ed6;
}
body {
li {
list-style-type: none; /* Убираем маркеры */
}
}
.wrapper {
overflow: hidden;
max-width: 100%;
}
// !Header
.header {
background-color: #15141a;
position: absolute;
z-index: 2;
min-width: 1440px;
height: 1000px;
top: 0;
background-image: url("../img/slider__bg.png");
background-repeat: no-repeat;
background-position: top;
.logo {
margin: 42px 0 0 137px;
display: flex;
max-width: 120px;
h1 {
font-family: "Quicksandbold", sans-serif;
text-transform: $up;
color: white;
@include adaptiv-font(24, 16);
}
span {
text-transform: $up;
font-family: "sourcesansproregular", sans-serif;
color: #515154;
@include adaptiv-font(9, 5);
width: 18px;
margin: 3px 0 0 8px;
}
}
.menu {
margin: 43px 136px 0 860px;
position: absolute;
top: 0;
.list {
display: flex;
.menu__link {
margin: 0 24px 0 0;
}
// .menu_link {
// margin: 0 135px 0 0;
// }
}
}
}
// slider blocks
//slider #1
.slider__introducing {
height: 255px;
margin: 162px 826px 223px 136px;
.slider__introducing_text {
width: 500px;
.slider__introducing_span {
color: #008ed6;
font-family: "Source Sans Pro";
font-size: 14px;
font-weight: 700;
letter-spacing: 1.4px;
line-height: 48px;
text-transform: uppercase;
}
.slider__introducing_h2 {
color: #ffffff;
font-family: "Source Sans Pro Semibold";
font-size: 48px;
font-weight: 600;
line-height: 65px;
}
.slider__introducing_p {
color: #999999;
font-family: "Source Sans Pro";
font-size: 18px;
font-weight: 400;
}
}
.slider__img {
margin: 121px 117px 0 813px;
// width: 510px;
// height: 621px;
position: absolute;
top: 0;
left: 0;
}
}
.slider__button_gray {
width: 160px;
height: 50px;
border: 1px solid rgba(255, 255, 255, 0.2);
background-color: transparent;
margin: 480px 965px 110px 315px;
position: absolute;
top: 0;
left: 0;
color: #ffffff;
font-family: "Source Sans Pro";
font-size: 14px;
font-weight: 700;
line-height: 48px;
text-transform: uppercase;
}
.slider__button_blue {
width: 160px;
height: 50px;
box-shadow: 0 0 3px rgba(3, 3, 3, 0.1);
background-color: #008ed6;
margin: 480px 1145px 110px 135px;
position: absolute;
top: 0;
left: 0;
color: #ffffff;
font-family: "Source Sans Pro";
font-size: 14px;
font-weight: 700;
line-height: 48px;
text-transform: uppercase;
padding: 0px 0px 2px 0px;
}
// !slider settings
.slider {
position: absolute;
z-index: 3;
// padding: 0 60px;
/* Стрелка влево */
.slick-arrow.slick-prev{
left: 0;
background: url("../img/sl-arrow_l.svg") 0 0 / 100% no-repeat;
}
/* Стрелка вправо */
.slick-arrow.slick-next{
right: 0;
background: url("../img/sl-arrow_r.svg") 0 0 / 100% no-repeat;
}
/* Стрелка */
.slick-arrow{
position: absolute;
top: 50%;
z-index: 10;
font-size: 0;
width: 30px;
height: 50px;
margin: -30px 0 0 0;
}
/* Точки (булиты) */
.slick-dots{
display: flex;
align-items: center;
justify-content: center;
margin: 0 10px;
}
.slick-dots li{
list-style: none;
}
/* Активная точка */
.slick-dots li.slick-active{
background-color: transparent;
border: 1px solid #fff;
}
/* Элемент точки */
.slick-dots button{
font-size: 0;
width: 10px !important;
height: 10px;
background-color: #fff;
border-radius: 50%;
}
}
/* Слайдер */
.slick-slider{
position: relative;
}
/* Ограничивающая оболочка */
.slick-list {
overflow: hidden;
}
/* Лента слайдов */
.slick-track{
display: flex;
align-items: flex-start;
}
Файл script.js:
$(document).ready(function () {
$('.slider').slick({
arrows: true,
dots: true
});
