Js слайдер: Слайдер для сайта на чистом CSS и JavaScript

97 просмотров

Слайдер — Примеры React.

Небольшой (горизонтальный) анимированный слайдер для React Native

Настраиваемая ползунковая кнопка реагирования для настольных и мобильных устройств

Библиотека ползунков диапазона, написанная на машинописном языке и использующая технологии веб-компонентов

Приложение Hackerrank React Slideshow

Легкая (~ 2 КБ) библиотека для создания ползунков диапазона, которые могут захватывать значение или диапазон значений с помощью одной или двух ручек перетаскивания

Приложение фотогалереи с React и Firebase

Простой и легкий компонент карусели для приложений React

Базовая флеш-карта с круглым ползунком для выбора ответа

Задача кодирования React: запрограммировать компонент itemSlider

Хуки для построения диапазонов и слайдеров с несколькими диапазонами в React.

Современный мобильный сенсорный слайдер с аппаратным ускорением переходов с реакцией.

Коснитесь и перетащите компонент карусели слайдера для React

Простой и легкий пакет бесконечной карусели для React

Облегченный карусельный компонент для реакции.

React Comparison Slider — это полностью настраиваемый компонент для создания индивидуальных, доступных с клавиатуры слайдеров «до и после» для Интернета.

Простой компонент ImageSlider для ReactJS v17

, который поднимается и опускается при нажатии.

Ползунок диапазона временной шкалы с React.js.

Самый простой способ скользить по маршрутам React.

Менее скучный диапазон ввода с реакцией.

Гибкий и отзывчивый карусельный компонент для реакции.

Компонент ползунка диапазона для React Bootstrap (Bootstrap 4), который расширяет собственный элемент HTML.

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

react-awesome-slider — это расширяемый, настраиваемый, готовый к производству компонент React со скоростью 60 кадров в секунду, который отображает слайдер / карусель мультимедийной (изображения / видео) галереи.

Компонент ползунка ввода React.

Компонент React, который использует CSS для анимации дочернего элемента с его текущей высоты на { height: auto } при монтировании/обновлении/размонтировании.

Компонент Simple React для сравнения двух изображений с помощью ползунка.

Структура слайд-шоу React.

Оборачивает leongersen/noUiSlider в реактивный компонент.

Познакомьте новых пользователей с вашим приложением с помощью этой карусели в стиле материала.

Компонент Slider/Carousel для React, поддерживающий пользовательскую CSS-анимацию.

Добро пожаловать в будущее. React Compound Slider — это крошечный (5 КБ) компонент слайдера, у которого нет мнения о разметке или стилях.

Карусельный/слайдерный компонент для последовательного отображения слайдов или наборов слайдов.

Этот проект больше не поддерживается. Есть несколько отличных альтернатив этому проекту; мы используем rc-слайдер.

React Slidy — это простой и минимальный компонент слайдера.

Компонент веб-слайдера React — это слайдер изображений.

Не очередная карусель; более простой компонент, который анимирует горизонтальные переходы слайдов между шагами мастера или уровнями детализации.

Компонент SlideRuler для ReactJS, селектор значений ползунка React.

Полностраничный слайдер с использованием реакции и машинописного текста.

Независимый от CSS компонент слайдера для React.

Компонент пользовательского интерфейса Slider для React.

Ползунок — Zag

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

0.10.3 (последняя) Visualize LogicView Source

Количество 20

Свойства

отключено

Только чтение

dir——ltrrtl

Функции

• Поддерживает центральное начало (ползунок, начинающийся в центре, вместо начала позиция).
• Полностью управляемая навигация с помощью клавиатуры.
• Поддерживает прикосновение или щелчок по дорожке для обновления значения.
• Поддерживает направление справа налево.
• Поддержка горизонтальной и вертикальной ориентации.
• Предотвращает выделение текста при перетаскивании.

Установка

Чтобы использовать слайдер в вашем проекте, выполните следующую команду в своем командная строка:

 
 установка npm @zag-js/slider @zag-js/реакция
# или
yarn add @zag-js/slider @zag-js/react 
  

