Адаптивный слайдер карточек в HTML CSS и JavaScript
Сегодня в этом блоге вы научитесь создавать адаптивный слайдер карточек в HTML, CSS и JavaScript с помощью SwiperJs. Ползунок карты будет иметь разбиение на страницы, кнопки навигации и функцию захвата слайда.
Ползунок карт означает комбинацию карт, выровненных по горизонтали, и имеет функцию скольжения, чтобы просмотреть скрытые карты. Карта может содержать любой контент. Например, карточки профиля, карточки продуктов электронной коммерции, карточки блогов и другие.
Посмотрите на изображение нашего продукта на экране. Как вы можете видеть в превью, мы видим три карточки с изображениями, текстовым содержимым и кнопками. Справа и слева мы видим две кнопки навигации, а в центре мы видим разбиение на страницы. На самом деле, всего девять карт, но ожидайте, что три из них находятся в скрытом состоянии. Чтобы увидеть другую карту, нам нужно щелкнуть любую кнопку навигации или мы можем взять карту и сдвинуть ее. Пагинация также работает, и мы также можем щелкнуть по ним, чтобы вывести следующую карту.
Ниже я предоставил видеоруководство для виртуального опыта этого проекта [Адаптивный слайдер карт]. Посмотрев видеоруководство, вы сможете увидеть реальную демонстрацию этого проекта и, очевидно, получить представление о том, как весь код HTML, CSS и JavaScript работает в этом проекте.
Видеоурок Отзывчивый слайдер карточек
Я предоставил весь код HTML CSS и JavaScript вместе с файлом swiper js, который я использовал для создания этого адаптивного слайдера карточек. Перед тем, как попасть в файл исходного кода, вам нужно немного ознакомиться с видео-уроком по карточному ползунку.
Как вы видели в видеоуроке. Сначала мы увидели три карточки с кнопкой навигации и пагинацией. Когда я нажал на левую кнопку навигации, карта скользнула влево, и появилась скрытая карта. Когда я нажимал на левую кнопку навигации, карты скользили вправо. Пагинация также показала нам активную карточку с ее индикатором. Чтобы создать все дизайны пользовательского интерфейса карты, я использовал HTML и CSS, а для создания слайдов карты я использовал плагин swiper js.
Я надеюсь, что теперь вы можете создать этот карточный слайдер, используя HTML CSS и JavaScript с плагином Swiper Js. Если вы испытываете трудности с созданием этого карточного слайдера, я предоставил все исходные коды ниже.
Карточный слайдер | Карусель карт [Исходный код]
Чтобы получить следующий код HTML CSS и JavaScript для ползунка карты. Вам нужно создать три файла: HTML, CSS и файл JavaScript. После создания этих трех файлов вы можете скопировать и вставить данные коды в свой документ. Вы также можете загрузить все файлы исходного кода с помощью данной кнопки загрузки.
Все файлы (HTML, CSS) и скрипты (JavaScript) находятся в архиве!
.jpg "Голая Хилари Дафф (Hilary Duff) для журнала WomenHealth")
0 Комментарии