Простий карусель на jQuery. Як створити карусель використовуючи тільки HTML та CSS Адаптивна карусель

Плагіни jQuery-каруселі дозволяють відображати вміст веб-сайтів у більш привабливому вигляді. За допомогою таких плагінів можна створювати красиві презентації прямо на сторінках сайтів та привертати увагу відвідувачів.

1. Bootstrap Ambilight Slider

Bootstrap Ambilight Slider– плагін для створення слайдерів/каруселів з ефектом навколишнього світіння та функціоналом Bootstrap.

2. jQuery TouchSwipe Carousel

jQuery-плагін TouchSwipe Carouselдозволяє визначати дотику до сенсорного екрану та імітувати натискання клавіші миші.

3. ItemSlide

ItemSlide.jsявляє собою jquery-плагін для створення каруселі, яка працюватиме як на настільних ПК, так і на мобільних. сенсорних пристроях.

4.

– jquery-плагін для створення адаптивних каруселів/слайдерів

5.

Повністю адаптивний та оптимізований під мобільні пристрої jquery-каруселів. Для анімації тут використовуються CSS3-переходи, але також передбачений запасний варіант на jQuery. Плагін підтримує необмежену кількість слайдів із будь-яким типом контенту. вміє взаємодіяти з клавіатурою, і при цьому добре працює у більшості браузерів, у тому числі й мобільних.

6. SilverTrack

SilverTrack – jQuery-плагін із можливістю розширення. Складається з невеликого ядра, до якого можна підключати на вибір зручні плагіни.

7. Owl Carousel 2

Owl Carousel 2– повністю адаптивна карусель для jQuery/Zeptoза допомогою сенсорних екранів.

8. UtilCarousel

UtilCarousel– плагін jQuery-каруселі з плавними переходами, реалізованими за рахунок апаратного прискорення. Він цілком адаптивний. Плагін підтримує сенсорні екрани, і в ньому використовується тривимірна CSS3-Анімація з апаратним прискоренням. Завдяки цьому плагін добре виглядатиме як на настільних ПК, так і на мобільних пристроях. Керувати UtilCarouselможна за допомогою дотиків, навігації або коліщатка миші.

9. Slick

Slickє адаптивною jQuery-карусель, де є все, що може знадобитися.

10. CodingJack 3D Carousel

Ця карусель підтримується пристроями на iOSі Androidта оснащена функціоналом сенсорного перегортання. Відмінно виглядає на планшетах та смартфонах.

11. jQuery Slideshow

jQuery Slideshowє карусель і слайдер з підтримкою управління жестами на сенсорних пристроях. Архів плагіна важить всього 2 кілобайти.

12. FlimRoll

FlimRoll– мініатюрна jQuery-карусель, яка фокусує увагу користувача на певному об'єкті, розміщуючи його в центрі екрана.

13. Tikslus

Tikslusявляє собою повністю адаптивну карусель на jQueryз безліччю функцій та властивостей. Висока адаптивність плагіна дозволяє не вказувати розміри зображень. Крім того, варто відзначити підтримку довільної анімації, заснованої на CSS3-Класах. Tikslusможна використовувати з плагіном Jquery Mobile.

14. Scrollbox

Scrollbox- Простий, мініатюрний jQuery-плагін, який перетворює списки на карусель або рядок, що біжить.

15. Sky Touch Carousel

Sky Touch Carousel- плагін jQuery-каруселі з багатим набором функцій Плагін адаптивний, підтримує сенсорні екрани, і при цьому працює швидко та плавно. Налаштування дозволяють змінювати зовнішній виглядкаруселі за допомогою CSS.

16.

– гнучкий jQuery-плагін для створення слайд-шоу чи каруселів. Він має безліч налаштувань, включаючи типи переходів, вирівнювання зображень та швидкість перемикання кадрів.

1. jQuery карусель "clickCarousel"

Блок з прокручуванням анонсів новин. Для прокручування блоків використовуються стрілки ліворуч/праворуч. В архіві карусель у двох стильових оформленнях: світлому та темному.

1. jQuery карусель, плагін "carouFredSel"

Акуратні свіжі карусель зображень на jQuery.

