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

Feature Carousel

Оформлений так, що поточний елемент має збільшений розмір, стрілки розташовуються з боків нижче інших елементів. Попередні і наступні слайди мають прозорість 0.5.

Віджет підходить для презентації ключових матеріалів. Є кроссбраузерным, має гнучкі налаштування. Оформлення налаштовується за допомогою jQuery і CSS. Дозволяє відображати лише одну карусель на сторінці.

  • Для головного блоку, всередині якого міститься слайдер, застосовується id carousel.
  • Клас carousel-feature – для обгортки кожного елемента.
  • Клас carousel-caption – для тексту поточного слайда.
  • Класи carousel-right і carousel-left – для стрілок.
  • Активація:

    $(‘#carousel’).featureCarousel({});

    Rcarousel

    Для Rcarousel, на відміну від інших плагінів, виділений цілий сайт.

    Розробник надає докладний опис можливостей слайдера, розповідає про оновлення до нової версії. Однак останній апдейт стався в 2012 році, за цей час сталося багато змін, деякі функції можуть не відповідати сучасним вимогам.

    Цікаве:  Internet Explorer. Як видалити або відключити

    Працює в таких браузерах:

    • Internet Explorer 7+;
    • Firefox 3.0+;
    • Chrome;
    • Opera 10.10+;
    • Safari 4.0.5+.

    Конфігурації;

    • visible – зазначається кількість видимих елементів;
    • step – кількість елементів, які змінюються при кожному натисканні;
    • width – ширина кожного елемента каруселі;
    • speed – швидкість зміни слайдів;
    • orientation – орієнтація може бути вертикальною і горизонтальною.

    Додати елементи навігації можна через додавання тегів з id ui-carousel-next і ui-carousel-prev. Якщо потрібно прикріпити стрілки переходів зі своїми класами і тегами, в navigation зазначаються ці значення.

    navigation: {
    prev: “.someFancyClass”,
    next: “#andFunnyID”
    }

    Тепер кнопка для перемикання на попередній елемент повинна мати клас someFancyClass, на наступний – тег andFunnyID.