Java, UX, HTML, CSS, WEB-design

Создайте карусель с помощью CSS Scroll Snap и JavaScript

Краткое описание по статье Создайте карусель с помощью CSS Scroll Snap и JavaScript

Название: Создайте карусель с помощью CSS Scroll Snap и JavaScript . Краткое описание: [ad_1] ⭐ Этот учебник поможет вам создать адаптивну . Дата публикации: 23.01.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

[ad_1]

Этот учебник поможет вам создать адаптивную карусель, используя свойство CSS scroll-snap и очень мало JavaScript для навигации. Вы можете использовать его для отображения продуктов, галереи или отзывов — например, в этом руководстве. Итак, вот что мы будем создавать:

пример карусели

На самом деле это просто горизонтальная секция прокрутки, но когда вы прокручиваете, она «защелкивается» (автоматически регулирует положение контейнера прокрутки), чтобы гарантировать, что он отображает весь элемент, что делает его похожим на карусель. Вы также можете использовать стрелки для отображения следующего и предыдущего элементов, для чего требуется JavaScript. Вам нужно иметь некоторые базовые знания HTML, CSS и JavaScript, чтобы следовать. Попутно вы узнаете о свойствах CSS scroll-snap. Давайте начнем.

Ваш дизайнерский набор инструментов
Неограниченное количество загрузок: более 500 000 веб-шаблонов, наборов иконок, тем и элементов дизайна


Настройка

Создайте пустой документ HTML и назовите его index.html. Добавьте основной скелет HTML. Если вы используете Visual Studio Code, все, что вам нужно сделать, это ввести «!» и нажмите Enter. Вы закончите с этим.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
  
</body>
</html>

В этой демонстрации используется шрифт «Noto Sans». Давайте встроим этот шрифт из шрифтов Google. Добавьте эту ссылку CDN под тегом заголовка, чтобы внедрить обычные и курсивные стили этого шрифта.

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,[email protected],400;0,700;1,400&display=swap" rel="stylesheet">

Создайте свою таблицу стилей и назовите ее style.css. Свяжите таблицу стилей с вашим HTML-документом под ссылкой Google Fonts CDN, используя

<link rel="stylesheet" href="style.css">

Я загрузил три портретных изображения с Pexels и обрезал их под квадрат для этой демонстрации. Вы можете включить свои собственные. Назови их testimonial1.jpg, testimonial2.jpg и testimonial3.jpg.

Создание базового скроллера

Давайте сначала создадим простой горизонтальный скроллер с тремя элементами шириной, такой же, как у контейнера прокрутки.

HTML

Добавьте эту разметку в тег body в свой HTML-файл:

<div class="testimonials">
   <div class="scroller">
       <div class="item">
           Item 1
       </div>
       <div class="item">
           Item 2
       </div>
       <div class="item">
           Item 3
       </div>
   </div>
</div>

Здесь testimonials div действует как обертка, внутри которой находится горизонтальный scroller, а затем три элемента divs.

CSS

В style.css, начните с некоторых общих стилей для всех элементов:

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

Добавьте эти стили в body элемент:

body {
   font-family: 'Noto Sans', sans-serif;
   font-size: 1em;
   color: #4A5568;
}

Ограничить ширину testimonials wrapper примерно до 800 пикселей и отцентрируйте его.

.testimonials {
   max-width: 800px;
   margin: auto;
}

Добавьте эти базовые стили, чтобы увидеть скроллер в действии.

.scroller {
   overflow-x: scroll;
   display: flex;
}
.item {
   min-width: 100%;
   min-height: 200px; /* To start with */
   background-color: #EDF2F7; /* For demo */
}

При этом вы можете увидеть секцию горизонтальной прокрутки, подобную этой.

начало карусели - раздел горизонтальной прокрутки

Привязка прокрутки

С помощью привязки прокрутки CSS можно принудительно установить положение прокрутки (плавно перемещаясь в принудительное положение), как только пользователь перестанет прокручивать. Это работает, применяя два основных свойства: scroll-snap-type и scroll-snap-align.

