JQuery-слайдери зображень: приклади

test

test

  • 01 Slide
  • 02 Slide
  • 03 Slide
  • 04 Slide
  • 05 Slide

Крім звичного способу перемикання слайдів стрілками, присутня можливість перегортання кліком миші по відповідних вкладках. Цей блок знаходиться в нижній частині слайдера, а в коді заданий тег nav з класом tabs.

Примітно, при кліці на стрілки перед переміщенням до наступної вкладки з’являється міні-зображення. Воно є кликабельним елементом і також призначене для перемикання.

Цікаве:  Як поміняти браузер на інший?

Ініціалізація каруселі відбувається таким чином:

$(document).ready(function(){
$(‘.sleekslider’).sleekslider({
thumbs: [‘1.jpg’, ‘2.jpg’, ‘3.jpg’,’4.jpg’,’5.jpg’],
labels:[‘Slide 1’, ‘Slide 2’, ‘Slide 3’, ‘Slide 4’, ‘Slide 5’],
speed: 6000 // transition speed
});
})

В даному прикладі задана швидкість 6 секунд, елементами каруселі є зображення 1.jpg – 5.jpg іменами вкладок є Slide 1 – Slide 5.