Css слайдер із автоперемиканням. Адаптивний слайдер без JavaScript на CSS3. Ключові кадри для CSS слайдера

Головна / Додатковий функціонал

Я нікому не відкрию Америку, не здивую публіку новим фокусом і не підірву мозок тим, хто в CSS3 плаває як аквалангіст. Розкажу простий спосіб, як створити слайдер за допомогою простих функцій CSS3 без використання javascript.

1. Верстаємо основу

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

Тут ми бачимо, що загальний блок "wrapper" містить у собі блок "slider" з 5-ма слайдами, всередині яких можна помістити будь-який html-код, який розташовуватиметься на слайді. Перед загальним блоком знаходяться радіо-кнопки, які згодом будуть приховані, щоб створити для них власну навігаційну панель по слайдах, з якою нам допоможуть лейбли в блоці «controls».

2. Оформляємо слайдер

Тут ми зупинимося та трохи розглянемо css. Зверніть увагу, що для деяких властивостей проставлені кросбраузерні префікси, щоб усі сучасні браузери могли їх розуміти.

* ( margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box ; ) body ( background-image: url(http://habrastorage.org/files/996/d76/d04/996d76d0410d422fa54cc433ce7ead2a.png); )
З оформленням фону та загальними стилями все зрозуміло.

Wrapper ( height: 350px; margin: 100px auto 0; position: relative; width: 700px; ) .slider ( background-color: #ddd; height: inherit; overflow: hidden; position: relative; width: inherit; -webk box-shadow: 0 0 20px rgba(0, 0, 0, .5);-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .5); 20px rgba(0, 0, 0, .5); box-shadow: 0 0 20px rgba(0, 0, 0, .5);
Загальний блок і слайдер мають однакові розміри, щоб ідеально контролювати положення слайдера на сторінці. Поки відсутні слайди, слайдер ми тимчасово пофарбували у світло-сірий колір.

Wrapper > input ( display: none; )
Радіо-кнопки приховуємо. Вони нам знадобляться пізніше.

Результат на даний момент такий:

3. Оформляємо слайди

Тут ми пропишемо загальні стилі для слайдів і кожен слайд окремо:

Slides ( height: inherit; position: absolute; width: inherit; ) .slide1 ( background-image: url(http://habrastorage.org/files/3f2/628/bd5/3f2628bd58c8452db516195cb0c9b) -image: url(http://habrastorage.org/files/3e1/95d/c7f/3e195dc7f5a64469807f49a14f97ba0e.jpg); ) .slide3 ( background-image: url(http://habrastorage.org/files/6 d4f/6636b1d4f8e643d29eab8c192fc1cea3.jpg);) .slide4 ( background-image: url(http://habrastorage.org/files/e59/424/c04/e59424c046be4dab89jpg : url(http: //habrastorage.org/files/53c/ff6/c1c/53cff6c1caf842368c70b8ef892d8402.jpg);
Для всіх слайдів ми вказали абсолютне позиціонування, щоби можна було грати з ефектами появи. Розміри слайдів беруться із розміру самого слайдера, щоб не доводилося їх прописувати у кількох місцях.

4. Робимо навігацію по слайдах

Так як радіо-кнопки приховані і потрібні нам як перемикачі, оформляємо підготовлені лейбли:

Wrapper .controls ( left: 50%; margin-left: -98px; position: absolute; ) .wrapper label ( cursor: pointer; display: inline-block; height: 8px; margin: 25px 12px 0 16px; width: 8px;-webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; 2px solid #ddd; content: " "; display: block; height: 12px; left: -4px; position: absolute; top: -4px; -radius: 50%; -o-border-radius: 50%; border-radius: 50%;
Навігацію ми робимо класичною. Кожна кнопка є область у вигляді кола, всередині якого при активному слайді порожня область частково забарвиться. Поки що ж у нас наступний результат:

5. Вчимо кнопки натискатися

Настав час навчити слайдер перемикати слайди після натискання на певну кнопку:

Wrapper label ( cursor: pointer; display: inline-block; height: 8px; margin: 25px 12px 0 16px; position: relative; width: 8px; -webkit-border-radius: 50%; -moz-border-radius: 50 %;-o-border-radius: 50%; border-radius: 50%;-webkit-transition: background ease-in-out .5s; transition: background ease-in-out .5s; transition: background ease-in-out .5s; ) .wrapper label:hover, #slide1:checked ~. checked ~ .controls label:nth-of-type(2), #slide3:checked ~ .controls label:nth-of-type(3), #slide4:checked ~ .controls label:nth-of-type(4) , #slide5:checked ~ .controls label:nth-of-type(5) ( background: #ddd; )
До оформлених кнопок навігації додаємо плавне фарбування всередині них. Також додаємо умови, за яких активна кнопка та кнопка, на яку навели курсор, плавно фарбуватиметься. Наші власні радіокнопки готові:

6. Пожвавлюємо слайдер

Ну, а тепер робимо так, щоб слайди нарешті перемикалися:

Slides ( height: inherit; opacity: 0; position: absolute; width: inherit; z-index: 0; -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -o-transform: scale (1.5), transform: scale(1.5); -in-out .5s;-o-transition: transform ease-in-out .5s, оpacity ease-in-out .5s; ) #slide1:checked ~ .slider > .slide1, #slide2:checked ~ .slider > .slide2, #slide3:checked ~ .slider > .slide3, #slide4:checked ~ .slider > .slide4, #slide .slider > .slide5 ( opacity: 1; z-index: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale( 1);
У загальні стилі слайдів ми додаємо властивості, за яких усі слайди стають невидимими і йдуть на задній план. Також ми додали невелике збільшення слайдів, поки вони невидимі для надання цікавої появи у слайдері.

Результат можна побачити тут.

1. Чудове jQuery слайд-шоу

Велике ефектне слайд-шоу із використанням jQuery технологій.

2. jQuery плагін "Scale Carousel"

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

3. jQuery плагін "slideJS"

Слайдер зображень із текстовим описом.

4. Плагін "JSliderNews"

5. CSS3 jQuery слайдер

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

6. Симпатичний jQuery слайдер «Presentation Cycle»

jQuery слайдер з індикатором завантаження зображень. Передбачено автоматичну зміну слайдів.

7. jQuery плагін «Parallax Slider»

Слайдер з об'ємним ефектом фону. Родзинка цього слайдера рух фону, який складається з декількох шарів, кожен з яких прокручується з різною швидкістю. У результаті виходить імітація об'ємного ефекту. Виглядає дуже красиво, ви можете самі переконатися в цьому. Більш плавно ефект відображається в таких браузерах як Opera, Google Chrome, IE.

8. Свіжий, легкий jQuery слайдер "bxSlider 3.0"

На демонстраційній сторінці розділу «examples» ви зможете знайти посилання на всі можливі варіанти використання цього плагіна.

9. jQuery слайдер зображень, плагін "slideJS"

Стильний jQuery слайдер, безумовно, зможе прикрасити ваш проект.

10. jQuery плагін слайд-шоу «Easy Slides» v1.1

Простий у використанні JQuery плагін для створення слайд-шоу.

11. Плагін «jQuery Slidy»

Легкий jQuery плагін у різному виконанні. Передбачено автоматичну зміну слайдів.

12. jQuery CSS галерея з автоматичною зміною слайдів

Якщо відвідувач протягом певного часу не натисне на стрілки "Вперед" або "Назад", то галерея почне прокручуватися автоматично.

13. jQuery слайдер "Nivo Slider"

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

14. jQuery слайдер "MobilySlider"

Свіжий слайдер. jQuery слайдер з різними ефектами зміни зображень.

15. jQuery Плагін «Slider²»

Легкий слайдер із автоматичною зміною слайдів.

16. Свіжий javascript слайдер

Слайдер із автоматичною зміною зображень.

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

jQuery CSS слайдер зображень за допомогою плагіна NivoSlider .

19. jQuery слайдер «jShowOff»

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

20. Плагін "Shutter Effect Portfolio"

Свіжий jQuery плагін для оформлення портфоліо фотографа. У галереї реалізовано цікавий ефект зміни зображень. Фотографії змінюють одна одну з ефектом, схожим на роботу затвора об'єктива.

21. Легкий javascript CSS слайдер "TinySlider 2"

Реалізація слайдера зображень за допомогою javascript і CSS.

22. Неймовірний слайдер «Tinycircleslider»

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

23. Слайдер зображень на jQuery

Легкий слайдер "Slider Kit". Слайдер представлений у різному виконанні: вертикальний та горизонтальний. Також реалізовані різні види навігації між зображеннями: за допомогою кнопок «Вперед» та «Назад», за допомогою колеса миші, за допомогою кліку миші по слайду.

24. Галерея з мініатюрами "Slider Kit"

Галерея "Slider Kit". Прокручування мініатюр здійснюється як у вертикальному, так і горизонтальному напрямку. Перехід між зображеннями здійснюється за допомогою: колеса миші, натискання миші або наведення курсору на мініатюру.

25. jQuery слайдер вмісту "Slider Kit"

Вертикальний та горизонтальний слайдер контенту на jQuery.

26. jQuery слайд-шоу "Slider Kit"

Слайд-шоу з автоматичною зміною слайдів.

27. Легкий професійний javascript CSS3 слайдер

Акуратний слайдер на jQuery та CSS3, створений у 2011 році.

jQuery слайд-шоу з мініатюрами.

29. Просте jQuery слайд-шоу

Слайд-шоу з навігаційними кнопками.

30. Неймовірне слайд-шоу jQuery «Skitter»

jQuery плагін "Skitter" для створення приголомшливого слайд-шоу. Плагін підтримує 22 (!) види різних анімаційних ефектів при зміні зображень. Може працювати з двома варіантами навігації за слайдами: за допомогою номерів слайдів та за допомогою мініатюр. Обов'язково подивіться демонстрацію, дуже якісна знахідка. Технології, що використовуються: CSS, HTML, jQuery, PHP.

31. Слайд-шоу "Awkward"

Функціональне показ слайдів. У вигляді слайдів можуть виступати: прості зображення, зображення з підписами, зображення з підказками, відео-ролики. Для навігації можна використовувати стрілки, посилання на номери слайдів та клавіші праворуч/ліворуч на клавіатурі. Слайд-шоу виконано у кількох варіантах: з мініатюрами та без них. Для перегляду всіх варіантів пройдіть посилання Demo #1 - Demo #6 розташованим зверху на демонстраційній сторінці.

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

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

34. "Flux Slider" слайдер на jQuery та CSS3

Новий jQuery слайдер. Декілька класних анімованих ефектів при зміні слайдів.

35. jQuery плагін «jSwitch»

Анімована галерея jQuery.

Легке слайд-шоу на jQuery з автоматичною зміною слайдів.

37. Нова версія плагіна "SlideDeck 1.2.2"

Професійний слайдер контенту. Можливі варіанти автоматичної зміни слайдо, а також варіант з використанням колеса миші для переходу між слайдами.

38. jQuery слайдер «Sudo Slider»

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

39. jQuery CSS3 слайд-шоу

Слайд-шоу із мініатюрами підтримує режим автоматичної зміни слайдів.

40. jQuery слайдер «Flux Slider»

Слайдер з безліччю ефектів зміни зображень.

41. Простий jQuery слайдер

Стильний слайдер зображень на jQuery.

Працюючи над книгою про jqueryя зіткнувся з тим, що багато моїх передплатників просили мене розповісти в ній як на jquery написати скрипт слайдера. Пардон, дорогі друзі! На дворі XXI століття і, на наше щастя, нам доступні всі принади CSS3, що дозволяють реалізувати подібні речі без жодного рядка javascript.

Частина 1.

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

Звичайно, ви можете поцікавитися: навіщо винаходити велосипед, якщо повно реалізацій слайдерів на JavaScript? Ось мої аргументи:

CSS ефекти працюють швидше. Це добре помітно на мобільних пристроях.
Щоб створити слайдер, не потрібні навички програмування.

Отже, для нашого прикладу вам потрібно чотири зображення, хоча у своєму проекті ви можете зробити смужку з такою кількістю зображень, яку вам потрібно. Єдиною умовою є те, що всі зображення мають бути однакового розміру. Ще, забув вам сказати, наш слайдер буде адаптивним (так-так, адаптивна верстка, ви не помилилися) і ви зможете використовувати його у будь-яких своїх проектах для будь-яких пристроїв. Але, досить балачки, у мене вже руки сверблять написати мега-код. Почнемо з HTML:

Я залишив порожнім атрибут alt , щоб заощадити місце, Ви можете його заповнити самі, виходячи з ваших SEO запитів і для інформування користувачів, що відключили в браузері показ картинок. Хочу також звернути вашу увагу на те, що перше зображення ( alladin.jpg) буде присутня і в кінці смуги, що дозволить нашому слайдеру прокручуватися циклічно без ривків.

Для зручності width становить 80% вікна, а max-width відповідає розміру кожної окремої фотографії (1000 пікселів у нашому прикладі), оскільки нам не потрібне розтягнуте зображення:

Slider ( width: 80%; max-width: 1000px; )

У нашому коді CSS ширина figure виражена у відсотковому відношенні до div , в якому вона розташована. Тобто якщо смуга зображень містить п'ять фотографій, а div видає всього одне, ширина figure збільшується в п'ять разів, що становить 500% ширини контейнера div:

Параметр font-size: 0 викачує з figure все повітря, видаляючи вільний простір навколо зображень та між ними. position: relative дозволяє легко переміщати figure під час анімації.

Нам потрібно порівну розділити фотографії усередині смуги зображень. Формула дуже проста: якщо ми припустимо, що ширина figure становить 100%, кожне зображення повинне займати 1/5 горизонтального простору:

Виникає потреба у використанні наступного CSS правила:

Imagestrip img ( width: 20%; height: auto; )

Тепер змінимо властивість overflow для div:

Slider ( width: 80%; max-width: 1000px; overflow: hidden )

Нарешті, треба зробити так, щоб смуга зображень переміщалася зліва направо. Якщо ширина контейнера div складає 100%, кожен рух смуги зображень ліворуч вимірюватиметься у відсоткових частках цієї відстані:

@keyframes slidy ( 20% ( left: 0%; ) 25% ( left: -100%; ) 45% ( left: -100%; ) 50% ( left: -200%; ) 70% ( left: -200 %; ) 75% ( left: -300%; ) 95% ( left: -300%; ) 100% ( left: -400%; ) )

Кожне зображення на слайдері буде укладено в div і переміщатиметься на 5%.

Slider figure ( position: relative; width: 500%; animation: 30s slidy infinite; font-size: 0; padding: 0; margin: 0; left: 0; )

Частина 2.

Ми зробили мега-крутий слайдер без javascript. А давайте, перш ніж піти спочивати на лаврах, додамо до нього кнопки керування. Точніше, не в нього (з ним мені вже ліньки поратися), а створимо новий.

Так, наш HTML код:

Тепер подбаємо про анімацію наших слайдів. На жаль, для різного числа слайдів вона відрізнятиметься:

/* для слайдера з двох слайдів */ @keyframes slider__item-autoplay_count_2 ( 0%(opacity:0;) 20%(opacity:1;) 50%(opacity:1;) 70%(opacity:0;) 100%( opacity:0;) ) /* для слайдера з трьох слайдів */ @keyframes slider__item-autoplay_count_3 ( 0%(opacity:0;) 10%(opacity:1;) 33% (opacity:1;) 43% (opacity: 0;) 100%(opacity:0;) ) /* для слайдера з чотирьох слайдів */ @keyframes slider__item-autoplay_count_4 ( 0%(opacity:0;) 8% (opacity:1;) 25% (opacity:1; ) 33% (opacity:0;) 100%(opacity:0;) ) /* для слайдера з п'яти слайдів */ @keyframes slider__item-autoplay_count_5 ( 0%(opacity:0;) 7% (opacity:1;) 20 %(opacity:1;) 27% (opacity:0;) 100%(opacity:0;) )

Сумно, чи не так? Крім того, не забудьте, що для Опери, Хрома, ІЕ, та Мозили потрібно написати все те саме, але з відповідним префіксом. Тепер напишемо код для анімації наших слайдів (тут і далі буде показаний код для трьох слайдів. Код для більшої кількості сайтів Ви можете побачити в коді прикладу):

Slider_count_3 .item ( -moz-animation: slider__item-autoplay_count_3 15s infinite; -webkit-animation: slider__item-autoplay_count_3 15s infinite; -o-animation: slider__item-autoplay_count_3 15s infinite; ) .item:nth -of-type(2) ( -moz-animation-delay:5s; -webkit-animation-delay:5s; -o-animation-delay:5s; animation-delay:5s; ) .item:nth-of-type (3) ( -moz-animation-delay:10s; -webkit-animation-delay:10s; -o-animation-delay:10s; animation-delay:10s; )

Як бачите, для першої пари нульове усунення не змінюється. Крім того, усунення не залежить від кількості слайдів, тому його можна описати один раз для максимальної кількості слайдів. Тепер зробимо так, щоб слайди не змінювалися, коли користувач навів курсор миші на наш слайдер:

Slider:hover .item ( -moz-animation-play-state: paused; -webkit-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; )

Зрештою, ми з вами дісталися до перемикання наших слайдів. Як відомо, є ціла низка подій, що дозволяють змінювати властивості елемента за допомогою CSS. Для натискання миші нам можуть допомогти псевдокласи :focus , :target , або :checked в одного з елементів сторінки. Псевдоклас:focus може бути тільки в одного елемента на сторінку, :target засмічує історію браузера і потребує тега ; псевдоклас:checked запам'ятовує стан до відходу зі сторінки, і, у разі радіокнопок, може бути обраний лише один елемент у групі. Скористайтеся цим. Вставимо перед

наступний HTML код

А після

1 2 3

/* Стиль слайдерів у стані "не вибраний" */ .slider .item ~ .item ( opacity: 0.0; ) /* Стиль слайдерів у стані "вибраний" */ .slider input:nth-of-type(1):checked ~ .item:nth-of-type(1), .slider input:nth-of-type(2):checked ~ .item:nth-of-type(2), .slider input:nth-of-type( 3):checked ~ .item:nth-of-type(3), .slider input:nth-of-type(4):checked ~ .item:nth-of-type(4), .slider input:nth- of-type(5):checked ~ .item:nth-of-type(5) ( opacity: 1.0; )

Ми використали перемикання якості opacity слайда-контейнера з картинкою. Це пов'язано з тим, що div-контейнер, на відміну від елемента img, можна помістити будь-яку додаткову інформацію (наприклад, назва слайда). Звичайно, якби ми використовували Javascript, ми могли б скористатися атрибутом data. Але ми з вами домовилися, пам'ятаєте?)) Для слайдів вкажемо властивості transition, щоб перемикання відбувалося плавно, а не ривками.

Slider .item ( -moz-transition: opacity 0.2s linear; -webkit-transition: opacity 0.2s linear; -o-transition: opacity 0.2s linear; transition: opacity 0.2s linear; )

Зупинка анімації всіх слайдів та кнопок при виборі будь-якого слайда здійснимо за допомогою наступного CSS коду:

Slider input:checked ~ .item ( opacity: 0.0; -moz-animation: none; -webkit-animation: none; -o-animation: none; animation: none; )

Для підтримки деяких старих браузерів ми не анімуємо перший слайд, встановивши для нього opacity: 1.0, але при цьому ми зрозуміємо проблему: при плавному перемиканні двох інших слайдів між собою перший слайд просвічує. Для ліквідації цього бага встановлюємо затримку transition-delay для всіх слайдів, окрім обраного, а для нього зробимо z-index більше, ніж у всіх інших слайдів:

Slider .item ( opacity: 1.0; -moz-transition: opacity 0.0s linear 0.2s; -webkit-transition: opacity 0.0s linear 0.2s; .slider input:nth-of-type(1):checked ~ .item:nth-of-type(1), .slider input:nth-of-type(2):checked ~ .item:nth -of-type(2), .slider input:nth-of-type(3):checked ~ .item:nth-of-type(3), .slider input:nth-of-type(4):checked ~ .item:nth-of-type(4), .slider input:nth-of-type(5):checked ~ .item:nth-of-type(5) ( transition: opacity 0.2s linear; -moz-transition : opacity 0.2s linear; -webkit-transition: opacity 0.2s linear; -o-transition: opacity 0.2s linear; z-index: 6;

Щоб слайди не конфліктували з іншими елементами сайту (наприклад, не перекривали меню, що випадає з z-index менш або рівним 6), створюємо свій контекст для блоку

шляхом завдання мінімально, необхідного для видимості, z-index:

Slider ( position: relative; z-index: 0; )

Ось, власне, і все. Залишилося тільки спозиціонувати наші елементи за допомогою нижченаведеного CSS коду і можна радіти:

Slider ( position: relative; z-index:0; ) .slider input ( display: none; ) .slider label ( bottom: 10px; background: #f4f4f5; border: 1px solid #e6e6e6; border-bottom-color: #bfbfbf; border-radius: 4px;box-shadow: inset 0 1px 0 #ffffff, 0 1px 2px #000000; cursor: pointer; font: 14px/27px arial, tahoma; color: #333; ) .slider .selector_list ( position: absolute; bottom: 15px; relative; width:100%; ) .slider .item ~ .item ( position: absolute; top: 0px; left: 0px; )

Ось такий адаптивний слайдер без Javascript на CSS3 у вас має вийти в результаті.

Хочу розповісти простий спосіб створення слайдера без використання JS за допомогою анімації CSS.

1) Для початку напишемо HTML, припустимо, що в слайдері будуть змінювати один одного 4 зображення.

2) Далі оформимо розміри блоку і ще кілька налаштувань, position: relative необхідно для того, щоб створити контекст форматування, далі буде зрозуміло навіщо.

Slider ( width: 500px; height: 300px; margin: auto; margin-top: 25px; border: 1px solid black; position: relative; overflow: hidden; )
3) Також визначимо деякі властивості для самих слайдів:

Slide ( width: 500px; height: 300px; position: absolute; top: 0; left: 0; )
Як видно з CSS, ми розміщуємо всі слайди у верхньому лівому куті слайдера, задаючи таким чином однакову вихідну позицію.

1. Слайд знаходиться на вихідній позиції, демонструється користувачеві

2. Слайд рухається вліво, поки повністю не вийде за кордон слайдера (у слайдера ж, як вище зазначено, overflow: hidden, відповідно слайд не наїжджає на навколишні об'єкти).

5. Слайд спускається вниз на один рівень зі слайдером

6. Слайд рухається на вихідну позицію
Інакше кажучи (кадри поки що назву відповідно до номерів зі списку вище):

@keyframes slide ( from ( top: 0; left: 0; ) 1 ( transform: translate(0px, 0px); ) 2 ( transform: translate(-500px, 0); ) 3 ( transform: translate(-500px, 300px) ); ) 4 ( transform: translate(500px, 300px); ) 5 ( transform: translate(500px, 0); ) to ( transform: (0px, 0px); ) )
5) Отже, зрозуміло, як виглядає траєкторія слайда. Кожен слайд «об'їжджає» довкола свого контейнера – слайдера – і повертається на вихідну. Таким чином, ми можемо нескінченно крутити будь-яку кількість слайдів. Але залишився один нюанс, який є найважливішим у цій схемі – час. Потрібно правильно розрахувати розкадрування анімації за часом та встановити правильну затримку для кожного слайда, щоб не всі одночасно кинулися анімуватися. Щоб зрозуміти, як правильно виставить затримку і розрахувати час анімації, я пішов нижчеописаним шляхом.

Давайте візьмемо позначення кроків з попереднього пункту і розберемося, що відбувається в кожному кроці. По суті, кроки №1, 2 і 6 – це кроки, у яких слайд заходить у видиму область. З того, що слайди повинні рухатися нерозривно і, як би, виштовхувати один одного зі слайдера, можна зробити висновок, що тривалість кроків 2 і 6 повинна дорівнювати. Відразу зазначу, що мені вдалося успішно працювати цю конструкцію тільки за умови, що тривалість першого кроку також дорівнює тривалості 2-го і 6-го. Те, що відбувається під час кроків 3,4 та 5 – по суті, технічні потреби, і для простоти, давайте об'єднаємо ці три кроки в один.

Після спрощення маємо:

1. Крок – слайдер демонструється на вихідній
2. Крок – слайдер зсувається праворуч
3. Крок – слайдер здійснює технічні переміщення
4. Крок - слайдер зсувається вліво, повертаючись на вихідну позицію

Для забезпечення безрозривного показу слайдів, коли слайд приступає до кроку 2, наступний слайд повинен приступити до кроку 4.

Якщо час, коло всієї анімації – t;
Кількість слайдів – n;
Тривалість 3 кроки – y;
Тривалість кроків 1,2 та 4 – x;
Крок затримки анімації для n-слайду – z;
Те:

Y = (100 * n - 150)/n;
x = (100 - y) / 3;
x та y необхідно перевести у відсотки, і тоді:
z = 2*x*t;

Для випадку, коли n = 4, як у прикладі вище, отримуємо:

Третій етап - 62,5%, перший, другий і четвертий - по 12,5%. Крок затримки анімації для кожного наступного слайду – 25%.

Які інтервали будуть між етапами всередині третього кроку – немає значення.

6) Тепер, коли ми всі порахували і знаємо всі величини, можна навести фінальний код.

Анімація, розваги

@keyframes slide ( from ( top: 0; left: 0; ) 12.5% ( transform: translate(0px, 0px); ) 25% ( transform: translate(-500px, 0); ) 36% ( transform: translate(- 500px, 300px);) 37% ( transform: translate(500px, 300px); ) 87.5% ( transform: translate(500px, 0);
Слайди:

Slide1 (background: url(1.jpg); animation-delay: 7.5s; ) .slide2 ( background: url(2.jpg); animation-delay: 5s; ) .slide3 ( background: url(3.jpg); animation-delay: 2.5s; ) .slide4 ( background: url(4.jpg); animation-delay: 0s; )
Загальний CSS для всіх слайдів:

Slide ( width: 500px; height: 300px; position: absolute; top: 0; left: 0; animation-name: slid; animation-duration: 10s; animation-timing-function: linear; animation-iteration-count: infinite; )
Ось, власне, і все! Дякую всім, хто дочитав до кінця.

Слайдери CSS мають деяку перевагу перед слайдерами на Javascript. Однією з таких переваг є швидкість завантаження. Мало того, що зображення для слайдерів використовуються великих розмірів (якщо немає оптимізації під різні екрани), так ще й на завантаження скриптів витрачається деякий час. Але у статті Ви побачите лише слайдери на чистому CSS.

Ось що я знайшов на сайті на тему слайдерів:

1. CSS3 слайдер зображень

Слайдер CSS, який використовує для навігації по слайдах радіокнопки. Ці радіокнопки знаходяться під слайдером. Крім радіокнопок навігація здійснюється за допомогою стрілок зліва і справа. Щоб стежити за тим, яке зображення зараз відображати, використовуються псевдокласи :checked .

2. CSS3 слайдер зображень із мініатюрами

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

3. Галерея на CSS

А ось цей слайдер на CSS відмінно підійде для сторінок, що продають. Як правило, багато веб-розробників при розробці лендингів (продають сторінок) розміщують слайдер на самому початку, щоб у першому екрані (без прокручування) відвідувач відразу бачив усі вигоди, які є для нього на цій сторінці. Крім того, цей слайдер є адаптивним, що також тішить.

4. Слайдер CSS без посилань

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

5. Адаптивний слайдер на CSS3

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

* БОНУСНИЙ СЛАЙДЕР *

Окрім усіх слайдерів, які представлені вище, я хочу порадувати Вас ще одним. Цей слайдер відмінно підходить для створення галереї зображень. Словами не поясниш те, що він робить, тому краще дивіться все на відео: