Вопрос Slick Slider для Osclass

lexioo

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

Сам сайт где можно взять slick а так же посмотреть его настройки
Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или Зарегистрируйся

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

<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="slick/slick.min.js"></script>

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

<script> $('.your-class').slick({
});
</script>

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

<!-- Extra Premiums Block -->
<div class="home-container hc-premiums">
<div class="inner">
<div id="latest" class="white prem">
<h2 class="home">
<?php _e('Premium listings', 'veronika'); ?>
</h2>

<div class="block">
<div class="wrap">
//...

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


...//

<?php //View::newInstance()->_erase('items') ; ?>
</div>
</div>
</div>
<script> $('.wrap-slider').slick({
slidesToShow: 4,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
responsive: [ {
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});</script>



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-slide
{
display: none;
float: left;

height: 100%;
min-height: 1px;
padding: 0px 12px 0px 12px;
}
 

Вложения

  • slick.zip
    39,2 KB · Просмотры: 86
Последнее редактирование:

lexioo

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

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

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

maratismodest

Постоялец
Регистрация
28 Мар 2017
Сообщения
99
Реакции
45
Спасибо, все получилось! Но подскажите, пожалуйста, как сделать промежутки между премиумами, а то они у меня вплотную стоят
Для просмотра ссылки Войди или Зарегистрируйся
И заранее еще раз спасибо за инструкцию - и правда смотрится очень круто!)
 

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

Постоялец
Регистрация
28 Мар 2017
Сообщения
99
Реакции
45
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

Постоялец
Регистрация
28 Мар 2017
Сообщения
99
Реакции
45
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;
}
правда, оказалось, что по pagespeed test плагин почему-то скорость резко ухудшает( для мобильной версии
 

maratismodest

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

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

Для просмотра ссылки Войди или Зарегистрируйся
 

_kot

BEng
Команда форума
Модератор
Регистрация
16 Ноя 2018
Сообщения
197
Реакции
237
эх, красивый слайдер! но на мобильной версии pagespeed показывает низкий - 49 процентов
без него - около 70
ругается на
…fonts/slick.woff
что не может сделать предзагрузку этого шрифта

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

Для просмотра ссылки Войди или Зарегистрируйся
попробуй привязать путь к cdn
Для просмотра ссылки Войди или Зарегистрируйся

конкретно
Для просмотра ссылки Войди или Зарегистрируйся
или вобще удали линк(шрифт) и замени на стандартный шрифт из темы, в местах где указан этот шрифт
 

maratismodest

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

radu05

Создатель
Регистрация
3 Фев 2018
Сообщения
43
Реакции
24
попробуй привязать путь к cdn
Для просмотра ссылки Войди или Зарегистрируйся

конкретно
Для просмотра ссылки Войди или Зарегистрируйся
или вобще удали линк(шрифт) и замени на стандартный шрифт из темы, в местах где указан этот шрифт

Привет!
Пожалуйста, вы можете дать более подробную информацию?
Что именно и где добавить или удалить для оптимизации этого плагина?
Заранее спасибо
 
Сверху