Ответы пользователя по тегу CSS
  • Какой слайдер стоит в товарах Opencart и woocommerce?

    @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. Вы можете настроить его дополнительно, чтобы добавить эффект, подобный тому, который вы видели на демо-сайте.
    Ответ написан
    Комментировать