Вопрос

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

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


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

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

  • 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'
  });
});

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


Ссылка на сообщение
Поделиться на других сайтах
  • 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 вынесены исключительно для удобства и улучшения читабельности кода.

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

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

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


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

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

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

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


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

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

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

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

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

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

Войти

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

Войти сейчас

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

    • Автор: mejta
      Приписал  body{
      background-image: url(img/fon.png)
      }
       Сразу фон есть ,  а после обновления изчезает.
      И так с любой картинкой
      Подробней в скриншотах
       
    • Автор: WebNewbe
      Здравствуйте. Я занимаюсь версткой сайтов: лендингов, интернет-магазинов, флаеров и тп. Ищу работу, для набора опыта и заработка первых денег на данной позиции.

       Мое портфолио:
      https://alex2033.github.io/sites/BlackDone/index.html
      https://alex2033.github.io/sites/Sandeo/index.html
      https://alex2033.github.io/sites/Barbershop/index.html
      https://alex2033.github.io/sites/Skylith/index.html
      https://alex2033.github.io/sites/Unicorn/index.html
      https://alex2033.github.io/sites/Bouncy/index.html
      Остальные работы вы можете посмотреть здесь:
      https://alex2033.github.io/
      Навыки:
      - Знание HTML5, CSS3
      - Опыт адаптивной, семантической, кроссбраузерной верстки
      - CSS3 анимация
      - знания Javascript на уровне jQuery
      - Использование препроцессоров LESS/SASS/Stylus + Pug
      - Опыт работы в Adobe Photoshop, Illustrator, Zeplin, Avocode
      - Именование классов по методологии БЭМ-нейминг
      - Gulp, npm, bower
      - Умение работать с сетками (bootstrap 3+, foundation, flexboxgrid)
      - Умение работать с фреймворками bootstrap 3, 4, foundation
      - Знание английского на уровне чтения документации
      - Навык работы с векторной графикой SVG
      - Умение использовать flexbox, css-grid там где это необходимо
      Форма связи:
      Email - XoxlofAlexandr@yandex.ru - преимущественно
      Skype - Xronaliz
      Также можете написать на этом сайте
      Благодарю за внимание и хорошего дня:)

Карта разработчиков

Карта участников

Отметь себя на карте для поиска или предложения работы