Показать сообщение отдельно
  #3 (permalink)  
Старый 28.06.2018, 14:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

slick-carousel init
Alessio18911,

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
        <style type="text/css">
         body {
    background: lightblue;
}

.wrapper {
    overflow: hidden;
}

.your-class {
    width: 1200px;
    padding: 0 50px;
    margin: 0 auto;
    overflow: hidden;
}

.slick-track {
    height: 300px;

}

.slick-slide {
    margin: 0 10px;
    font-size: 116px;
    font-weight: 700;
    background: white;
    text-align: center;
    line-height: 300px;
}

.slick-arrow {
    background: green;
    z-index: 100;
}

.slick-prev::before,
.slick-next::before {
    content: '';
}

.slick-prev {
    left: 0;
}

.slick-next {
    right: 0;
}
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="your-class">
              <div class="multiple-items">1</div>
              <div class="multiple-items">2</div>
              <div class="multiple-items">3</div>
               <div class="multiple-items">4</div>
               <div class="multiple-items">5</div>
               <div class="multiple-items">6</div>
            </div>
        </div>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
    <script>
$(function(){
    $('.your-class').slick({
          infinite: true,
          slidesToShow: 3,
          slidesToScroll: 3
    });
});

   </script>

    </body>
</html>
Ответить с цитированием