4. jQuery плагін: карусель «Elastislide»

5. Плагін «TinyCarousel»

Відмінні слайдери контенту у вигляді каруселі зображень із застосуванням jQuery. На демонстраційній сторінці описано, як прикрутити цю карусель до свого сайту.

Плагін «Slider Kit», легка карусель з у різний спосібпрокручування.

7. javascript карусель

8. jQuery плагін «Grid Navigation Effects»

Оригінальна навігація між мініатюрами зображень. Щоб переглянути ефект справа на демонстраційній сторінці, натисніть кнопки «Вгору» та «Вниз». У цьому jQuery рішенні також передбачений ефект при наведенні курсору на мініатюру та прокручування за допомогою колеса миші.

9. Легка карусель

10. Карусель із блоків «Easy Paginate»

jQuery плагін"Easy Paginate". Кожен прямокутний блок є звичайним пунктом списку li, при цьому якщо пунктів більше трьох, то щоб переглянути їх все необхідно скористатися навігацією, подібною до слайдера (за допомогою стрілок «вперед», «назад» і за допомогою навігаційних кнопок внизу).

11. Вертикальний ротатор "Vertical Ticker"

Вертикальний ротатор jQuery: автоматичне прокручування контенту на сторінці. Передбачені кнопки навігації, а також можливість зупинити ротацію та запустити її знову. При наведенні курсору миші рух зупиняється. На рівні HTML розмітки блоки, що прокручуються, представлені звичайними пунктами списку li.

12. javascript CSS прокручується область

javascript рішення «TinyScroller» для створення області, що прокручується, поміщеної в контейнер DIV.

13. jQuery плагін "Smooth Div Scroll"

Плагін для реалізації горизонтального прокручування вмісту в певній області. При наведенні курсору миші на лівий або правий край області починається прокручування.

Навігація між слайдами з контентом може здійснюватися за допомогою стрілок або натискання на мініатюру. Знизу є кнопка "Show", що дозволяє приховати/показати мініатюри або повний опис слайду.

15. Ротатор контенту "Circular Content Carousel"

17. Скроллер

Блок із скроллером, що з'являється при наведенні курсору. Прокручувати вміст можна як за допомогою лінії прокручування, так і за допомогою колеса миші.

Подібне jQuery рішення було зроблено під враженням від такого ефекту на сайті Apple. Розробники цієї корпорації завжди знаходили цікаві рішення, якими надихалися веб-майстри з усього світу. Для демонстрації плагіна виберіть із якоїсь категорії зі списку.

19. Приголомшливий слайдер

Слайдер генерується автоматично. Дані з назвою товару, описом, посиланням та адресою зображення беруться із файлу slider.db.txt. Технології, що використовуються: CSS, PHP, jQuery.

20. Ротація блоків з використанням jQuery

Щоб переглянути ефект ротації блоків, натисніть на один з маленьких прямокутників на демонстраційній сторінці

Плагін для прокручування контенту, наприклад, можна використовувати для показу останніх новинабо для показу Twitter літні на сайті.

22. Динамічний блок «Відгуки клієнтів»

Автоматична ротація вмісту блоку. Технології, що використовуються: PHP, XML, CSS, jQuery.

Цей плагін перетворює пункти списку (ul li) в елементи jQueryкаруселі.

26. javascript карусель «ImageFlow»

Зображення легко прокручувати за допомогою колеса миші.

27. Прокручування контенту

Компактний блок з анонсом останніх матеріалів на сайті чи новин. У лівій колонці відображається список з коротких анонсів останніх новин. При виборі одного з них у правій колонці відображається більше докладний описта посилання на прочитання повного тексту публікації. Реалізовано за допомогою jQuery.

Скролуються зображення з посиланнями, при наведенні мишки прокручування зупиняється та з'являється панель навігації. При наведенні мишки на зображення відображається також її назва між кнопками управління. Дуже красиво виглядає на сторінці

33. Прокручування вмісту, Mootools плагін «Scrollbar»

Прокручування здійснюється як за допомогою лінії прокручування, так і за допомогою колеса миші.

