Как сделать слайдер на javascript

Как сделать слайдер на js

Для создания простого слайдера на JavaScript нам понадобится следующее:

HTML-разметка для слайдера, которая будет содержать контейнер для изображений и кнопки для переключения между ними. Допустим, у нас есть следующий код:

 class="slider">  src="img1.jpg" />  src="img2.jpg" />  src="img3.jpg" />  class="prev">Назад  class="next">Вперед

CSS-стили для слайдера, чтобы задать ему размеры, расположение и другие свойства. Например:

.slider  width: 500px; height: 300px; position: relative; overflow: hidden; > .slider img  width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.5s ease; > .slider img.active  opacity: 1; > .slider button  position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; > .slider .prev  left: 10px; > .slider .next  right: 10px; >

JavaScript-код для слайдера, который будет обрабатывать нажатия на кнопки и переключать изображения. Мы будем использовать массив для хранения изображений и переменную для хранения индекса текущего изображения:

const images = document.querySelectorAll('.slider img'); let currentIndex = 0; function showImage(index)  images[currentIndex].classList.remove('active'); images[index].classList.add('active'); currentIndex = index; > document .querySelector('.slider.controlls') .addEventListener('click', function (event)  if (event.target.classList.contains('prev'))  let index = currentIndex - 1; if (index  0)  index = images.length - 1; > showImage(index); > else if (event.target.classList.contains('next'))  let index = currentIndex + 1; if (index >= images.length)  index = 0; > showImage(index); > >); showImage(currentIndex);

Этот код добавляет обработчик событий на контейнер слайдера и при нажатии на кнопки «Назад» и «Вперед» вызывает функцию showImage , которая меняет классы активности на изображениях и обновляет значение переменной currentIndex .

Как сделать простой слайдер на HTML и JavaScript

Вы сверстали сайт и сделали его красивым с помощью CSS. Осталось добавить интерактива, и можно добавлять проект в портфолио.

«Оживить» на сайте можно что угодно: меню, модальные окна, корзину, пагинацию… В этой статье мы разберём слайдер — посмотрим, как его сделать на чистом JavaScript. Слайдер пригодится для раздела с отзывами, фотографиями сотрудников, изображениями товаров или чего-нибудь ещё — всё зависит только от вашей фантазии и проекта.

☝ Мы покажем лишь один из возможных вариантов. Это не эталонное решение, да в разработке и не бывает единственно верного способа решить задачу. Но код точно работает, поэтому можете скопировать его в свой проект.

Пример простого слайдера на чистом JavaScript

See the Pen Untitled by Feizerr (@feizerr) on CodePen.

Что здесь происходит

Мы ищем в HTML-разметке контейнер слайдера, кнопки и изображения. Записываем всё в переменные.
Находим общее количество слайдов. Затем создаём переменную slideIndex и делаем её равной 0 — это индекс активного слайда
Добавляем обработчики событий на кнопки, чтобы реагировать на клики пользователя.
Когда пользователь нажимает на кнопку .prev-button , мы переключаемся на предыдущий слайд (если текущий слайд не первый) и обновляем отображение слайдера.
Когда пользователь нажимает на кнопку .next-button , переключаемся на следующий слайд (если текущий слайд не последний) и обновляем отображение слайдера.
Функция updateSlider() обновляет отображение слайдера, показывая только текущий слайд и скрывая остальные.
При загрузке страницы мы вызываем updateSlider() , чтобы отобразить первый слайд и настроить слайдер для начала работы.

Этот код можно бесконечно менять и дорабатывать: настроить анимацию, удалить зацикливание или сделать слайдер адаптивным. Или можно использовать наш пример, чтобы понять, как работает слайдер, а затем написать свой код — ещё проще и чище.

Материалы по теме

Стоит ли делать слайдеры на CSS
9 книг по JavaScript для начинающих
Как работают колбэки в JavaScript
Как составлять регулярные выражения
Как сделать список задач с drag & drop

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Читать дальше

ChatGPT не справляется

Притворитесь нейросетью и решите 101 задачку по JavaScript как можно быстрее.

2 ноября 2023

Знакомство с JavaScript

Теперь, когда вы знаете, как создать структуру веб-страницы с помощью HTML и оформить ее стилями с помощью CSS, пришло время оживить её с помощью JavaScript (JS). JavaScript — это мощный язык программирования, который используется для создания интерактивных и динамических веб-сайтов.