То тип привязки прокрутки свойство применяется на родитель контейнер (в нашем случае это scroller раздел). Он принимает два аргумента — направление привязки ( x | y | both ) и поведение привязки ( mandatory | proximity ). Нам нужно использовать x для направления, потому что мы прокручиваем горизонтально. За поведение, mandatory означает, что браузер должен привязаться к позиции, а proximity является менее строгим. Мы будем использовать mandatory.

То прокрутка-щелчок-выравнивание применяется к дочерним элементам. Он определяет точку привязки. Требуется один или два аргумента для x или/и y направление ( none | start | end | center ). В нашем случае это свойство может иметь любое значение, кроме none, потому что наши элементы составляют 100% ширины родительского контейнера. Вы можете углубиться в концепцию CSS Scroll Snap здесь.

Добавьте эти свойства в scroller и item дел.

.scroller {
   /* Existing styles here */
   scroll-snap-type: x mandatory;
}
.item {
   /* Existing styles here */
   scroll-snap-align: center;
}

Это все, что вам нужно для волшебства! Теперь проверьте свой браузер и прокрутите по горизонтали. Вы заметите, что браузер строго привязывается к отображению полного элемента, как только вы прекращаете прокрутку в любой момент. При этом достигается первичное карусельное поведение.

Добавление контента

Давайте добавим некоторое содержимое к элементам.

HTML

<div class="item">
   <img src="testimonial1.jpg" alt="Elise">
   <div class="card">
       <p>
           Eu rebum molestie per. No nostrud imperdiet abhorreant qui, hinc incorrupte vix ad. Vel id aliquip oblique. Primis feugait sit an, brute illud convenire duo ea. Graece tempor eripuit sed in.
       </p>
       <span>Elise</span>
   </div>
</div>
<div class="item">
   <img src="testimonial2.jpg" alt="John">
   <div class="card">
       <p>
           Vitae pericula maluisset ut mei, pro eleifend gubergren eu. Et his brute graeci. Affert ponderum ei vel, dolorum accumsan ea has. Sea oblique salutatus ei, simul lucilius pri et. Errem melius temporibus ut eos
       </p>
       <span>John</span>
   </div>
</div>
<div class="item">
   <img src="testimonial3.jpg" alt="Imani">
   <div class="card">
       <p>
           Ne est virtute indoctum, quaeque vituperata cum ut. Te nisl quaeque pri. Vix ex autem latine, mel ne nobis scaevola, ei est dolor utinam commune. Pri unum doctus in, cu primis pertinax eos.
       </p>
       <span>Imani</span>
   </div>
</div>

CSS

Время стилизовать его.

.testimonials {
   /* Existing styles here */
   padding: 15px;
   text-align: center;
}
.item {
   /* Existing styles here */
   background-color: white; /* Change the value to white */
   margin-bottom: 10px;
   padding: 0 50px;
}
.item img {
   margin: 15px auto -60px;
   width: 120px;
   height: 120px;
   border: solid 4px #ffffff;
   border-radius: 60px;
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
   z-index: 2;
}
.card {
   background-color: rgb(237, 242, 247);
   padding: 80px 40px 40px;
   border-radius: 10px;
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
   z-index: 1;
}
.card p {
   font-style: italic;
   line-height: 1.6;
}
.card span {
   display: block;
   margin-top: 20px;
   color: teal;
   font-weight: bold;
   letter-spacing: 0.05em;
   text-transform: uppercase;
}

Наша карусель обрела форму. Единственное, что сейчас находится на рассмотрении, это функциональность навигации.

Добавление навигации

В этой демонстрации я добавил простые стрелки с and > символы кнопок навигации. Вы также можете использовать значки или изображения.

HTML

Добавьте эти две строки сразу после scroller div, но внутри testimonial раздел:

<span class="btn prev">&lt;</span>
<span class="btn next">&gt;</span>

CSS

Добавьте их в свою таблицу стилей для позиционирования и оформления кнопок навигации:

.testimonials {
   /* Existing styles here */
   position: relative;
}
.testimonials .btn {
   position: absolute;
   top: 50%;
   margin-top: 20px;
   height: 30px;
   width: 30px;
   border-radius: 15px;
   background-color: rgba(95, 106, 117, 0.3);
   z-index: 1;
   line-height: 30px;
   text-align: center;
   color: white;
   font-weight: bold;
}
.testimonials .btn:hover{
   background-color: rgba(95, 106, 117, 0.5);
   cursor: pointer;
}
.testimonials .btn.next {
   right: 15px;
}
.testimonials .btn.prev {
   left: 15px;
}

JavaScript

Нам нужен JavaScript, чтобы кнопки работали. Добавьте этот скрипт перед закрытием body тег.

<script>
   const testimonials = document.querySelector('.testimonials');
   const scroller = testimonials.querySelector('.scroller');
   const nextBtn = testimonials.querySelector('.btn.next');
   const prevBtn = testimonials.querySelector('.btn.prev');
   const itemWidth = testimonials.querySelector('.item').clientWidth;
 
   nextBtn.addEventListener('click', scrollToNextItem);
   prevBtn.addEventListener('click', scrollToPrevItem);
 
   function scrollToNextItem() {
       scroller.scrollBy({left: itemWidth, top: 0, behavior: 'smooth'});
   }
   function scrollToPrevItem() {
       scroller.scrollBy({left: -itemWidth, top: 0, behavior: 'smooth'});
   }
</script>

В приведенном выше коде мы добавили обработчики событий «щелчок» в prev и next кнопки. Функциональность перехода к предыдущему или следующему пункту достигается с помощью scrollBy метод. Ознакомьтесь с синтаксисом и примерами element.scrollBy метод.

Опция behavior: ‘smooth’ дает эффект плавного скольжения. Обратите внимание, что этот эффект не поддерживается в IE 11 и некоторых более ранних версиях других браузеров.

Делая это петлей

При желании вы можете сделать этот цикл карусели — нажатие кнопки «Далее» для последнего элемента приводит к запуску карусели с самого начала и аналогичному поведению для кнопки «Предыдущий», изменив методы в вашем скрипте на это:

function scrollToNextItem() {
   if(scroller.scrollLeft < (scroller.scrollWidth - itemWidth))
       // The scroll position is not at the beginning of last item
       scroller.scrollBy({left: itemWidth, top: 0, behavior:'smooth'});
   else
       // Last item reached. Go back to first item by setting scroll position to 0
       scroller.scrollTo({left: 0, top: 0, behavior:'smooth'});
}
function scrollToPrevItem() {
   if(scroller.scrollLeft != 0)
       // The scroll position is not at the beginning of first item
       scroller.scrollBy({left: -itemWidth, top: 0, behavior:'smooth'});
   else
       // This is the first item. Go to last item by setting scroll position to scroller width
       scroller.scrollTo({left: scroller.scrollWidth, top: 0, behavior:'smooth'});
}

Делаем его полностью отзывчивым

То, что мы имеем сейчас, уже отвечает. За исключением того, что для ширины браузера меньше 480px, карта становится слишком узкой и длинной. Итак, давайте уменьшим некоторые отступы для элемента и карточки для этой ширины, используя медиа-запросы.

Добавьте это в свою таблицу стилей:

Экран @media и (максимальная ширина: 480 пикселей) {
.пункт {
отступ: 0 30px;
}
.карта {
отступ: 80px 30px 30px;
}
}

Это оно! Вы успешно создали адаптивную карусель для своего раздела отзывов с наименьшим количеством JavaScript, а также узнали о новом scroll-snap свойства в CSS. Вы можете изменить эту карусель в соответствии с вашими потребностями. Попробуйте использовать эту карусель для изображений разной ширины и посмотрите, как она себя ведет.

Вот полный исходный код для загрузки.

Скачать исходный код

Этот пост может содержать партнерские ссылки. Смотрите нашу информацию о партнерских ссылках здесь.

[ad_2]
Source: 1stwebdisigner

Заключение

Вы ознакомились с статьей — Создайте карусель с помощью CSS Scroll Snap и JavaScript

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Кнопка «Наверх»