Эта команда установит независимую от фреймворка логику ползунка и реактивный утилиты для выбранного вами фреймворка.

Анатомия

Чтобы правильно настроить ползунок, вам необходимо понимать его анатомию и то, как мы назовите его части.

Каждая часть включает атрибут data-part , помогающий идентифицировать их в DOM.

Ползунок высокого уровня состоит из:

• Root : Корневой контейнер для слайдера
• Этикетка : Доступная этикетка для ползунка
• Элемент управления : Контейнер для направляющей ползунка и большого пальца
• Трек : Элемент трека ползунка
• Диапазон : Элемент, который визуально представляет диапазон ползунка
• Большой палец : Элемент управления, используемый для перетаскивания ползунка
• Выход : элемент, отображающий текущее значение ползунка

Использование

Во-первых, импортируйте слайдер в ваш проект 73 машина — Состояние машинная логика для виджета ползунка, как описано в WAI-ARIA спец.

Вам нужно будет предоставить уникальный id к крючку useMachine . Это используется для убедитесь, что каждая часть имеет уникальный идентификатор.

Затем импортируйте необходимые хуки и функции для вашего фреймворка и используйте слайдер в вашем проекте 🔥

 
 импортировать * как слайдер из "@zag-js/slider"
импортировать {useMachine, normalizeProps} из "@zag-js/react"
функция экспорта Slider() {
  const [состояние, отправить] = useMachine (slider.machine ({id: "1" }))
  const api = slider.connect (состояние, отправка, normalizeProps)
  возвращаться (
    

      <дел>
        Ярлык ползунка
        
{api.value}
      
      

        

          
 ..api.rangeProps} />
        
        

          
        
      
    
  )
} 
 

Изменение ориентации

По умолчанию ползунок считается горизонтальным. Чтобы изменить ориентацию на Вертикаль, установите для свойства ориентация в контексте машины значение вертикаль .

В этом режиме ползунок будет использовать клавиши со стрелками вверх и вниз для увеличить/уменьшить его значение.

Не забудьте изменить стили вертикального ползунка, указав его высота

 
 const [состояние, отправить] = useMachine(
  слайдер.машина({
    ориентация: "вертикальная",
  }),
) 
 

Установка начального значения

 
 const [состояние, отправить] = useMachine(
  слайдер.машина({
    значение: 30,
  }),
) 
 

Указание минимума и максимума

По умолчанию минимум 0 , максимум 100 . Если это не то, что ты хотите, вы можете легко указать другие границы, изменив значения min и/или максимальные атрибуты.

Например, чтобы запросить у пользователя значение от -10 до 10 , вы можете использовать:

 
 const [состояние, отправить] = useMachine(
  слайдер.машина({
    мин: -10,
    макс: 10,
  }),
) 
 

Настройка степени детализации значения

По умолчанию степень детализации составляет 1 , что означает, что значение всегда целое число. Вы можете изменить атрибут шага, чтобы контролировать степень детализации.

Например, если вам нужно значение между 5 и 10 с точностью до двух знаков после запятой. места, вы должны установить значение шага на 0.01 :

 
 const [состояние, отправить] = useMachine(
  слайдер.машина({
    мин: 5,
    макс: 10,
    шаг: 0,01,
  }),
) 
 

Прослушивание изменений

Когда значение ползунка изменяется, обратные вызовы onChange и onChangeEnd вызывается. Вы можете использовать это для настройки пользовательских поведений в вашем приложении.

 
 const [состояние, отправить] = useMachine(
  слайдер.машина({
    при изменении (значение) {
      console.log("значение меняется на:", значение)
    },
    onChangeEnd (значение) {
      console.log("значение изменилось на:", значение)
    },
  }),
) 
 

Изменение начального положения

По умолчанию «нулевое положение» ползунка обычно находится в начальном положении (левое в LTR и прямо в RTL).

В сценариях, где значение представляет собой смещение (или относительное значение), оно может полезно изменить «нулевое положение» на центр. Для этого проходим origin свойство контекста в центр .

 
 const [состояние, отправить] = useMachine(
  слайдер.машина({
    происхождение: "центр",
  }),
) 
 

Использование в формах