Что такое JavaScript?

JavaScript — это язык сценариев, который позволяет вам создавать динамически обновляемый контент, управлять мультимедиа, анимировать изображения и многое другое. Почти все современные веб-сайты используют JavaScript для улучшения пользовательского опыта.

Подключение JavaScript к веб-странице

Вы можете добавить JavaScript в ваш HTML-документ двумя способами:

Встроенный JavaScript: непосредственно в HTML-документ, в тегах :

Внешний JavaScript: подключение внешнего .js файла к HTML-документу:

Основы синтаксиса JavaScript

JavaScript состоит из инструкций, которые выполняются компьютером. Вот пример простого синтаксиса:

var message = "Привет, мир!"; alert(message);

Переменные

Переменные в JavaScript — это контейнеры для хранения данных. Вы можете думать о них как о ящиках, на которых есть имена. Переменные объявляются с помощью ключевых слов var , let и const .

var name = "Алиса"; // Старый способ объявления переменной let age = 25; // Современный способ объявления переменной const pi = 3.14; // Константа, значение которой нельзя изменить

Функции

Функции — это блоки кода, предназначенные для выполнения конкретной задачи. Они могут принимать параметры и возвращать значение.

function sayHello(name) < alert("Привет, " + name); >sayHello("Мир");

События

События в JavaScript позволяют реагировать на действия пользователя. Например, клик мыши или нажатие клавиши.

document.getElementById("myButton").onclick = function() < alert("Кнопка была нажата!"); >;

Условия и циклы

JavaScript также поддерживает условные операторы и циклы для управления потоком выполнения кода.

if (age > 18) < alert("Вы совершеннолетний!"); >else < alert("Вы ещё не совершеннолетний!"); >for (let i = 0; i

Объекты и массивы

Объекты представляют собой коллекции данных, а массивы позволяют хранить упорядоченные коллекции данных.

let person = < name: "Джон", age: 30 >; let numbers = [1, 2, 3, 4, 5];

Отметим, что JavaScript не просто добавляет интерактивность к вашим веб-страницам, он также вносит логику и динамичность в ваш сайт. И вот почему это возможно.

Объекты Document Object Model (DOM)

DOM (объектная модель документа) — описывает структуру документа и позволяет программам изменять структуру, стиль и содержание веб-страниц. JavaScript может использовать DOM для манипуляции элементами и атрибутами.

document.getElementById("demo").innerHTML = "Привет, DOM!";

Обработка событий

События играют ключевую роль в интерактивности веб-сайтов. JavaScript может отслеживать действия пользователя, такие как клики мышью, нажатия клавиш, перемещения мыши и многие другие.

document.getElementById("myButton").addEventListener("click", function() < alert("Кнопка нажата!"); >);

JSON (JavaScript Object Notation)

JSON — это формат обмена данными, легко читаемый как людьми, так и машинами. В JavaScript вы можете легко преобразовывать объекты в JSON и обратно.

let jsonObject = JSON.stringify(< name: "Джон", age: 30 >); let jsObject = JSON.parse(jsonObject);

Асинхронность

JavaScript часто используется для асинхронных операций, таких как загрузка данных из интернета без перезагрузки страницы. Промисы и асинхронные функции ( async/await ) являются современными способами работы с асинхронным кодом.

fetch('https://api.example.com/data') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error));

Замыкания

Замыкания позволяют функции доступ к переменным из области, в которой она была создана, даже после того как эта область перестала существовать. Это мощная концепция в JavaScript для управления приватностью и состоянием.

function createCounter() < let count = 0; return function() < count += 1; return count; >; > const counter = createCounter(); console.log(counter()); // 1 console.log(counter()); // 2

Современный синтаксис ES6+

Современный JavaScript включает множество улучшений синтаксиса и новых возможностей, таких как стрелочные функции, классы, шаблонные строки и деструктуризация.

// Стрелочная функция const greet = name => `Привет, $!`; // Класс class Person < constructor(name) < this.name = name; >sayHello() < return `Привет, $!`; > > // Деструктуризация const < name, age >= < name: "Джон", age: 30 >;

Подводя итог, JavaScript — это только начало вашего путешествия в создание интерактивных веб-сайтов. Продолжайте изучать и экспериментировать, и вскоре вы сможете создавать сложные веб-приложения.

