Плагины Slick Slider для Osclass

Тема в разделе "Osclass", создана пользователем lexioo, 17 окт 2018.

XEvil 4.0 Релиз Состоялся!
Модераторы: _kot
  1. lexioo

    lexioo Постоялец

    Регистр.:
    22 сен 2018
    Сообщения:
    62
    Симпатии:
    23
    Недавно делал Slick Slider на сайт, решил реализацию написать в отдельной теме, спасибо за помощь @Imapo. Мой пример это адаптивный автослайдер для премиум блока на главной странице.

    Сам сайт где можно взять slick а так же посмотреть его настройки
    http://kenwheeler.github.io/slick/
    https://github.com/kenwheeler/slick

    1. Качаем сам slick (во вложении) и распаковываем в корне сайта, там где oc-admin,oc-uncludes и тд.
    2. Открываем main.php в теме вашего сайта и вверху перед </head> прописываем:
    Если не грузит, то прописываем в head.php в корне темы в самый низ

    3. Запуск Slick осуществляется через скрипт, где обращаемся к классу, который выводит нужный нам контент в нашем случае назовем его .wrap-slider, ниже стандартный скрипт обращения в {} будем вводить настройки слайдера.

    4. Применяем Slick-Слайдер к премиум блоку на главной странице. Открываем main.php в теме сайта. Находим код вывода премиум блока:

    Меняем класс у блока <div class="wrap"> на <div class="wrap-slider"> и после последнего закрывающего </div> запускаем скрипт слайдера с нужными настройками обращенного к .wrap-slider:




    slidesToShow: 4, - показывает 4 слайда
    slidesToScroll: 1, - листает по 1 слайду
    autoplay: true, - автолистинг вкл
    autoplaySpeed: 2000, -скорость автолистинга
    responsive: [ { - доп настройки для адаптации слайдера под разное разрешение
    breakpoint: 1024, - применяет настройки при определенном разрешении у пользователя.


    5. Последняя настройка это добавление отступа для наших объявление по стандарту они 0px
    открываем slick.css в папке /slick в корне вашего сайте находим 78 строчку и
    добавляем padding: 0px 12px 0px 12px; или по вкусу. Кто захочет сделать отступы для картинок ниже в .slick-slide img прописывайте тоже самое.

     

    Вложения:

    • slick.zip
      Размер файла:
      39,2 КБ
      Просмотров:
      74
    Последнее редактирование: 20 окт 2018
    1nstep, Imapo и lado777 нравится это.
  2. lexioo

    lexioo Постоялец

    Регистр.:
    22 сен 2018
    Сообщения:
    62
    Симпатии:
    23
    Небольшая поправка куда установить ссылки из пункта 2.

    2. Открываем main.php в теме вашего сайта и вверху перед </head> прописываем:

    Так Slick не будет терять свои стили на других страницах, у меня были ошибки.
     
    maratismodest нравится это.
  3. maratismodest

    maratismodest Постоялец

    Регистр.:
    28 мар 2017
    Сообщения:
    95
    Симпатии:
    45
    Спасибо, все получилось! Но подскажите, пожалуйста, как сделать промежутки между премиумами, а то они у меня вплотную стоят
    https://innoads.ru
    И заранее еще раз спасибо за инструкцию - и правда смотрится очень круто!)
     
  4. lexioo

    lexioo Постоялец

    Регистр.:
    22 сен 2018
    Сообщения:
    62
    Симпатии:
    23
    5. Последняя настройка это добавление отступа для наших объявление по стандарту они 0px
    открываем slick.css в папке /slick в корне вашего сайте находим 78 строчку и
    добавляем padding: 0px 12px 0px 12px; или по вкусу. Кто захочет сделать отступы для картинок ниже в .slick-slide img прописывайте тоже самое.

    .slick-slide
    {
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
    padding: 0px 12px 0px 12px;
    }
     
    maratismodest нравится это.
  5. maratismodest

    maratismodest Постоялец

    Регистр.:
    28 мар 2017
    Сообщения:
    95
    Симпатии:
    45
    Оказалось, что так на макбуке показывает (видимо, из-за не стандартного разрешения), на остальных гаджетах все супер!
     
  6. maratismodest

    maratismodest Постоялец

    Регистр.:
    28 мар 2017
    Сообщения:
    95
    Симпатии:
    45
    правда, оказалось, что по pagespeed test плагин почему-то скорость резко ухудшает( для мобильной версии
     
  7. maratismodest

    maratismodest Постоялец

    Регистр.:
    28 мар 2017
    Сообщения:
    95
    Симпатии:
    45
    эх, красивый слайдер! но на мобильной версии pagespeed показывает низкий - 49 процентов
    без него - около 70
    ругается на
    …fonts/slick.woff
    что не может сделать предзагрузку этого шрифта

    Настройте предварительную загрузку ключевых запросов

    https://innoads.ru
     
  8. _kot

    _kot

    Moderator
    Регистр.:
    16 ноя 2018
    Сообщения:
    169
    Симпатии:
    200
    попробуй привязать путь к cdn
    https://cdnjs.com/libraries/slick-carousel

    конкретно
    https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/fonts/slick.woff
    или вобще удали линк(шрифт) и замени на стандартный шрифт из темы, в местах где указан этот шрифт
     
    sanya0317, lexioo и maratismodest нравится это.
  9. maratismodest

    maratismodest Постоялец

    Регистр.:
    28 мар 2017
    Сообщения:
    95
    Симпатии:
    45
    Плюс, чуть не по теме - в итоге slick slider не грузить скорость загрузки, скачал последний актуальный дистрибутив.
    но появилась (вернее, всегда была) проблема с вероникой в мобильной версии
    там страница становится чуть шире и ее можно влево-вправо дергать.
    и из-за этого, слайдер иногда перестает крутить.
    сможете у себя воспроизвести ошибку?
     
  10. radu05

    radu05 Создатель

    Регистр.:
    3 фев 2018
    Сообщения:
    37
    Симпатии:
    22
    Привет!
    Пожалуйста, вы можете дать более подробную информацию?
    Что именно и где добавить или удалить для оптимизации этого плагина?
    Заранее спасибо
     
    service240 нравится это.