Слайдер картинок на js: Простой слайдер изображений на CSS и Javascript / Хабр

Содержание

Слайдер изображений — Splide

Введение

Целью этого урока является создание типичного слайдера изображений с текстом или без него. На этой странице также рассказывается, как обрезать изображения с помощью опции cover . Давайте начнем! 🧐

Базовый слайдер изображений

Сначала поместите изображения в элементы слайда:

   <   div     id   = 9 0006  "изображение-слайдер"     класс   =   "слайд"   >  
     <   деление     класс   = 900 06  "splide__track"   >  
     <   ul     класс   = 9000 6  "splide__list"   >  
     <   li     класс   =   "слайд__слайд"   >  
      <   img     источник   =   "image01. jpg "   >  
     <   li     класс   =   "splide__slide "   >  
     <   img     источник   =   "image02. jpg"   >  
     <   li     класс   =   "splide__slide"   >  
     <   img     src    =   "image03.jpg"   > 9000 6 
     <   /   дел. v   >  
  HTML

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

     :     100   %   ;  
     высота   :     авто   ;  
   }  
  CSS

Затем инициализируйте Splide после загрузки содержимого DOM.

 Вы должны прослушать событие  DOMContentLoaded , если вы инициализируете его в теге  :
   <   script   >  
     документ   .   addEventListener   (     'DOMContentLoaded'   ,     функция   9000 6  (   )     {  
     новый     Шлиц   (     '#image-slider'     )   .   крепление    (   )   ;  
   <   /   script   >  
  HTML 
 
 Или вам не нужно делать это в конце 9000 5 <тело>  тег:
   <   сценарий   >  
     новый     Spli de   (     '#image-слайдер'     )   .    крепление   (   )   ;  
   <    /   script   >  
  HTML 
 
 Теперь мы получаем следующий ползунок:
 Auto Crop 
 Исходные изображения обычно имеют разное соотношение сторон.
Splide позволяет обрезать изображения до одинаковых размеров с помощью опции  cover .
который устанавливает источники в их родительский элемент как  background-image  .
   документ   .   addEventListener   (     'DOMContentLoaded'   ,     функция   9000 6  (   )  9# слайдер изображений'   ,     {  
      крышка     :   9 0006  true   ,  
     heightRatio   :     0,5   , 9 0006 
     }     )   .    крепление   (   )   ;  
   }     )   ;  
  JavaScript 
 
 Результат будет таким:
 Не забудьте указать  height  ,  heightRatio  или  fixedHeight  вариант
чтобы слайд имел явную высоту.
  Если вам не нужна поддержка IE, вы можете использовать объектную подгонку   свойство вместо  покрывает вариант .
 Изображения и тексты 
 Splide принимает любой контент внутри слайдов.
