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

[lexioo]

Недавно делал 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;
}

 

[lexioo]

Небольшая поправка куда установить ссылки из пункта 2.

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

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

 

[maratismodest]

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

 

[lexioo]

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

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. Последняя настройка это добавление отступа для наших объявление по стандарту они 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. Последняя настройка это добавление отступа для наших объявление по стандарту они 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]

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

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

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

 

[_kot]

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

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

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

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

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

 

[maratismodest]

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

 

[radu05]

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

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

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