Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.05.2018, 12:05
Аспирант
Отправить личное сообщение для Javany11 Посмотреть профиль Найти все сообщения от Javany11
 
Регистрация: 04.03.2018
Сообщений: 34

слайдер slick не могу подключить.
Добрый день. Подскажите пожалуйста, как использовать этот слайдер? Смотрел, читал, ничего не понял.
http://kenwheeler.github.io/slick/
Если не сложно, помогите примером самого простого из них.
Спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 30.05.2018, 12:08
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,209

А вы читали что там написано или просто картинки посмотрели?
Ответить с цитированием
  #3 (permalink)  
Старый 30.05.2018, 12:09
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

<html>
  <head>
  <title>My Now Amazing Webpage</title>
  <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
  <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
  </head>
  <body>

  <div class="your-class">
    <div>your content</div>
    <div>your content</div>
    <div>your content</div>
  </div>

  <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>

  <script type="text/javascript">
    $(document).ready(function(){
      $('.your-class').slick({
        setting-name: setting-value
      });
    });
  </script>

  </body>
</html>


там расписано все несколько раз
Ответить с цитированием
  #4 (permalink)  
Старый 30.05.2018, 12:10
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

пути только свои укажите
Ответить с цитированием
  #5 (permalink)  
Старый 30.05.2018, 12:10
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 2,952

Пример кода с указанного сайта:
<html>
  <head>
  <title>My Now Amazing Webpage</title>
  <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
  <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
  </head>
  <body>

  <div class="your-class">
    <div>your content</div>
    <div>your content</div>
    <div>your content</div>
  </div>

  <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>

  <script type="text/javascript">
    $(document).ready(function(){
      $('.your-class').slick({
        setting-name: setting-value
      });
    });
  </script>

  </body>
</html>
Ответить с цитированием
  #6 (permalink)  
Старый 30.05.2018, 13:21
Аспирант
Отправить личное сообщение для Javany11 Посмотреть профиль Найти все сообщения от Javany11
 
Регистрация: 04.03.2018
Сообщений: 34

Я это видел, и читал. Ну и на том спасибо. Разобрался практически со всем. Только вот не совсем понятно, стили подключенные тегом <style type="text/css"> в <head>, к каким элементам по классу обращаются? К библиотеке? У меня нет в html таких классов.

<!DOCTYPE html>
<html>
<head>
  <title>Slick Playground</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="slick/slick.css">
  <link rel="stylesheet" type="text/css" href="slick/slick-theme.css">
  <style type="text/css">
    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="vertical-center-4 slider">
    <div>
      <img src="http://placehold.it/350x100?text=1">
    </div>
    <div>
      <img src="http://placehold.it/350x100?text=2">
    </div>
    <div>
      <img src="http://placehold.it/350x100?text=3">
    </div>
    <div>
      <img src="http://placehold.it/350x100?text=4">
    </div>
    <div>
      <img src="http://placehold.it/350x100?text=5">
    </div>
    <div>
      <img src="http://placehold.it/350x100?text=6">
    </div>
    <div>
      <img src="http://placehold.it/350x100?text=7">
    </div>
    <div>
      <img src="http://placehold.it/350x100?text=8">
    </div>
    <div>
      <img src="http://placehold.it/350x100?text=9">
    </div>
    <div>
      <img src="http://placehold.it/350x100?text=10">
    </div>
  </section>


    


  <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
  <script src="./slick/slick.min.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">

    $(document).on('ready', function() {
      $(".vertical-center-4").slick({
  centerMode: true,
  centerPadding: '60px',
  slidesToShow: 3,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 3
      }
    },
    {
      breakpoint: 480,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 1
      }
    }
  ]
      });
    });
</script>

</body>
</html>
Ответить с цитированием
  #7 (permalink)  
Старый 30.05.2018, 13:25
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Javany11,
Библиотека сама создает элементы и присваивает им классы, и чтобы это все корректно отображалось подключатся CSS.
Ответить с цитированием
  #8 (permalink)  
Старый 30.05.2018, 13:26
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,209

Javany11,
Ну раз стили не нужны, то убери их.
Ответить с цитированием
  #9 (permalink)  
Старый 30.05.2018, 13:48
Аспирант
Отправить личное сообщение для Javany11 Посмотреть профиль Найти все сообщения от Javany11
 
Регистрация: 04.03.2018
Сообщений: 34

Сообщение от Rise Посмотреть сообщение
Javany11,
Ну раз стили не нужны, то убери их.
Не припомню чтобы писал что они не нужны... Или я не прав?
Ответить с цитированием
  #10 (permalink)  
Старый 30.05.2018, 13:52
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 2,952

Javany11, css-файл библиотеки нужен, без него она, вероятно, корректно работать не будет.
В процессе инициализации слайдера необходимые элементы будут созданы "автоматически", их-то и описывает css-файл.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не могу подключить скрипт — где ошибка? gadertes Общие вопросы Javascript 10 14.03.2018 16:08
Не могу подключить Slick Slider на сайт Joomla yakor-dd Элементы интерфейса 10 22.05.2017 20:23
help Не могу понять как реализовать такой слайдер ElecricWizard Общие вопросы Javascript 6 11.05.2015 15:41
Помочь подключить слайдер illusion4000 Javascript под браузер 6 18.01.2015 02:14
Неполучается подключить слайдер в DLE 10.0 Элен Ваши сайты и скрипты 0 06.12.2013 18:24