Показать фрагмент следующего слайда в Swiper.js
Мне нравится swiper.js - это скрипт карусели, лёгкий, удобный. Клиент попросил, чтобы в карусели выглядывал кусочек следующего слайда, так как "их посетители не догоняют, что тут надо листать". Я такое видел на сайтах, но никогда сам не делал. Профдеформация позволяет видеть элементы управления и пользоваться ими))) Ну тут надо было сделать.

Как оказалось - это очень легко, хотя совершенно не очевидно (в документации об этом не сказано вообще), поэтому напишу сюда.
В swiper.js есть параметр slidesPerView, который указывает количество слайдов для всей карусели или для конкретного диапазона разрешений экрана (можно использовать в объекте breakpoints). Оказалось, что это коэффициент и там можно использовать десятичные числа: 1.1, 1.25, 1.5 и т.д. (с точкой, а не запятой).

document.addEventListener('DOMContentLoaded', () => {
        const swiper = new Swiper('.subcategories-carousel', {
            speed: 400,
            spaceBetween: 0,
            breakpoints: {
                // when window width is >= 320px
                300: {
                    slidesPerView: 1.1,
                    spaceBetween: 0
                },
                // when window width is >= 982px
                982: {
                    slidesPerView: 3.2,
                    spaceBetween: 0
                },
                // when window width is >= 982px
                1200: {
                    slidesPerView: 4,
                    spaceBetween: 0
                }
            }
        });
    });

Быстро и удобно.

- Документация swiper.js
- Swiper.js, оформленный в виде веб-ассета для Joomla 4 / Joomla 5 скачать бесплатно без регистрации и смс

@webtolkru

#разработка #joomla #development #javascript