Так, тема досить-таки заїжджена. Але все ж таки, знайти те, що дійсно потрібно, часто складно. Усі пропонують сильно наворочені скрипти, з безліччю зайвого функціоналу. І зазвичай це вже стислі плагіни.

Тому я запропоную свій альтернативний варіант простої каруселі на jQuery.

Вона може використовуватися як карусель зображень, так і карусель новин або будь-якого іншого контенту =)

Єдиний невеликий наворот, що я собі дозволив, - це тінь біля блоку каруселі.

UPD: 6.07.2014

Виглядатиме воно приблизно так:
ДЕМО Завантажити

Структура набуде наступного вигляду:

Опишемо стилі:

Carousel (max-width: 1080px; /* ширина всього блоку */ margin: 50px auto; width:100%; ) .carousel-wrapper ( margin: 10px 30px; /* відступи для стрілок */ overflow: hidden; /* приховуємо вміст, що виходить за рамки основної області */ position:relative; ) .carousel-items ( width: 10000px; /* встановлюємо більшу ширину для набору елементів */ position: relative; /* позиціонуємо блок щодо основної області каруселі */ ) -block ( float: left; /* вибудовуємо всі елементи каруселі в ряд */ width: 250px; /* задаємо ширину кожного елемента */ padding: 10px 10px 10px 0px; /* робимо оступи, щоб елементи не зливались */ ) .carousel -block img( display:block; ) /*********** BUTTONS ***********/ .carousel-button-left a, .carousel-button-right a( width: 25px; height: 36px; position: relative; top: 80px; cursor: pointer; text-decoration: none; ) . left.png); ) .carousel-button-right a( float: right; background: url(../images/carousel-right.png); ) /*********** SHADOW ***********/ .shadow( box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6); )

І, нарешті, як воно має працювати:

//Обробка кліка на стрілку праворуч $(document).on("click", ".carousel-button-right",function()( var carusel = $(this).parents(".carousel"); right_carusel(carusel) );return false; )); //Обробка кліка на стрілку вліво $(document).on("click",".carousel-button-left",function()( var carusel = $(this).parents(".carousel"); left_carusel(carusel) );return false; )); function left_carusel(carusel)( var block_width = $(carusel).find(".carousel-block").outerWidth(); $(carusel).find(".carousel-items .carousel-block").eq(- 1).clone().prependTo($(carusel).find(".carousel-items")); $(carusel).find(".carousel-items").css(("left":"-" +block_width+"px"));$(carusel).find(".carousel-items .carousel-block").eq(-1).remove(); $(carusel).find(".carousel-items" ).animate((left: "0px"), 200); ) function right_carusel(carusel)( var block_width = $(carusel).find(".carousel-block").outerWidth(); (".carousel-items").animate((left: "-"+ block_width +"px"), 200, function()( $(carusel).find(".carousel-items .carousel-block")). eq(0).clone().appendTo($(carusel).find(".carousel-items")); $(carusel).find(".carousel-items .carousel-block").eq(0) .remove(); $(carusel).find(".carousel-items").css(("left":"0px")); )); ) $(function() ( //Розкоментуйте рядок нижче, щоб включити автоматичне прокручування каруселі auto_right(".carousel:first"); )) // Автома тичне прокручування function auto_right(carusel)( setInterval(function()( if (!$(carusel).is(".hover"))) right_carusel(carusel); ), 3000) ) // Навели курсор на карусель $(document).on("mouseenter", ".carousel", function()($(this).addClass("hover"))) //Прибрали курсор з каруселі $(document).on("mouseleave", ".carousel", function()($(this).removeClass("hover"))))

Відповідно, тіню можна прибрати. А для застосування потрібно всього лише в css замінити розмір основного блоку і вкладених блоків, що "скроляться". Також дуже легко зациклити цей процес, щоб він скролився автоматично (у даному випадку, достатньо прокоментувати виклик функції auto_right). Тобто зробити із цієї простенької галереї можна все, що потрібно в рамках поставленого завдання!

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

