Слайдер
важливість: 5
Створіть слайдер:
Наведіть курсор миші на бігунок слайдеру, затисніть кнопку миші і рухайте бігунок переміщаючи курсор.
Важливі деталі:
- При натиснутій кнопці миші, курсор може виходити за межі слайдера, але слайдер все одно має працювати (це зручно для користувача).
- Слайдер повинен нормально працювати при різкому русі миші ливоруч або праворуч за межі слайдера. При цьому бігунок повинен зупинятися чітко біля його краю.
Як можна бачити з HTML/CSS, слайдер – це <div>, з кольровим фоном, всередині якого знаходиться інший <div>, оформлений як бігунок, з position: relative.
Використаємо для його позиціювання position: relative, тобто координати встановлюються не абсолютні (position: absolute), а відносно батьківського елементу, бо це зручніше.
І далі реалізуємо Drag’n’Drop тільки по горизонталі, з обмеженням по ширині.