Slick Slider works, but it's kinda weird, can you help?

J

JyriG2017-11-13 19:49:55

css

JyriG, 2017-11-13 19:49:55

Hi everyone!) I've been learning Front End for two months, and now I'm making my first business card site. Everything went like clockwork, but after connecting the slider, something incomprehensible happened. Namely:
Here is the HTML code;

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Домашка</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Домашнее задание">
  <meta name="keywords" content="Домашка, задание, верстка">

  <!-- Bootstrap connecting -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">	

  <!-- Styles -->
  <link rel="stylesheet" href="css/jquery.arcticmodal-0.3.css">
  <link rel="stylesheet" href="css/simple.css">
  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.8.0/slick.css"/>
  <link rel="stylesheet" href="css/main.css">
  <link rel="stylesheet" href="css/media.css">
</head> 			
  ...
 ....
                         <div class="rewiews__heading">
        Отзывы наших клиентов
      </div>
      <div class="row rewiews__js-carousel">
        <div class="rewiews__row rewiews__js-carousel__oneslide col-xl-12">
                                         <!-- Контент-->
        </div>
    <div class="rewiews__row rewiews__js-carousel__oneslide col-xl-12">
                                         <!-- Контент-->
        </div>
    <div class="rewiews__row rewiews__js-carousel__oneslide col-xl-12">
                                         <!-- Контент-->
        </div>
....
....
<script src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/slick.min.js"></script>
<script src="js/jquery.arcticmodal-0.3.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>

А вот Javascript Код:
$(function(){
  $('.first__phone_number').click(function() {
    	$('exampleModal').arcticmodal();
    })
});
$(document).ready(function(){
  $('.rewiews__js-carousel').slick({});
});

Please, tell me what I did wrong, how I blundered with the code. I would be extremely grateful :)

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

A

Anatoly, 2017-11-13
@JyriG

Forgot to include CSS
Immediately CDN then I'll throw it off :)

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.css">
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.min.css">