Сегодня в этом блоге ты научишься создавать адаптивный слайдер отзывов в HTML CSS и JavaScript / SwiperJs. Существует множество слайдеров, которые я создал, используя только HTML и CSS, а также HTML CSS и JavaScript с помощью swiperjs.
Быстро взгляните на приведенное видео нашего проекта [Слайдер отзывов], как вы можете видеть, на данном изображении есть изображение человека и текст отзыва этого человека о продукте или услугах, внизу изображения есть значок цитаты, а также имя человека и должность. Технически на правой и левой сторонах есть две кнопки и три точки, что указывает на возможность перемещения. На самом деле, когда мы нажимаем на навигационную кнопку, которая перемещается вправо или влево, и появляется цитата другого человека. Мы можем перемещать этот контент, захватывая и перемещая мышь вправо или влево.
Отзывы - это раздел, содержащий обзоры продуктов и услуг. Как мы можем видеть на веб-сайте кофейни, там будет обзор, где хранится множество отзывов разных людей об этом кофе.
Как вы видели в видео [Слайдер отзывов], сначала было изображение некоторого текста отзыва, а также имя и должность человека. Внизу этого содержимого для отзывов есть три точки, а справа и слева - две навигационные кнопки. Когда я нажал на правую кнопку, содержимое переместилось влево и появилось правостороннее содержимое, аналогично, когда я нажал на левостороннюю кнопку, содержимое переместилось вправо и появилось левостороннее содержимое. Кроме того, я переместил этот контент, просто взяв его и переместив мышь вправо или влево.
Мы увидели, что наш отзыв был полностью адаптивным, когда я уменьшил ширину отзыва, он соответствовал размеру экрана. Когда ширина нашего слайдера отзывов стала равна нашим обычным размерам экрана планшета, кнопка навигации исчезла, потому что мы также можем перемещать ее пальцем.
0 Комментарии