0

Недавно скачал slider-master. При переносе кода slider не работает. Подскажите, пожалуйста, в чем проблема?

$(document).on('ready', function() {
  $(".regular").slick({
    dots: true,
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 3
  });
});
html,
body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

.slider {
  width: 50%;
  margin: 100px auto;
}

.slick-slide {
  margin: 0px 20px;
}

.slick-slide img {
  width: 100%;
}

.slick-prev:before,
.slick-next:before {
  color: black;
}

.slick-slide {
  transition: all ease-in-out .3s;
  opacity: .2;
}

.slick-active {
  opacity: .5;
}

.slick-current {
  opacity: 1;
}
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>

<section class="regular slider">
  <div>
    <img src="http://placehold.it/350x300?text=1">
  </div>
  <div>
    <img src="http://placehold.it/350x300?text=2">
  </div>
  <div>
    <img src="http://placehold.it/350x300?text=3">
  </div>
  <div>
    <img src="http://placehold.it/350x300?text=4">
  </div>
  <div>
    <img src="http://placehold.it/350x300?text=5">
  </div>
  <div>
    <img src="http://placehold.it/350x300?text=6">
  </div>
</section>

1
  • А как он хоть себя ведет после подключения? Мы догадываться должны?
    – DaemonHK
    20 мар 2018 в 4:50

1 ответ 1

5

Просто пути указывают не туда. Подставил в ваш код ссылки из CDN, всё работает. https://cdnjs.com/libraries/slick-carousel

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css">
      <style>
        html, body {
        margin: 0;
        padding: 0;
        }

        * {
        box-sizing: border-box;
        }

        .slider {
        width: 50%;
        margin: 100px auto;
        }

        .slick-slide {
        margin: 0px 20px;
        }

        .slick-slide img {
        width: 100%;
        }

        .slick-prev:before,
        .slick-next:before {
        color: black;
        }


        .slick-slide {
        transition: all ease-in-out .3s;
        opacity: .2;
        }

        .slick-active {
        opacity: .5;
        }

        .slick-current {
        opacity: 1;
        }
      </style>
   </head>
   <body>
       <section class="regular slider">
        <div>
          <img src="http://placehold.it/350x300?text=1">
        </div>
        <div>
          <img src="http://placehold.it/350x300?text=2">
        </div>
        <div>
          <img src="http://placehold.it/350x300?text=3">
        </div>
        <div>
          <img src="http://placehold.it/350x300?text=4">
        </div>
        <div>
          <img src="http://placehold.it/350x300?text=5">
        </div>
        <div>
          <img src="http://placehold.it/350x300?text=6">
        </div>
      </section>
      <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
      <script>
        $(document).on('ready', function() {
          $(".regular").slick({
            dots: true,
            infinite: true,
            slidesToShow: 3,
            slidesToScroll: 3
          });
        });
       </script>
   </body>
</html>

Кстати type="text/css" и type="text/javascript" в html5 указывать не нужно.

Ваш ответ

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

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