0

Как создать подобный слайдер с помощью 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/slick-carousel@1.8.1/slick/slick.min.js"></script>
 <script src="slick.js">

 </script>
  </body>
</html>

Объясните конкретно на моём примере плиз

1
  • 1
    я же ответил в комментарии тебе , что там не ясно ? 15 авг 2019 в 7:05

1 ответ 1

2

Посмотрите на мой пример, таким образом вы можете оформить кнопки Prev\Next как вам угодно. Так же рекомендую все таки более детально ознакомиться с документацией slick

$('.slider').slick({
  arrows: false
})

$('.left').click(function() {
  $('.slider').slick("slickPrev");
})

$('.right').click(function() {
  $('.slider').slick("slickNext");
})
.slider {
  width: 300px;
  margin: 0 auto;
}
<link href="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<div class="slider">
  <div>
    <img src="http://placehold.it/250x250" alt="" />
  </div>
  <div>
    <img src="http://placehold.it/250x250" alt="" />
  </div>
  <div>
    <img src="http://placehold.it/250x250" alt="" />
  </div>
</div>

<p class="left">left</p>
<p class="right">right</p>

2
  • 2
    до чувака не доходит я ему в прошлом его вопросе дополнил комментарем вот это : codepen.io/topicstarter/pen/pozyPoW 15 авг 2019 в 7:16
  • 3
    @MaximLensky да увидел коммент выше и пробежался по истории ^_^ Думаю всё очень плохо... :-(
    – Nilsan
    15 авг 2019 в 7:18

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.