@ashfedor

Какой слайдер стоит в товарах Opencart и woocommerce?

Пишу шаблон wordpress для каталога, хочу на страницу товара поставить слайдер типа того, что стоит в woocommerce и на Opencart встречал.
Вот пример на этой странице демо сайта
https://showcase.octemplates.net/apple-ru-3/iphone...
Там интересный эффект, когда наводишь мышку на фото товара, можно посмотреть увеличенную версию прямо в окне слайда.
По коду вижу, что это слик-слайдер, но у них на сайте не нашел похожего.
Где взять код этого слайдера?
  • Вопрос задан
  • 58 просмотров
Решения вопроса 1
@xamin
На демо-сайте, который вы предоставили, используется слайдер, построенный с использованием библиотеки Slick Carousel (Slick Slider). Это популярная библиотека для создания красивых и адаптивных слайдеров на веб-сайтах. Вы можете легко добавить подобный слайдер на свой сайт WordPress.

Чтобы взять код для создания подобного слайдера, вам потребуется следующее:

1. Установите и активируйте плагин Slick Carousel для WordPress. Вы можете найти его в официальном репозитории WordPress или установить его через административный интерфейс вашего сайта.

2. Создайте или отредактируйте страницу, на которой вы хотите разместить слайдер.

3. Вставьте следующий код в текстовый редактор страницы, чтобы создать базовую структуру слайдера:

<div class="slider">
  <div><img src="ссылка-на-изображение-1.jpg" alt="Изображение 1"></div>
  <div><img src="ссылка-на-изображение-2.jpg" alt="Изображение 2"></div>
  <!-- Добавьте больше изображений по аналогии -->
</div>


4. Включите и настройте плагин Slick Carousel, добавив следующий JavaScript-код в файле functions.php вашей темы WordPress:

function custom_slick_slider() {
    wp_enqueue_style('slick-css', 'https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css');
    wp_enqueue_script('slick-js', 'https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js', array('jquery'), null, true);

    wp_enqueue_script('custom-slick-slider', get_template_directory_uri() . '/js/custom-slick-slider.js', array('jquery', 'slick-js'), null, true);
}
add_action('wp_enqueue_scripts', 'custom_slick_slider');


5. Создайте файл `custom-slick-slider.js` в папке вашей темы WordPress и добавьте следующий код для настройки слайдера:

jQuery(document).ready(function($) {
    $('.slider').slick({
        // Настройки слайдера
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: true,
        autoplay: true,
        autoplaySpeed: 3000,
        responsive: [
            {
                breakpoint: 768,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 2
                }
            },
            // Добавьте другие настройки для разных экранов
        ]
    });
});


6. Сохраните файлы и обновите страницу, на которой вы разместили слайдер. Вам потребуется настроить стили и другие параметры слайдера в соответствии с вашим дизайном и требованиями.

Это базовый пример создания слайдера с использованием Slick Carousel в WordPress. Вы можете настроить его дополнительно, чтобы добавить эффект, подобный тому, который вы видели на демо-сайте.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы