Вопрос 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 · Просмотры: 101
Последнее редактирование:
Небольшая поправка куда установить ссылки из пункта 2.

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

Так Slick не будет терять свои стили на других страницах, у меня были ошибки.
 
Спасибо, все получилось! Но подскажите, пожалуйста, как сделать промежутки между премиумами, а то они у меня вплотную стоят
Для просмотра ссылки Войди или Зарегистрируйся
И заранее еще раз спасибо за инструкцию - и правда смотрится очень круто!)
 
Спасибо, все получилось! Но подскажите, пожалуйста, как сделать промежутки между премиумами, а то они у меня вплотную стоят
Для просмотра ссылки Войди или Зарегистрируйся
И заранее еще раз спасибо за инструкцию - и правда смотрится очень круто!)
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;
}
 
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;
}
Оказалось, что так на макбуке показывает (видимо, из-за не стандартного разрешения), на остальных гаджетах все супер!
 
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 плагин почему-то скорость резко ухудшает( для мобильной версии
 
эх, красивый слайдер! но на мобильной версии pagespeed показывает низкий - 49 процентов
без него - около 70
ругается на
…fonts/slick.woff
что не может сделать предзагрузку этого шрифта

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

Для просмотра ссылки Войди или Зарегистрируйся
 
эх, красивый слайдер! но на мобильной версии pagespeed показывает низкий - 49 процентов
без него - около 70
ругается на
…fonts/slick.woff
что не может сделать предзагрузку этого шрифта

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

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

конкретно
Для просмотра ссылки Войди или Зарегистрируйся
или вобще удали линк(шрифт) и замени на стандартный шрифт из темы, в местах где указан этот шрифт
 
Плюс, чуть не по теме - в итоге slick slider не грузить скорость загрузки, скачал последний актуальный дистрибутив.
но появилась (вернее, всегда была) проблема с вероникой в мобильной версии
там страница становится чуть шире и ее можно влево-вправо дергать.
и из-за этого, слайдер иногда перестает крутить.
сможете у себя воспроизвести ошибку?
 
попробуй привязать путь к cdn
Для просмотра ссылки Войди или Зарегистрируйся

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

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