Создать слайдер в виде карты очень просто:
   <   div     id   =   "image-slider"  9000 5   класс   =   "шлиф"   >  
     <   деление   90 006  класс 9Класс   =   "splide__list"   >  
     <   li      класс 9 0006  =   "splide__slide"   >  
     <   img     src   =   "image01. jpg"   >  
     Описание     01  
    9 Класс 9 0006  =   "splide__slide"   >  
     <   img     src   =   "image02.jpg"   >   
     Описание     02  
   9 0013  <   /   деление   >  
     <   /   деление  9 0005 >  
   <   /   div   >  
  HTML 
 
 Отобразим 2 карты на ПК, но уменьшим их до 1 на мобильных устройствах.
   документ   .   addEventListener   (     'DOMContentLoaded'   ,     функция   9000 6  (   )      {  
     новый     Шлиц   (     '#card-slider'   ,     {  
     на странице     :     2   ,  
     точки останова   : 900 06    {  
     640   :     {  
  9000 6   на страницу   :     1   ,  
     }   90 006 )  .     крепление   (  )  ;  
   }     )   ;  
  JavaScript 
 
 Теперь мы получаем примерно следующий карточный слайдер.
 Lorem ipsum dolor sit amet, ad laudem maluisset molestiae ius. Movet nostro in duo, audire vulputate mel cu
 Nostrum mentitum ea sit. Ad est alia utroque verterem, ad pri soluta diceret expetenda
 Quo harum altera incorrupte ea, eos viris constituto ex
 Commodo denique honoratis duo et, an eum noluisse vituperatoribus, ad lorem nonumy tempor ius
 
 Lorem ipsum dolor sit amet, ad laudem maluisset molestiae ius. Movet nostro in duo, audire vulputate mel cu
 Nostrum mentitum ea sit. Ad est alia utroque verterem, ad pri soluta diceret expetenda
 Обратите внимание, что если вы хотите использовать опцию  обложки  для ползунка карты,
вы должны использовать элемент контейнера. Подробнее см. в этом документе.
 Полноэкранный слайдер 
 Поскольку параметры  ширина  и  высота  принимают относительные единицы измерения CSS, создать полноэкранный слайдер проще простого.
Просто нанесите 
  '100vw'  и  '100vh' .
   документ   .   addEventListener   (     'DOMContentLoaded'   ,     функция   9000 6  (   )     {  
     новый     Splide   (     '#fullscreen-slider' 900 06 ,     {  
     ширина     :     '100vw'   ,  
     высота   :     '100vh'   , 9000 6 
     }    )  .    крепление   (   )   ;  
   }     )   ;  
  JavaScript 
 
 Как создать слайдер изображения «До и после» с помощью CSS и JS | by JW 
 Опубликовано в
 ·
 Чтение: 7 мин.
 ·
 15 декабря 2020 г.
 Пошаговое руководство по созданию эффекта сравнения изображений до и после с использованием диапазона ввода html
 Введение
 Демонстрация результатов
 Предварительные условия
 Пошаговое руководство
 Заключение
 Если у вас есть два изображения для сравнения, одно эффективное и в то же время простое элемент пользовательского интерфейса — это «до и после». слайдер изображения.
 Gif из Google Этот элемент «ползунка» позволяет вашему пользователю управлять тем, как два изображения отображаются на экране, и свободно просматривать два разных изображения. Вы можете подумать, что для создания такого эффекта требуется некоторая библиотека, но на самом деле это очень простой и простой в кодировании пользовательский интерфейс. Обладая базовыми знаниями в CSS и JS, каждый может его создать.
 В этом руководстве я подробно объясню концепцию, лежащую в основе этого пользовательского интерфейса, способы его реализации и предложения по дальнейшему улучшению. Приступаем к кодированию.
  Шаг 1. Понимание концепции 
 Концепция этого «слайдера изображений» очень проста. Вам нужны только два компонента: контейнер изображения и ползунок.
 Контейнер изображений представляет собой обычный элемент div с двумя изображениями одинакового размера, накладывающимися друг на друга. Один как «фон», другой как «передний план».
 Мы будем использовать абсолютное положение, чтобы изображение переднего плана располагалось непосредственно поверх фонового. Фоновое изображение всегда имеет ширину 100%, в то время как ширина изображения переднего плана будет меняться в зависимости от ввода пользователя, в результате чего будет отображаться часть фонового изображения.
 Второй компонент — слайдер. Чтобы упростить задачу, мы могли бы просто использовать элемент ввода html «диапазон». Это позволяет пользователю выбирать значение путем перетаскивания между заданным вами минимальным и максимальным значением. Ввод может быть легко получен с помощью прослушивателя событий в javascript.
  
для получения более подробной информации см. https://www.w3schools.com/howto/howto_js_rangeslider.asp Одним из недостатков использования ползунка по умолчанию является то, что его стиль ограничен. Вы не можете сойти с ума по дизайну. Если вы ищете более настраиваемый слайдер, возможно, вам придется создать его самостоятельно. Однако это не является предметом данного руководства.
 Мы бы сделали ползунок со 100% шириной и высотой контейнера и расположили его поверх контейнера изображения. Когда пользователь перетаскивает ползунок, мы одновременно обновляем ширину переднего плана. Вместо этого создание иллюзии пользователя перетаскивает изображение.
 Когда значение ползунка будет обновлено, мы изменим ширину переднего плана. Надеюсь, объяснений достаточно. Теперь мы перейдем к кодированию.
  Шаг 2. Создайте контейнер образа  Давайте начнем с создания нашего контейнера. Это простая структура с двумя div внутри. Поскольку мы не хотим, чтобы наше изображение масштабировалось в зависимости от ширины содержащего их элемента div, мы будем использовать применить изображение с тегом  background-image  вместо тега   . Один важный стиль, который нам нужно использовать, это 9.0005 background-size  и убедитесь, что размер изображения всегда одинаков.
 HTML:
 SCSS:
 Чтобы сделать этот урок немного проще, я использовал фиксированный размер для всего. 
 *Если вы не хотите использовать SCSS, просто сделайте стиль плоским, а не вложенным
 Я использовал две версии одного и того же изображения (с цветом и без), поэтому они идеально выровнены Теперь у нас есть контейнер, давайте добавим ползунок.
  Шаг 3. Создание слайдера 
 Наш слайдер должен покрывать все изображение тонкой белой полосой, «разделяющей» часть изображения до и после. Это можно сделать, стилизовав ползунок и ползунок (часть, которую вы перетаскиваете). нам нужно сделать внешний вид ползунка и бегунка невидимыми по умолчанию, а затем применить к ним наш собственный стиль.
 HTML (под изображениями):
 SCSS (со ссылкой на https://www.w3schools.com/howto/howto_js_rangeslider.asp):
 Если вы не хотите использовать SCSS, замените  @include center  с содержимым в  @mixin center  и используйте  .slider::-webkit-slider-thumb  для замены синтаксиса &
 Я применил к ползунку слегка видимый серый фон, а при наведении курсор сделал цвет еще более прозрачным. Создание эффекта «фокуса» при наведении курсора на изображение. Для ползунка это просто белый фоновый div с полной высотой контейнера.
 Вам может понадобиться ::-moz-range-thumb для поддержки браузера в Firefox
 Теперь у нас есть рабочий ползунок, давайте свяжем его с шириной изображения переднего плана.
  Шаг 4. Добавьте прослушиватель событий к ползунку 
 Последний шаг — связать значение ползунка с шириной изображения переднего плана. Этого очень легко добиться (поскольку мы используем собственный диапазон ввода html в качестве ползунка). Мы могли бы получить значение от 1 до 100 в  event.target.value , когда мы применяем прослушиватель событий.
 Затем нам просто нужно выбрать элемент переднего плана и изменить его ширину при каждом обновлении ползунка.
 JS:
 Если это не сработало, как ожидалось, попробуйте правильно получить значение ползунка и дважды проверьте свойство background-size вашего css
 Да! Функция работает. В качестве бонуса от использования ввода диапазона мы можем даже щелкнуть внутри контейнера, чтобы ползунок переместился в позицию, в которую был сделан щелчок.
 Еще одна вещь, которую мы могли бы (и, вероятно, должны) добавить в пользовательский интерфейс, — это значок круга «перетащи меня» на ползунке, как индикатор того, что этот компонент можно перетаскивать.
  Шаг 5 (необязательно). Добавление большого пальца в виде круга на ползунок 
 Нативный ввод диапазона имеет свои преимущества (простота реализации, простота получения значения и т. д.), но когда дело доходит до стиля, мы мало что можем сделать. Поскольку мы заменяем стандартный «круглый» большой палец нашей белой разделительной линией, нам нужно каким-то образом добавить круг обратно.
 Быстрый (но грязный) способ сделать это — добавить еще один элемент, совершенно не относящийся к ползунку, но позиционируемый в его центр, и «следящий» за его движением с помощью javascript. И это именно то, что мы бы сделали.
 HTML:
 SCSS:
 After и до элемента Добавить две «стрелка» внутри кнопки круга
 JS:
 Еще одна вещь, которая нам нужно сделать, - это сделать круг не выбирающим, поэтому событие мыши всегда идет к слайдеру. С некоторым осторожным позиционированием и JS мы заставили круглую ручку двигаться вместе с ползунком.
 Это то же самое изображение сверху. На этом слайдер изображений «до и после» готов. Теперь вы можете выбрать понравившееся изображение и поэкспериментировать с ним. (И спасибо Бет Хармон за то, что сопровождали нас в этом путешествии)
 Как и было обещано, концепция этого элемента пользовательского интерфейса очень проста. Вам не нужно устанавливать другую библиотеку только для этого эффекта. При этом, это очень простая реализация, как вы можете видеть, я использовал много фиксированного размера в пикселях. Если вы хотите более «производственный» дизайн, я предлагаю потратить некоторое время на изучение того, как дизайн меняется при разных размерах окна.
 В этом примере я использовал черно-белое изображение и сравнение цветного изображения. Но я вижу много других примеров с изменением времени (например, тот же город 100 лет назад и нынешний). Для такого дизайна вы также можете добавить следующий тег, показывающий текущие годы (аналогично тому, как мы добавляем кнопку ползунка).
No related posts.