В следующих статьях мы углубимся в различные аспекты JavaScript, включая современный синтаксис ES6+, асинхронное программирование и работу с фреймворками, такими как React или Vue.

1 ноября 2023

Событие onclick в JS на примерах

Интерактивность — ключевой компонент любого современного сайта. И одним из наиболее часто используемых событий для создания интерактивности является событие onclick . В этой статье мы подробно разберёмся, что такое событие onclick , как его использовать и приведем примеры применения.

Событие onclick — это событие JavaScript, которое активируется, когда пользователь кликает на определенный элемент страницы. Это может быть кнопка, ссылка, изображение или любой другой элемент, на который можно нажать.

30 октября 2023

Как перевернуть сайт. Самая короткая инструкция

Не представляем, зачем это может понадобиться, но не могли пройти мимо.

Никакой магии. Мы вызываем JavaScript-функцию rotateBody() , которая применяет свойство transform с значением rotate(180deg) к элементу . Когда вы нажмете на кнопку «Перевернуть», всё, что находится внутри будет повернуто на 180 градусов (то есть, встанет вниз головой)

function rotateBody() < document.body.style.transform = 'rotate(180deg)'; >

Но такой код повернёт страницу только один раз. Если нужно, чтобы она возвращалась обратно при втором клике, усложним код:

let isRotated = false; function rotateBody() < if (isRotated) < document.body.style.transform = 'rotate(0deg)'; document.body.style.direction = "ltr"; >else < document.body.style.transform = 'rotate(180deg)'; document.body.style.direction = "rtl"; >isRotated = !isRotated; >

Надеемся, вы прочитали это описание до того, как нажать на кнопку.

25 октября 2023

Как узнать геолокацию: Geolocation API

Geolocation API позволяет сайтам запрашивать, а пользователям предоставлять свое местоположение веб-приложениям. Геолокация может использоваться для выбора города в интернет-магазине, отображения пользователя на карте или навигации в ближайший гипермаркет.

Основной метод Geolocation API — getCurrentPosition() , но есть и другие методы и свойства, которые могут пригодиться.

16 октября 2023

Что такое localStorage и как им пользоваться

localStorage — это место в браузере пользователя, в котором сайты могут сохранять разные данные. Это как ящик для хранения вещей, которые не исчезнут, даже если вы выключите компьютер или закроете браузер.

До localStorage разработчики часто использовали cookies, но они были не очень удобны: мало места и постоянная передача данных туда-сюда. LocalStorage появился, чтобы сделать процесс более простым и эффективным.

12 октября 2023

Случайное число из диапазона

Допустим, вам зачем-то нужно целое случайное число от min до max . Вот сниппет, который поможет:

function getRandomInRange(min, max)

Math.random () генерирует случайное число между 0 и 1. Например, нам выпало число 0.54 .
(max — min + 1): определяет количество возможных значений в заданном диапазоне. 10 — 0 + 1 = 11 . Это значит, что у нас есть 11 возможных значений (0, 1, 2, . 10).
Math.random () * (max — min + 1): умножает случайное число на количество возможных значений: 0.54 * 11 = 5.94 .
Math.floor (): округляет число вниз до ближайшего целого. Так, Math.floor(5.94) = 5 .
. + min: смещает диапазон так, чтобы минимальное значение соответствовало min . Но в нашем примере, так как min = 0 , это не изменит результат. Пример: 5 + 0 = 5 .
Итак, в нашем примере получилось случайное число 5 из диапазона от 0 до 10.

Чтобы протестировать, запустите:

console.log(getRandomInRange(1, 10)); // Тест

7 сентября 2023

В чём разница между var и let

Если вы недавно пишете на JavaScript, то наверняка задавались вопросом, чем отличаются var и let , и что выбрать в каждом случае. Объясняем.

var и let — это просто два способа объявить переменную. Вот так:

var x = 10; let y = 20;

Переменная, объявленная через var , доступна только внутри «своей» функции, или глобально, если она была объявлена вне функции.

function myFunction() < var z = 30; console.log(z); // 30 >myFunction(); console.log(z); // ReferenceError

Это может создавать неожиданные ситуации. Допустим, вы создаёте цикл в функции и хотите, чтобы переменная i осталась в этой функции. Если вы используете var , эта переменная «утечёт» за пределы цикла и будет доступна во всей функции.

Переменные, объявленные с помощью let доступны только в пределах блока кода, в котором они были объявлены.

