Сегодня я представил кое-что интересное и полезное для проекта HTML CSS и JavaScript, в этом проекте вы научитесь создавать слайдер изображений веб-сайта.
Как вы можете видеть на данном видео, изображение занимает всю высоту и ширину, с правой и левой сторон есть две навигационные кнопки для перемещения изображения, а на кнопке мы можем увидеть красивый раздел с разбиением на страницы. В центре есть текст и кнопка.
Слайдер изображений веб-сайта означает функции в заголовке веб-сайта или разделе "Герой", где пользователь может перемещать изображения, нажимая на кнопку навигации или также захватывая изображение. Также есть разбивка на страницы, которая показывает, сколько изображений на этом веб-сайте в разделе harder. Мы можем видеть подобные функции на многих типах веб-сайтов, таких как электронная коммерция, спорт, газеты, путешествия и многие-многие другие.
Как вы видели в видео по нашему проекту Image Slider. На первом представлении мы увидели полноразмерный экран, две кнопки навигации, разбивку на страницы и некоторый текст с кнопками. Когда я нажимаю на левую боковую кнопку, изображение перемещается в левую сторону, а с правой стороны появляется другое изображение, аналогично, когда я снова нажимаю на эту кнопку, появляется другое изображение. С другой стороны, когда я нажимал на левую навигационную кнопку, изображение сдвигалось вправо, а с левой стороны появлялось другое изображение. Кроме того, мы могли перемещать изображения, захватывая их.
Кроме того, мы видели в адаптивной части, что когда ширина экрана достигает небольших размеров, таких как планшет и мобильный, тогда эти навигационные кнопки исчезают и появляется разбивка на страницы, и мы можем перемещать эти изображения, просто захватывая их. Я использовал HTML CSS и JavaScript и расширение swiperjs для создания этого адаптивного слайдера изображений.
0 Комментарии