Вопрос

Мне нужно помощь по установке данного слайдера: http://kenwheeler.github.io/slick/
Я сделал всё как в инструкции по установке, но он всё-равно не работает. Можете показать код со всеми картинками в слайдере, чтоб я мог распознать свою ошибку?

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

9 ответов на этот вопрос

Рекомендуемые сообщения

  • 0

Вы сперва свой код приложите. Чтобы мы указали вам на ошибку. 

Все примеры и инструкции на сайте слайдера есть.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

Доброго времени.

Slick - отличный слайдер с кучей настроек, только успевай подставлять значения. Да, конечно нужно немного поразбираться, даже что-то 
перевести для того, чтобы понять смысл параметров.

Так как сам разбирался с ним, то выкладываю небольшой код:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
      <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css"/>
</head>
<body>
    
<div class="slider">
  <div class="item"><img src="img1.jpg" alt=""></div>
  <div class="item"><img src="img2.jpg" alt=""></div>
  <div class="item"><img src="img3.jpg" alt=""></div>
</div>    

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>  
<script src="my.js"></script>
</body>
</html>


В "my.js" задаёте параметры работы слайдера:


$(document).ready(function(){
  $('.slider').slick({
  dots: true,
  infinite: true,
  speed: 500,
  fade: true,
  cssEase: 'linear'
  });
});

  • Like 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
17 часов назад, palindrom сказал:

Доброго времени.

Slick - отличный слайдер с кучей настроек, только успевай подставлять значения. Да, конечно нужно немного поразбираться, даже что-то 
перевести для того, чтобы понять смысл параметров.

Так как сам разбирался с ним, то выкладываю небольшой код:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
      <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css"/>
</head>
<body>
    
<div class="slider">
  <div class="item"><img src="img1.jpg" alt=""></div>
  <div class="item"><img src="img2.jpg" alt=""></div>
  <div class="item"><img src="img3.jpg" alt=""></div>
</div>    

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>  
<script src="my.js"></script>
</body>
</html>


В "my.js" задаёте параметры работы слайдера:


$(document).ready(function(){
  $('.slider').slick({
  dots: true,
  infinite: true,
  speed: 500,
  fade: true,
  cssEase: 'linear'
  });
});

У меня нет "my.js". У меня времени нет на расмотр JQuery, поэтому всё и стало ля меня сложным.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
18 часов назад, npofopr сказал:

Вы сперва свой код приложите. Чтобы мы указали вам на ошибку. 

Все примеры и инструкции на сайте слайдера есть.

Вот мой код сайта. Уже несколько сайтов со сборкой пересмотрел:

<html>
  <head>
  <title>My New Amazing Webpage</title>
  
  <link rel="stylesheet" type="text/css" href="путь от корня вашего сайта/slick/slick.css"/>
  <link rel="stylesheet" type="text/css" href="путь от корня вашего сайта/slick/slick-theme.css"/>
  <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.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>
 
  <style type="text/css">

  </style>
  </head>
  <body>

    <script type="text/javascript">
  $(document).ready(function(){
  $('.slider').slick({
  dots: true,
  infinite: true,
  speed: 500,
  fade: true,
  cssEase: 'linear'
  });
  });
  </script>

  <div class="single-slide">
    <div><img src="0AYa_cFFzy4.jpg" alt=""></div>
    <div><img src="1920x1110_814894_[www.ArtFile.ru].jpg" alt=""></div>
    <div><img src="4fbf812509b602260b00001b.jpg" alt=""></div>
  </div>
  </body>
</html>

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

в my.js находятся параметры слайдера, читайте внимательнее

$(document).ready(function(){
  $('.slider').slick({
  dots: true,
  infinite: true,
  speed: 500,
  fade: true,
  cssEase: 'linear'
  });
});

живой пример 

http://codepen.io/Radioactive/pen/JWdNmK

 

14 минуты назад, ErUnDAK сказал:

Вот мой код сайта. Уже несколько сайтов со сборкой пересмотрел:


<html>
  <head>
  <title>My New Amazing Webpage</title>
  
  <link rel="stylesheet" type="text/css" href="путь от корня вашего сайта/slick/slick.css"/>
  <link rel="stylesheet" type="text/css" href="путь от корня вашего сайта/slick/slick-theme.css"/>
  <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.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>
 
  <style type="text/css">

  </style>
  </head>
  <body>

    <script type="text/javascript">
  $(document).ready(function(){
  $('.slider').slick({
  dots: true,
  infinite: true,
  speed: 500,
  fade: true,
  cssEase: 'linear'
  });
  });
  </script>

  <div class="single-slide">
    <div><img src="0AYa_cFFzy4.jpg" alt=""></div>
    <div><img src="1920x1110_814894_[www.ArtFile.ru].jpg" alt=""></div>
    <div><img src="4fbf812509b602260b00001b.jpg" alt=""></div>
  </div>
  </body>
</html>

 

http://codepen.io/Radioactive/pen/KWpmYY

 

Изменено пользователем radioactive

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
19 минут назад, radioactive сказал:

в my.js находятся параметры слайдера, читайте внимательнее


$(document).ready(function(){
  $('.slider').slick({
  dots: true,
  infinite: true,
  speed: 500,
  fade: true,
  cssEase: 'linear'
  });
});

живой пример 

http://codepen.io/Radioactive/pen/JWdNmK

 

http://codepen.io/Radioactive/pen/KWpmYY

 

У меня в этом коде картинки друг на друга почему-то ложаться. И повторюсь: у меня нет my.js. Мне его самому создавать что ли?

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

Настройки в my.js вынесены исключительно для удобства и улучшения читабельности кода.

Советую также обратить внимание на порядок расположения библиотек и вашего скрипта.

Также отслеживайте в консоли ошибки и предупреждения! Обратите внимание на то, что все ли стили, скрипты, библиотеки корректно подгружаются?
 

  • Like 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

У меня слайды замедляются при пролистывании.

Подскажите как это пофиксить чтоб он уходил с такой же скоростью как был

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас


  • Похожие публикации

    • Автор: Андрей39
      Всем привет!
      Подскажите пожалуйста новичку, что за иконки на этом сайте. Пытаюсь скопировать её через исходный код, но выдает вот такой фрагмент кода:
      .fa-search:before { content: "\f002"; } Скриншот картинки, прикрепил. Буду рад, если Вы мне поможете. Спасибо!


    • Автор: Odinokiy_volk
      Сайт https://knyaz85.github.io/
      Сайт тестовый, для критики.. Идея - аналог страницы в соцсети в основном для размещения медиа-контента и документов
      Прошу оценить всё в целом - дизайн, верстку, код, юзабилити, общее впечатление и др.
      Примечания. Сайт делался под гугл хром, в мозилле другой медиаплеер и почему то по другому выглядит тень от белого фона - получается не очень красиво.. В эксплоурере вообще черт знает что получилось, прошу также хотя бы в общих чертах просвятить как адаптировать сайт к интернет эксплоурер..
      Медиа загружается через гугл очень долго, через мозиллу почему то быстрее.. Если кто знает почему, так же прошу просвятить)