/* Тут починається наша карусель. Блок.carousel-wrapper спозиційований щодо, обгортки.carousel-item абсолютно. . */ .carousel-wrapper( position:relative; /* Абсолютно спозиційовані блоки отримують висоту і ширину від батька. Ми зробили їх прозорими за замовчуванням, і потім вони будуть плавно з'являтися за натисканням на посилання.arrow-prevі.arrow-next. * / .carousel-item( position:absolute; top:0; bottom:0; left:0; right:0; padding:25px50px; opacity:0; transition:all0.5sease-in-out; /* Помітили padding зліва праворуч по 50px?Таким чином ми можемо позиціонувати наші посилання!Кожна буде по 50px шириною.Окрім того, я використовую порожні посилання з фоновим малюнком таким чином, що посилання виглядають як стрілки.Перевірте, чи змінили ви URL посилань з оригінальним URL, щоб ваші посилання не були просто прозорими прямокутниками.*/ .arrow( position:absolute; top:0; display:block; width:50px; 0);background:url("/carousel-arrow-dark.png")50%50%/20pxno-repeat; /* Давайте повернемо нашу стрілку наліво. А другу направо. ку я використовую те саме зображення для стрілки, я повертаю його на 180 градусів. */ &.arrow-next( right:0; -webkit-transform:rotate(180deg); transform:rotate(180deg); ) ) /* Мені дуже подобається, як слайди каруселі виглядають на темному тлі, і якщо блок.carousel -item має клас "light", ми змінимо його текст на білий і використовуємо білі стрілки замість сірих. Перевірте ще раз, чи правильно вказано шлях до зображення стрілки */ &.light( color:white; .arrow( background:url("/carousel-arrow-light.png")50%50%/20pxno-repeat; ) ) /* Напишемо медіа-запит для зміни розміру стрілок на пристроях з меншим розміромекрана. */ @media (max-width: 480px) (. arrow, &. Таким чином, ми позбавляємося постійного перестрибування браузера в самий верх каруселі при кожному натисканні на стрілки. Ця властивість діє для будь-яких елементів, ідентифікатор яких починається на "target-item". */ (display:none; ) /* Вище ми зробили всі наші слайди каруселі прозорими, а це означає, що під час завантаження каруселі ми отримуватимемо замість неї велике порожнє поле. Змінимо значення прозорості першого слайда на 1 для відображення. Так само встановлюємо z-index значення 2, позиціонуючи його вище за інші слайди. */ .item-1( z-index:2; opacity:1; ) /* Але нам не потрібно, щоб перший слайд завжди мав значення прозоростіopacity: 1; інакше нам доведеться пробиратися через цей слайд під час ротації інших. */ *:target~.item-1( opacity:0; ) /* ..але якщо #target-item-1 у фокусі, і ми хочемо показати перший слайд, тоді вибираємо його за допомогою значка ~ і встановлюємо прозорість знову в 1:-) */ #target-item-1:target~.item-1( opacity:1; ) /* Якщо інші target-item-# у фокусі, вибираємо їх використовуючи ~ селектор, плавно показуємо, і розміщуємо їх зверху за допомогою z-index: 3. Тут ви можете додати додаткові span з ідентифікатором target-item, якщо їх у вас буде більше трьох. Може відразу і додати 10 штук. */

Одним із ефективних способівпривернення уваги користувачів на сторінці сайту це створення анімації, що рухається. Елементи анімації допомагають більш наочно розповісти та показати користувачам про ваш продукт. Останнім часом велику популярність отримали панелі, що виїжджають, а також ряд інших ефектів, які з'являються при прокручуванні або натисканні на картинку. Вони також відомі як слайдери, каруселі та панелі, що виїжджають. У цій статті йдеться про створення адаптивного слайдеракарусельного типу, з плавним ефектом автопрокручування.

На сьогоднішній день в мережі представлено сотні оглядів з посиланнями на готові рішення, проте більшість з них містять безліч функцій, що не використовуються, які значно знижують працездатність слайдера, так само як і сповільнюють завантаження сайту в цілому. Професійні веб-розробники завжди прагнули створювати гнучкі в налаштуванні програмні продукти, з низьким порогом входження додаткових бібліотек та плагінів. Саме тому у роботі нашого скрипта задіяні мінімальні вимогидля організації такого слайдера Функціонал роботи дозволяє задавати інтервал перемикання, швидкість, а також вибір певного слайду. Нижче наведено ряд пермінних, які регулюють роботу самого слайдера.

timeList- швидкість перемикання слайду

TimeView- час показу

RadioBut- кнопки під слайдом для швидкої навігації. За промовчанням значення true, якщо використовувати false, то кнопки зникнуть.

А тепер давайте приступимо! Створимо та відкриємо файл index.htm

У поданому коді як бачимо нічого складного немає, slider-wrapвизначає загальне становищеі вирівнює слайдер посередині екрана. Параметр active-slideзадає розмір та висоту картинки згідно з її довжиною. І sliderпоказує лише активну картинку.

Тепер створимо та відкриємо файл style.cssі пропишемо туди потрібну нам розмітку:

@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto"); body ( color: #4f4f5a; font-family: "Roboto", sans-serif; font-size: 16px; padding: 0; margin: 0; ) #slider-wrap( max-width:800px; margin: 0 auto; margin-top: 80px; ) #active-slide ( width: 100%; display: table; position: relative; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms- user-select: none; -o-user-select: none; user-select: none; padding: 0;-webkit-transition: 1s; -o-transition: 1s; transition: 1s; -out; transition-timing-function: ease-in-out; ) .slide( width: calc(100%/4); list-style: none; display: inline; float: left; ) . 100%; . :hidden;text-indent:-9999px;background:url(radioBg.p ng) center bottom no-repeat; ) .Radio-But .ctrl-select:hover ( cursor:pointer; background-position:center center; ) .Radio-But .ctrl-select.active ( background-position:center top; ) #prewbutton, #nextbutton ( display :block;width:40px;height:100%;position:absolute;top:0;overflow:hidden;text-indent:-999px;background:url("arrowBg.png") z-index:3; outline:none !important; ) #prewbutton ( left:10px; ) #nextbutton ( right:10px; nextbutton:hover ( opacity:1; )

У якості стилю slider-wrapпропишіть width- максимальну довжину ваших картинок.

У якості стилю #slider (width: calc(100% * 4); )і .slide (width: calc(100%/4); )вкажіть кількість картинок у вашому слайдері. У прикладі їх 4.

Якщо стрілки вперед/назад заважають видимості вашого слайдера, їх можна зробити невидимими і з'являтися вони будуть при наведенні. Для цього у параметрах prewButі nextBut, задайте властивості opacity значення 0.

Тепер створимо та відкриємо наш файл slider.js, в якому буде код слайдера. Не забудьте підключити бібліотеку jQuery.

$(document).ready(function() ( var timeList = 700; var TimeView = 5000; var RadioBut = true; var slideNum = 1; var slideTime; slideCount = $("#slider .slide").length; var animSlide = function(arrow)( clearTimeout(slideTime); if(arrow == "next")( if(slideNum == slideCount) ( slideNum=1; ) else(slideNum++) translateWidth = -$("#active-slide") .width() * (slideNum - 1); $("#slider").css(("transform": "translate(" + translateWidth + "px, 0)")); ) else if(arrow == " prew") ( if(slideNum == 1) ( slideNum=slideCount; ) else(slideNum-=1) translateWidth = -$("#active-slide").width() * (slideNum - 1); $(" #slider").css(("transform": "translate(" + translateWidth + "px, 0)")); )else( slideNum = arrow; translateWidth = -$("#active-slide").width( ) * (slideNum -1); $("#slider").css(("transform": "translate(" + translateWidth + "px, 0)")); ) $(".ctrl-select.active" ).removeClass("active"); $(".ctrl-select").eq(slideNum - 1).addClass("active"); ) if(RadioBut)( var $linkArrow = $("<>") .prependTo("#active-slide"); $("#nextbutton").click(function()( animSlide("next"); return false; )) $("#prewbutton").click(function ()( animSlide("prew"); return false; )) ) var adderSpan = ""; $(".slide").each(function(index) ( adderSpan += " " + index + ""; }); $("

Функція animSlideприймає три види значень: next, prew, числове значення. Параметр next перемикає наступний слайд, prew повертає попередній, а числове значення - це заданий слайд, вибраний через радіо кнопки під слайдом.

У представленому слайдері використовувалися зображення з веб-ресурсу https://pixabay.com/.