назад до уроку

Слайдер

важливість: 5

Створіть слайдер:

Наведіть курсор миші на бігунок слайдеру, затисніть кнопку миші і рухайте бігунок переміщаючи курсор.

Важливі деталі:

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

Відкрити пісочницю для завдання.

Як можна бачити з HTML/CSS, слайдер – це <div>, з кольровим фоном, всередині якого знаходиться інший <div>, оформлений як бігунок, з position: relative.

Використаємо для його позиціювання position: relative, тобто координати встановлюються не абсолютні (position: absolute), а відносно батьківського елементу, бо це зручніше.

І далі реалізуємо Drag’n’Drop тільки по горизонталі, з обмеженням по ширині.

Відкрити рішення в пісочниці.