if (true) < let a = 40; console.log(a); // 40 >console.log(a); // ReferenceError

В JavaScript блок кода — это участок кода, заключённый в фигурные скобки <> . Это может быть цикл, код в условном операторе или что-нибудь ещё.

if (true) < let blockScoped = "Я виден только здесь"; console.log(blockScoped); // "Я виден только здесь" >// здесь переменная blockScoped недоступна console.log(blockScoped); // ReferenceError

Если переменная j объявлена в цикле с let , она останется только в этом цикле, и попытка обратиться к ней за его пределами вызовет ошибку.

30 августа 2023

Быстрый гайд по if, else, else if в JavaScript

Допустим, вы собираетесь идти на прогулку. Если на улице солнечно, вы возьмёте с собой солнечные очки.

Это можно описать с помощью оператора if .

let weather = "sunny"; if (weather === "sunny")

А если погода не солнечная, а, скажем, дождливая, вы возьмете зонт.

Этот сценарий можно описать с помощью if-else .

let weather = "rainy"; if (weather === "sunny") < console.log("Возьму солнечные очки"); >else

Условный оператор if-else if-else

Теперь представим, что у вас есть несколько вариантов транспорта для дороги на работу: машина, велосипед, общественный транспорт. Выбор будет зависеть от различных условий, например, погоды и времени суток. Логично, что в дождь безопаснее ехать на автобусе, а в хорошую погоду можно прокатиться на машине или велосипеде, если утро и пробки. То есть схема такая:

И всё это очень легко описывается кодом:

let weather = "sunny"; let time = "morning"; if (weather === "rainy") < // если дождь, то только так console.log("Еду на автобусе"); >else if (time === "morning") < // если не дождь и утро console.log("Еду на велике мимо пробок"); >else < // если второе не дождь и не утро console.log("Еду на машине"); >

Ветвление только может показаться сложным, но вообще оно очень логичное, если понять, какие действия после каких условий выполняются. Разберитесь один раз и поймёте на всю жизнь, 100%.

30 августа 2023

Как исправить ошибки SyntaxError в JavaScript

Ошибки SyntaxError появляются, если разработчик нарушил правила синтаксиса JavaScript, например, пропустил закрывающую скобку или точку с запятой. Давайте посмотрим, что означает каждая ошибка и в чём может быть проблема.

Слайдер с точками

Простой вариант слайдера с переключением его элементов посредством нажатия на точки, расположенные по всей ширине и выглядящие как линии.

На днях на codepen увидел интересный слайдер Material Slider Dots и решил сделать похожий, добавив:

Автоматический расчет и расстановку точек
Единый CSS для равного кол-ва слайдов
Возможность размещать несколько слайдеров на одной странице

Код написан для библиотеки jQuery

Пример слайдера с фоновыми изображениями:

HTML:

CSS:

position : relative ;
height : 400px ;
margin : 20px 0 ;
box-shadow : 0 4px 12px rgba ( 0,0,0,0.2 ) , 0 16px 20px rgba ( 0,0,0,0.2 ) ;
overflow : hidden ;
.slider-slides < position : relative ; height : 100% ; transition : transform 0.3s cubic-bezier ( 0.51, 0.92, 0.24, 1 ) ; will-change : transform ; .slider-slide < float : left ; height : 100% ; background-position : 50% 50% ; background-size : cover ; .slider-dots < display : flex ; position : absolute ; bottom : 20px ; left : 20px ; width : calc ( 100% - 40px ) ; .slider-indicator < display : block ; margin : 0 5px ; height : 14px ; background : rgba ( 255, 255, 255, 0.5 ) ; border-radius : 50px ; cursor : pointer ; .slider-indicator < position : absolute ; background : white ; width : auto ; box-shadow : 0 4px 12px rgba ( 0,0,0,0.2 ) , 0 16px 20px rgba ( 0,0,0,0.2 ) ; .slider-indicator-left <

transition : left 0.3s cubic-bezier ( 0.51, 0.92, 0.24, 1.15 ) , right 0.3s 0.1s cubic-bezier ( 0.51, 0.92, 0.24, 1.15 ) ;

.slider-indicator-right <

transition : left 0.3s 0.1s cubic-bezier ( 0.51, 0.92, 0.24, 1.15 ) , right 0.3s cubic-bezier ( 0.51, 0.92, 0.24, 1.15 ) ;

jQuery:

$ ( ‘.slider’ ) . each ( function ( ) < let $ th = $ ( this ) ; $ th . attr ( 'data-pos' , 1 ) ; let slide = $ th . find ( '.slider-slide' ) ; let num = $ th . find ( '.slider-slide' ) . length ; let dots = $ th . find ( '.slider-dots' ) ; dots . prepend ( ' ' ) ; for ( let i = 1 ; i <= num ; i ++ ) < dots . append ( ' + 100 / num + ‘%» data-pos crayon-o»>+ i + ‘»>‘ ) ;
$ th . find ( ‘.slider-slides’ ) . css ( ‘width’ , 100 * num + ‘%’ ) ;
slide . css ( ‘width’ , 100 / num + ‘%’ ) ;
$ th . find ( ‘.slider-dot’ ) . on ( ‘click’ , function ( ) < let currentPos = $ th . attr ( 'data-pos' ) ; let newPos = $ ( this ) . attr ( 'data-pos' ) ; let newDirection = ( newPos > currentPos ? ‘right’ : ‘left’ ) ;
let currentDirection = ( newPos < currentPos ? 'right' : 'left' ) ; $ th . find ( '.slider-indicator' ) . removeClass ( 'slider-indicator-' + currentDirection ) ; $ th . find ( '.slider-indicator' ) . addClass ( 'slider-indicator-' + newDirection ) ; $ th . attr ( 'data-pos' , newPos ) ;

$ th . find ( ‘.slider-slides’ ) . css ( ‘transform’ , ‘translateX(-‘ + 100 / num * ( newPos — 1 ) + ‘%)’ ) ;

$ th . find ( ‘.slider-indicator’ ) . css ( < 'left' : 100 / num * ( newPos - 1 ) + '%' , 'right' : 100 - ( 100 / num ) - 100 / num * ( newPos - 1 ) + '%' >) ;
$ th . find ( ‘.slider-indicator’ ) . css ( < 'left' : 0 , 'right' : 100 - ( 100 / num ) + '%' >) ;

Пример слайдера с фото и информацией:

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium quis repellat nesciunt, ex temporibus perspiciatis esse perferendis. Dicta tempore dolore laborum iste rerum quis temporibus voluptate itaque maxime commodi! Maiores.

В этом примере используется сетка Bootstrap, и HTML код слайда выглядит следующим образом:

10 Best Carousel Plugins In jQuery/JavaScript/CSS (2023 Update)

The carousel is one of the most popular UI components in modern web design. A carousel allows you to present your favorite images, products, blog posts, or any other contents in an infinitely rotating interface.

What’s the difference between Carousel And Slider?

In general, a carousel allows the visitor to infinitely loop through carousel items by clicking/tapping the navigation controls or by swiping the screen (mobile). It means that the carousel will automatically back to the first item when you reach the last one and continue to navigate. And the slider usually stops running when you reach the last slide.

The best Carousel plugin

In this blog post you will find the 10 best, responsive, and easy-to-use Carousel plugins implemented in jQuery, Vanilla JavaScript, or pure CSS/CSS3. Feel free to download and use them in your next web or mobile design project. Have fun!

jQuery Carousel Plugins:

1. Fully Responsive & Flexible jQuery Carousel Plugin — slick

Slick is a fresh new jQuery plugin for creating fully customizable, responsive and mobile friendly carousels/sliders that work with any html elements.

Fully Responsive & Flexible jQuery Carousel Plugin - slick

2. Responsive & Flexible Content Slider Plugin — flickity

A generic, flexible, modular jQuery slider plugin for creating responsive, touch-enabled content sliders/galleries/slideshows/carousels with physics-based animations and full-feature APIs.

Responsive & Flexible Content Slider Plugin - flickity

3. Responsive & Multi-Functional jQuery Slider Plugin — slider.js

A robust and efficient jQuery slider solution to create responsive, flexible, highly customizable and mobile-friendly content sliders, slideshows, galleries, rotators and many more. Download and check out more than 30+ examples in the zip for more information.

Responsive & Multi-Functional jQuery Slider Plugin - slider.js

4. Lightweight Responsive Content Slider Plugin with jQuery and CSS3 — lightslider

A lightweight yet fully customizable jQuery slider plugin that supports any Html contents and makes use of CSS3 transitions and transforms to create smooth ‘fade’ or ‘slide’ effects. Licence under the Apache License 2.0.

Lightweight Responsive Content Slider Plugin with jQuery and CSS3 - lightslider

5. jQurty HTML Content Carousel Plugin — jcarousel

A simple and fast jQuery carousel slideshow plugin for controlling a list of items in horizontal or vertical order.

jQurty HTML Content Carousel Plugin - jcarousel

6. Professional jQuery Content Slider Plugin — Slider Pro

A professional jQuery plugin which allows you to display a group of mixed content in a responsive and touch compatible slider.

Professional jQuery Content Slider Plugin - Slider Pro

7. Mobile First Content Slider with jQuery and Hammer.js — ItemSlide.js

A flexible, responsive carousel/slider jQuery plugin which allows to scroll/swipe through a set of elements using mouse drag or touch gestures.

Mobile First Content Slider with jQuery and Hammer.js - ItemSlide.js

8. Clean and Responsive jQuery Carousel Plugin — flexisel

A simple, easy-to-use and cross-platform jQuery plugin that make it easy to create a responsive carousel slider with configurable scrolling animations for showcasing any html elements.

Clean and Responsive jQuery Carousel Plugin - flexisel

9. 3D Cover Flow-Style Image Carousel Plugin with jQuery — Cloud 9 Carousel

A cool jQuery & Html5 based carousel plugin that has the ability to continuously rotate/slide a set of images with the familiar 3D ‘cover flow’ effect.

3D Cover Flow-Style Image Carousel Plugin with jQuery - Cloud 9 Carousel

10. Easy & Responsive jQuery Carousel Slider Plugin — FilmRoll

A jQuery slider plugin for creating a responsive carousel that has the ability to center the selected item on the page, especially when all of the items had varying widths.

Easy & Responsive jQuery Carousel Slider Plugin - FilmRoll

Vanilla JS Carousel Plugins:

1. Responsive and Flexible Mobile Touch Slider — Swiper

A powerful javascript library to implement responsive, accessible, flexible, touch-enabled carouses/sliders on your mobile websites and apps.

Responsive and Flexible Mobile Touch Slider - Swiper

2. Responsive Slider Plugin with CSS3 Transitions — Glide.js

A lightweight, flexible slider/carousel plugin (ES6 JavaScript slider/carousel library) that helps you create responsive and touch-enabled sliders with fast and performant CSS3 transitions.

Responsive Slider Plugin with CSS3 Transitions - Glide.js

3. Tiny Content Slider with Pure JavaScript

A tiny yet feature-rich content slider built using pure JavaScript and plain Html / CSS.

Tiny Content Slider with Pure JavaScript

4. Feature-rich Framework-agnostic Touch Slider Library – keen-slider

A multifunctional, framework-agnostic slider library that can be used to transition between any elements with touch & drag events.

Feature-rich Framework-agnostic Touch Slider Library – keen-slider

5. Basic Image Carousel With Pure JavaScript – siema.js

A minimal vanilla JavaScript plugin used for generating a basic yet customizable and draggable slider / carousel without any 3rd dependencies.

Basic Image Carousel With Pure JavaScript – siema.js

Pure CSS/CSS3 Carousels:

1. Netflix Like Hover Carousel In Pure CSS – flix-carousel

flix-carousel is a pure CSS library to create an interactive hover carousel inspired by Netflix.

Netflix Like Hover Carousel In Pure CSS – flix-carousel

2. 3D Perspective Carousel with CSS3 Transforms

A pure CSS 3D perspective carousel that automatically rotate through a group of html content using CSS3 transforms.

3D Perspective Carousel with CSS3 Transforms

3. Automatic Rotate Carousel In Pure CSS

A CSS/CSS3 only image carousel that automatically rotates through a group of elements with a fancy rotation animation.

Automatic Rotate Carousel In Pure CSS

4. Cover Flow Style Card Carousel In Pure CSS

A stylish, responsive, cover flow style card carousel implemented in pure CSS and lable+radio tricks.

Cover Flow Style Card Carousel In Pure CSS

5. Responsive Image Carousel With Pure HTML / CSS – SheetSlider

A CSS library used to generate a responsive, infinite-looping carousel slider from a list of images. Developed with pure CSS without any javascript.

Responsive Image Carousel With Pure HTML / CSS – SheetSlider

More Resources:

Looking for more jQuery plugins or JavaScript libraries to create awesome Carousels on the web & mobile? See jQuery Carousel and JavaScript/CSS Carousel sections for more details.