Чтобы использовать ползунок в формах, используйте открытый inputProps из connect функцию и убедитесь, что вы передаете имя значение в контекст машины. Это будет визуализировать скрытый ввод и убедиться, что изменения значения распространяются на форму правильно.

 
 const [состояние, отправить] = useMachine(
  слайдер.машина({
    имя: "количество",
  }),
) 
 

Поддержка RTL

Ползунок имеет встроенную поддержку выравнивания и взаимодействия RTL. В РТЛ режиме операции выполняются справа налево, то есть клавиша со стрелкой влево будет увеличиваться, а клавиша со стрелкой вправо будет уменьшаться.

Чтобы включить поддержку RTL, передайте свойство контекста dir: rtl

 
 const [state, send] = useMachine(
  слайдер.машина({
    директор: "rtl",
  }),
) 
 

Хотя мы позаботимся о взаимодействиях в режиме RTL, вы должны убедиться, что вы примените правильные стили CSS, чтобы перевернуть макет.

Использование меток ползунка

Чтобы показать метки или деления вдоль дорожки ползунка, используйте открытый Метод api. getMarkerProps() для позиционирования меток ползунка относительно отслеживать.

 
 //...
<дел>
  

    

      

    
    

      
    
  
  

    |
    |
    |
  

//... 
 

Руководство по стилю

Ранее мы упоминали, что каждая часть ползунка имеет атрибут data-part , добавленный к их, чтобы выбрать и стилизовать их в DOM.

Состояние фокусировки

Когда ползунок сфокусирован, атрибут data-focus добавляется к корень, управление, большой палец и части метки.

 
 [data-part="root"][data-focus] {
  /* стили для корневого состояния фокуса */
}
[данные-часть = "большой палец"]: фокус {
  /* стили для состояния фокуса большого пальца */
}
[data-part="control"][data-focus] {
  /* стили для управления состоянием фокуса */
}
[data-part="track"][data-focus] {
  /* стили для отслеживания состояния фокуса */
}
[data-part="range"][data-focus] {
  /* стили для состояния фокуса диапазона */
} 
 

Отключенное состояние

Когда ползунок отключен, в корень добавляется атрибут data-disabled , метка, контроль и большой палец.

 
 [data-part="root"][data-disabled] {
  /* стили для отключенного состояния root */
}
[data-part="label"][data-disabled] {
  /* стили для отключенного состояния метки */
}
[data-part="control"][data-disabled] {
  /* стили для отключенного состояния управления */
}
[data-part="output"][data-disabled] {
  /* стили для отключенного состояния вывода */
}
[data-part="thumb"][data-disabled] {
  /* стили для отключенного состояния большого пальца */
}
[data-part="range"][data-disabled] {
  /* стили для отключенного состояния большого пальца */
} 
 

Недопустимое состояние

Когда ползунок недействителен, в корень добавляется атрибут data-invalid , дорожка, диапазон, метка и части большого пальца.

 
 [data-part="root"][data-invalid] {
  /* стили для недопустимого состояния root */
}
[data-part="label"][data-invalid] {
  /* стили для недопустимого состояния метки */
}
[data-part="control"][data-invalid] {
  /* стили для управления недопустимым состоянием */
}
[data-part="output"][data-invalid] {
  /* стили для вывода недопустимого состояния */
}
[data-part="thumb"][data-invalid] {
  /* стили для недопустимого состояния большого пальца */
}
[data-part="range"][data-invalid] {
  /* стили для недопустимого состояния диапазона */
} 
 

Ориентация

 
 [data-part="root"][data-orientation="(горизонтальная|вертикальная)"] {
  /* стили для горизонтального или вертикального */
}
[data-part="thumb"][data-orientation="(горизонтальный|вертикальный)"] {
  /* стили для горизонтального или вертикального */
}
[data-part="track"][data-orientation="(горизонтальный|вертикальный)"] {
  /* стили для горизонтального или вертикального */
} 
 

Стилизация маркеров

 
 [data-part="marker"][data-state="(at|under|over)-value"] {
  /* стили для случаев, когда значение превышает значение маркера */
} 
 

Методы и свойства

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