🔸 Как создать слайдер для отзывов | How to make Testimonial Slider SwiperJS
На приведенное видео нашего проекта [Слайдер отзывов], как вы можете видеть, на данном изображении есть изображение человека и текст отзыва этого человека о продукте или услугах, внизу изображения есть значок цитаты, а также имя человека и должность.
✅ Скачать готовы код:
Testimonail Slider.zip15.73 MbDownload
Технически на правой и левой сторонах есть две кнопки и три точки, что указывает на возможность перемещения. На самом деле, когда мы нажимаем на навигационную кнопку, которая перемещается вправо или влево, и появляется цитата другого человека. Мы можем перемещать этот контент, захватывая и перемещая мышь вправо или влево.
Как вы видели в видео [Слайдер отзывов], сначала было изображение некоторого текста отзыва, а также имя и должность человека. Внизу этого содержимого для отзывов есть три точки, а справа и слева - две навигационные кнопки. Когда я нажал на правую кнопку, содержимое переместилось влево и появилось правостороннее содержимое, аналогично, когда я нажал на левостороннюю кнопку, содержимое переместилось вправо и появилось левостороннее содержимое. Кроме того, я переместил этот контент, просто взяв его и переместив мышь вправо или влево.
Мы увидели, что наш отзыв был полностью адаптивным, когда я уменьшил ширину отзыва, он соответствовал размеру экрана. Когда ширина нашего слайдера отзывов стала равна нашим обычным размерам экрана планшета, кнопка навигации исчезла, потому что мы также можем перемещать ее пальцем.