Как создать подобный слайдер с помощью slicka, как менять дизайн срелочек?
$('.sl').slick({
dots: true,
infinite: true,
speed: 300,
fade: true,
cssEase: 'linear'
});
body{
font-family: sans-serif;
margin: 0;
padding: 0;
color: rgb(40, 40, 50);
}
header{
height: 11vh;
font-weight: 100;
}header :nth-child(1){
font-size: 30px;
margin-left: 5%;
}header :nth-child(2){
margin-left: 60%;
margin-top: -6%;
font-size: 33px;
}header :nth-child(2) img{
padding-right: 1%;
}
header a{
font-size: 18px !important;
color: Peru;
padding-bottom: 3px;
text-decoration: none;
border-bottom: 1px solid Peru;
}header :nth-child(3){
margin-left: 60%;
margin-top: -2%;
}
span{
font-weight: bold ;
}
#section0{
width: 100%;
height: 120vh;
position: relative;
background: url('bezimeni-27_E1v9oDX.png') no-repeat center/cover;
color: white;
background-attachment: fixed;
}#section0 div{
text-align: center;
font-size: 30px;
border: 2px solid white;
border-style: double; /* Стиль границы */
border-width: 4px;
padding: 40px 40px 80px 40px;
width: 40%;
margin-left: 27%;
position: relative;
top: 250px;
background: rgba(46, 46, 46, 0.8);
}#section0 div h1, #section0 div h3{
margin: 0px
}#section0 div h3{
font-size: 38px ;
}#section0 div a{
border: 2px solid white;
padding: 10px 16px;
font-size: 20px;
border-radius: 60px;
cursor: pointer;
color: white;
position: relative;
top: 30px;
}#section0 div a:hover{
background: black;
}
#section1{
margin-top: -4%;
text-align: center;
height: 100vh;
}#section1 .p{
padding-top: 5%;
font-size: 40px;
margin-bottom: 40px;
}#section1 .grid{
display: grid;
grid-template-columns: repeat(3,280px);
font-size: 20px ;
grid-gap: 20px 60px;
margin-left: 14%;
margin-top: 8%;
}#section1 .grid [alt='0']{
left: 0px;
bottom: 25px;
z-index: 1;
}#section1 .grid [alt='1']{
padding-top: 30%;
margin-top: -31%;
border-top: 3px solid Peru;
left: 0px;
bottom: 25px;
z-index: 1;
}#section1 .grid [alt='2']{
left: 0px;
bottom: 25px;
z-index: 1;
}
[alt='0']{
z-index: 0;
position: relative;
left: 262px;
bottom: 500px;
}[alt='1']{
z-index: 0;
position: relative;
left: 478px;
bottom: 500px;
}[alt='2']{
z-index: 0;
position: relative;
left: 686px;
bottom: 500px;
}
#section2{
background: silver;
height: 90vh;
}#section2 .p{
text-align: center;
padding-top: 7%;
font-size: 40px;
position: relative;
}
#section2 .p:before{
position:absolute;
top: 119%;
left: 47%;
width:5%;
border-bottom:3px solid Peru;
content:"";
}
.main{
max-width: 360px;
margin: auto;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="1.css">
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
</head>
<body>
<header>
<p><span class="span">DESIGN</span>STUDIO</p>
<p><img src="0.png" alt="">8 800 000-00-00</p>
<p><a href="#">Заказать звонок</a></p>
</header>
<section id="section0">
<div class="">
<h1>РАЗРАБОТКА</h1>
<h1>ФИРМЕННОГО СТИЛЯ:</h1>
<h3>от идеи до реализации</h3>
<a href="#">↓</a>
</div>
</section>
<section id="section1">
<p class="p">РАБОТАТЬ С НАМИ <span>ЛЕГКО И ПРИЯТНО</span></p>
<div class="grid">
<div class="div0">
<img src="https://media.lpgenerator.ru/images/245037/bezimeni-3_qwMWvjt.png#size_60x60" alt='0'>
<p><span>СОБЛЮДАЕМ СРОКИ</span></p>
<p>Разрабатываем лучшие
креативные идеи
и тщательно следим
за соблюдением сроков</p>
</div>
<div class="div1">
<img src="https://media.lpgenerator.ru/images/245037/bezimeni-2_O1bIEFo.png#size_56x60" alt='1'>
<p><span>ТАЛАНТЛИВЫЕ ДИЗАЙНЕРЫ</span></p>
<p>Высококвалифицированные
профессионалы, которые
мыслят ярко и нестандартно</p>
</div>
<div class="div2">
<img src="https://media.lpgenerator.ru/images/245037/bezimeni-1_OmiiQCk.png#size_60x52" alt='2'>
<p><span>ДОСТУПНАЯ ЦЕНА</span></p>
<p>Гибкая система расценок
позволяет сотрудничать как с крупными компаниями,
так и с частными лицами</p>
</div>
</div>
</section>
<img src="https://media.lpgenerator.ru/images/245037/bezimeni-7_UJJtw4y.png#size_126x126" alt="0" class="">
<img src="https://media.lpgenerator.ru/images/245037/bezimeni-5_ltDSD24.png#size_126x126" alt="1" class="">
<img src="https://media.lpgenerator.ru/images/245037/bezimeni-6_X9sbs1e.png#size_126x126" alt="2" class="">
<section id="section2">
<p class="p">НАШЕ <span>ПОРТФОЛИО</span></p>
<div class="main">
<div class="sl">
<div class="slide__slide">
<img src="https://media.lpgenerator.ru/images/245037/bezimeni-14_29JPQGq.png#size_355x355" alt="Картинка слайда 1" class="imgSlide__img">
</div>
<div class="slide__slide">
<img src="https://media.lpgenerator.ru/images/245037/bezimeni-15_gu3xAbi.png#size_355x355" alt="Картинка слайда 2" class="imgSlide__img">
</div>
<div class="slide__slide">
<img src="https://media.lpgenerator.ru/images/245037/bezimeni-12_2vWLtcK.png#size_355x355" alt="Картинка слайда 3" class="imgSlide__img">
</div>
<div class="slide__slide">
<img src="https://media.lpgenerator.ru/images/245037/bezimeni-13_qOo3I8l.png#size_355x355" alt="Картинка слайда 4" class="imgSlide__img">
</div>
</div></div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<script src="slick.js">
</script>
</body>
</html>
Объясните конкретно на моём примере плиз