10 бесплатных слайдеров каруселей на чистом CSS


Оглавление (нажмите, чтобы открыть):

Адаптивный слайдер карусель, с плавным эффектом автопрокрутки HTML5 + CSS3 + jQuery

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

Адаптивный слайдер карусель, с плавным эффектом автопрокрутки HTML5 + CSS3 + jQuery

Одним из эффективных способов привлечения внимания пользователей на странице сайта это создание движущейся анимации. Элементы анимации помогают более наглядно рассказать и показать пользователям о вашем продукте. Последнее время большую популярность получили выезжающие панели, а также ряд других эффектов, которые появляются при прокрутке или нажатии на картинку. Они также известны как слайдеры, карусели и выезжающие панели. В данной статье речь пойдет о создании адаптивного слайдера карусельного типа, с плавным эффектом автопрокрутки.

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

timeList — скорость переключения слайда

TimeView — время показа

RadioBut — кнопки под слайдом, для быстрой навигации. По умолчанию значение true, если использовать false, то кнопки пропадут.

А теперь давайте приступим! Создадим и откроем файл index.htm и пропишем туда нужную нам разметку:

В представленном коде как мы видим ничего сложного нет, slider-wrap определяет общее положение и выравнивает слайдер по середине экрана. Параметр active-slide задает размер и высоту картинки согласно ее длине. И slider показывает только активную картинку.

Теперь создадим и откроем файл style.css и пропишем туда нужную нам разметку:

В свойстве стиля slider-wrap пропишите width – максимальную длину ваших картинок.

В свойстве стиля #slider и .slide < width: calc(100%/4); > укажите количество картинок в вашем слайдере. В нашем примере их 4.

Если стрелки вперед/назад мешают видимости вашего слайдера их можно сделать невидимыми и появляться они будут при наведении. Для этого в параметрах prewBut и nextBut, задайте свойству opacity значение 0.

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

Функция animSlide принимает три вида значений: next, prew, числовое значение. Параметр next переключает следующий слайд, prew возвращает предыдущий, а числовое значение это определенно заданный слайд, выбранный через радио кнопки под слайдом.

Бесплатные слайдеры изображений с использованием CSS3 и jQuery

Здравствуйте, дорогие читатели блога. Сегодня хочется Вам представить бесплатную подборку замечательных CSS3 и jQuery слайдеров изображений для Вашего сайта.

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

Так же, для тех кто пропустил, рекомендую посмотреть прошлую подборку.

Вот и всё что хотелось сказать, а теперь наслаждайтесь, друзья.

Простой слайдер-карусель контента/изображений на CSS + jQuery

В этой статье мы своими руками сделаем простой и адаптивный слайдер с кнопками перелистывания на чистом CSS с использованием нескольких строк jQuery .

Первым делом, создадим разметку HTML :

Не забываем подключить CSS стили, библиотеку jQuery для наших нужд и файл с будущим скриптом slider.js .

Здесь есть блок slider , который и является основным, в нем два блока prev и next , которые отвечают за кнопки перелистывания. Есть обобщенный блок, который заключает в себя слайды, он нужен для того, чтобы поставить слайды в один ряд, задав ему суммарную их ширину.

Теперь напишем следующие CSS стили:

Тут стоит отметить 7 строчку , которая скрывает всё, что выходи за пределы этого блока и 16 строку , которая задает скорость анимации для блока, который мы будем двигать.

Остается только написать скрипт, который будет:

  1. Определять количество слайдов и их суммарную ширину, задавать эту ширину slides .
  2. Обработчики событий на клики по кнопкам prev и next , которые будут листать слайды при помощи изменения свойство transform .

Код обильно снабжён комментариями и в дополнительных пояснениях не нуждается.

Результат можете посмотреть на Демо-странице:

Множество различных jQuery примеров , элементы CSS
и большое количество других инструментов для Вашего сайта !

Подборка самых популярных WordPress плагинов для любого сайта.

Здесь вы сможете скачать различные jQuery скрипты для любых проектов.

Бесплатно скачать CSS3 наработки с различными эффектами анимации.

Можно скачать файлы HTML5 с современными возможностями разработки.

Множество различных free PSD объектов для WEB-дизайна.

Колекция различных элементов form jQuery для вашего сайта.

Бесплатно скачать иконки для сайта в форматах PSD, PNG и так далее.

Коллекция всегда обновляющихся модальных окон на jQuery.

Разные примеры jQuery validate собраны в одном месте сайта.

Симпатичные варианты реализации ваших jQuery gallery.

Большой сборник широкоформатных и адаптивных jQuery slider`ов.

Ишите примеры реализации jQuery scroll? Это то, что вам нужно.

Красивые и динамичные всплывающие подсказки на jQuery и CSS3.

Интересные материалы на тему веб разработок, главные новости.

Подобрка плагинов Javascript, библиотек, фреймворков и т.д.

Коллекция потрясающих примеров анимации для вашего сайта.

Модернизация элементов форм, создание систем автозаполнения

Плагины для выбора и настройки даты и времени в формах

Предзагрузчики, анимация загрузки, перлоадеры и т.д.


Компоненты, содержащие в себе реализацию параллакс-эффекта.

Создание вкладок, оформление списков в удобную навигацию.

Все, что касается таблиц с данными: фильтр, сортировка и т.д.

Наработки SVG-графики и наложение на нее анимации. Просто красиво.

Отрисовка элементов на веб-странице с помощью html5 canvas.

Примеры элементов, которые реагируют при наведении на них.

Плагины для фото и видео галерей, способные приблежать контент.

Кнопки. Создание красивы и незабываемых кнопок для сайта.

Все, что касается сортировки данных на странице. Плагины html5.

Выборка данных. Множество примеров jQuery select.

Различные способы создания красивого и эффектного меню для сайта.

Дерево элементов. Построение множественных списков на странице.

Примеры объектов в трехмерном пространстве с помощью CSS3 и jQuery.

Легкий слайдер-карусель без скриптов, на чистом CSS3

Скачать

Источник

Смотрите также:

SEO-продвижение

Автоматическое продвижение сайта в TOP.

Если Вы нашли ошибку в тексте, пожалуйста, выделите область и нажмите Ctrl + Enter.

Мастер Йода рекомендует:  Гостевая книга на PHP

Последняя версия jQuery:

Небольшое руководство по тому, как скачать самую актуальную версию библиотеки jQuery, а также рекомендации по подключению скрипта.

10 Free Pure CSS & Carousel Sl >

Home » CSS » 10 Free Pure CSS & Carousel Sliders

You can find plenty of JavaScript-based slider plugins on the web for free. These work great and support all modern browsers, but nowadays you can replicate most of these features with pure CSS.

Every carousel has its own style, so there is no best method for building one. But I’ve collected 10 of the best open source snippets from CodePen that you can use as templates for your own carousels.

These designs range in style and behavior, but they all run on raw CSS code.

Netflix Show Carousel

This Netflix carousel is pretty unique with a hover-to-zoom animation effect for each video. The links in the carousel don’t go anywhere but you could easily embed these to work with videos.

Since this version only uses CSS it’s tougher to include dynamic effects like video modal windows. But you can still use this to create a slider that functions well in all browsers with a Netflix-style hover animation.

Annotated Linear Carousel

Some carousels use annotations to add subtitles and extra context over each slide. You can replicate this effect by cloning this pen written in pure HTML/CSS code.

There are no arrows or dot navigation elements, so the entire thing is click/touch controlled. Just click to the right or left of the carousel and you’ll immediately advance to that side. This rotates infinitely, so you’ll never hit the end either way.

Each transition has a small fading effect which is also controlled through CSS. It’s all very impressive and works great as a simple UI template.

Fading Carousel

Here’s a slightly cleaner fading carousel UI that does include the small dot navigation along with arrows on either side. This is fully controlled through CSS where the arrows work like radio buttons.

Each HTML radio input connects to a different image so you can click to browse through them with ease. The fading effects also run through CSS with mixins from this Sass library for carousels.

Responsive Sl >

Here’s another radio button slider controlled by CSS and some added captions. But this pen created by Vo Tuan Trung is also fully responsive and should work in any modern browser.

All of the CSS is written in Sass and it uses the Bourbon mixins library for extra features. The sliding animations pan left or right depending on which direction the content is moving. This is a cool effect and surprisingly detailed for only running on CSS code.

CSS3 Testimonials Sl >

Custom testimonials are a staple for landing pages and company websites. This testimonial slider is easy to implement and very lightweight using pure CSS for the animations.

These elements follow a modern and simplistic approach to design. Not too much color, texture, or extra design pizzazz.

If you want something a little more detailed check out this related pen by developer Sara Soueidan. It’s a little more compact but also has more flair to the design.

Picture Frame

You can do a lot with CSS transitions and keyframe animations. And this picture frame animation shows how much you can do with just a simple slider.

Each photo moves to either side with a simple sliding animation effect. You can add photos inside regardless of size because even the frame is made with pure CSS. Pretty cool right?

Dark UI

For a darker example you might like this CSS slider built on top of a dark background. It uses bright green highlights to grab attention and strong caption animations.

This slider is incredibly simple to use, plus the animations are top notch. The fact that it runs on just CSS3 is quite impressive. We really do live in the golden age of web design!

CSS Image Carousel

With this image carousel there’s a lot you can change with just a few lines of code. The design is incredibly simple and it uses CSS to create a small frame around the photos.


This is one of the few carousels that doesn’t bother with animations, so the transitions are rough and direct.

But it all works with less than 100 lines of CSS, and there’s no Sass code, so it’s easy to copy/paste this into any layout.

Pure CSS3 Carousel

If you want a clean starting point for a fixed-size image slider then check out this design by Hélio Marcondes.

Each background rotates with the text in a very simple animation. Again this is pretty short with only

80 lines of CSS and a few dozen lines of HTML.

I would say this is one of the barest templates you’ll find for creating a pure CSS carousel. It’s certainly not perfect but it offers a great starting point.

Text Carousel

Text carousels can work great for testimonials or various quotes on a homepage. And if you want to avoid messy JS code you can use this rotating text carousel built with pure CSS.

Each block of text has its own animation cycle which follows a pattern across five different quotes. You could increase or decrease the number by adding/removing CSS classes which makes it all the better for easy editing.

And if you’re looking for a text-only carousel with a bit more flair check out this example by Matthew Hirsch.

These are some of the best examples I could find online, but I know there are many others. If you’re curious to find more take a look over the carousel tag on CodePen.

Как сделать — Адаптивное слайд-шоу или Карусель

Узнайте, как создать Адаптивное слайд-шоу с помощью CSS и JavaScript.

Слайд-шоу / Карусель

Слайд-шоу используется для циклического использования элементов:

Создание слайд-шоу

Шаг 1) добавить HTML:

Пример

Шаг 2) добавить CSS:

Стиль кнопки «Далее» и «назад», текст заголовка и точки:

Пример

/* Slideshow container */
.slideshow-container <
max-width: 1000px;
position: relative;
margin: auto;
>

/* Hide the images by default */
.mySlides <
display: none;
>

/* Next & previous buttons */
.prev, .next <
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
>

/* Position the «next button» to the right */
.next <
right: 0;
border-radius: 3px 0 0 3px;
>

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover <
background-color: rgba(0,0,0,0.8);
>

/* Caption text */
.text <
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
>

/* Number text (1/3 etc) */
.numbertext <
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
>

/* The dots/bullets/indicators */
.dot <
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
>

.active, .dot:hover <
background-color: #717171;
>

/* Fading animation */
.fade <
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
>

Шаг 3) добавить JavaScript:

Пример

var sl >showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) <
showSl >>

// Thumbnail image controls
function currentSlide(n) <
showSl >>

function showSlides(n) <
var i;
var sl );
var dots = document.getElementsByClassName(«dot»);
if (n > sl > if (n for (i = 0; i

Автоматическое слайдшоу

Чтобы отобразить Автоматическое слайд-шоу, используйте следующий код:

Пример

var sl >showSlides();

function showSlides() <
var i;
var sl );
for (i = 0; i sl > sl ;
setTimeout(showSlides, 2000); // Change image every 2 seconds
>

Несколько слайд-шоу

Пример

var sl >/* Class the members of each slideshow group with different CSS classes */
var sl ]
showSlides(1, 0);
showSlides(1, 1);

function plusSlides(n, no) <
showSl >>

Слайдеры на чистом CSS + бонусный слайдер

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

Мастер Йода рекомендует:  Как быстро конкатенировать строки в Python

Вот что я нашел на сайте на тему слайдеров:

Как и в прошлых уроках, я рекомендую все примеры смотреть в браузере Chrome.

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


Слайдер на CSS, который использует для навигации по слайдам радиокнопки. Эти радиокнопки находятся под слайдеров. Также помимо радиокнопок навигация осуществляется с помощью стрелок слева и справа. Чтобы следить за тем, какое изображение сейчас отображать — используются псевдоклассы :checked .

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

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

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

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

4. Слайдер на CSS без ссылок

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

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

Еще один адаптивный слайдер, управление которого основано на радиокнопках. Чтобы посмотреть как этот слайдер будет смотреться на разных устройствах — Вы можете либо самостоятельно изменять окно браузера, либо на странице со слайдером есть специальные иконки разных устройств, кликая на которые, Вы увидите будет смотреться слайдер на компьютере, планшете или на смартфоне.

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

Кроме всех слайдеров, которые представлены выше, я хочу порадовать Вас еще одним. Этот слайдер отлично подойдет для создания галереи изображений. Словами не объяснишь то что он делает, поэтому лучше смотрите всё на видео:

Вывод

С помощью слайдеров можно красиво оформлять галереи изображений, размещая их более компактно, вставить слайдер в первый экран (часть страницы, которую видно без прокрутки) продающей страницы, чтобы сразу показать посетителю главные выгоды, которые он получит. Можно еще найти массу способ где и как можно применить слайдеры, но одно понятно точно — они несут пользу при правильном использовании.

Адаптивные слайдеры для сайта

Время не стоит на месте а с ним и прогресс. Это затронуло и просторы интернета. Уже можно заметить как меняется внешний вид сайтов и особенно большой популярностью пользуется адаптивный дизайн. В связи с этим адаптивные слайдеры для сайта стали очень популярные и актуальные. Появилось не мало новых адаптивных jquery слайдеров, галерей и каруселей.

Слайдеры и карусели теперь можно встретить почти на любом сайте и они могут придать легкость и изюминку сайту. Особенно когда в них используются эффекты HTML5 и CSS3. И поэтому решил сделать эту подборку слайдеров. Если вам нужны стандартные слайдеры можете посмотреть в этой подборке

Если вы хотите установить универсальный слайдер или карусель к себе на сайт можете перейдите по этой ссылке —>

Слайдеры для сайта

1. Responsive Horizontal Posts Slider

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

2. Слайдер на Glide.js

Этот слайдер подходит для любого сайта. Тут используется Glide.js с открытым кодом. Цвета слайдера можно легко изменить.

3. Tilted Content Slideshow

Адаптивные слайдеры для сайта с контентом. Изюминкой данного слайдера является 3d эффект изображений, а также разные анимации появления в случайном порядке.

4. Слайдер с использованием HTML5 canvas

Очень красивый и впечатляющий слайдер с интерактивными частицами. Выполнен он с помощью HTML5 canvas,

5. Слайдер «Морфинг изображений»

Слайдер с эффектом морфинга. В данном примере слайдер хорошо подойдет для портфолио веб-разработчика или веб-студии в виде портфолио.

6. Круговой слайдер

Слайдер в виде круга с эффектом переворота изображения.

7. Слайдер с размытым фоном

Адаптивный слайдер с переключением и размытием заднего фона.

8. Адаптивный фэшн слайдер

Простой, легкий и адаптивный слайдер для сайта.

9. Slicebox — jQuery 3D image sl > (ОБНОВЛЕННЫЙ)

Обновленная версия Slicebox slider с исправлениями и новыми возможностями.

10.Free Animated Responsive Image Grid

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

Слайдеры для сайта вторая часть.

11. Flexslider

Универсальный бесплатный плагин для вашего сайта. Этот плагин выполнен в нескольких вариантах слайдера и каруселях.

12. Фоторама

Fotorama — это универсальный плагин. У него есть много настроек. Все работает быстро и легко, также есть возможность просмотра слайдов на весь экран. Слайдер можно использовать как в фиксированном размере так и адаптивном, с миниатюрами и без, с круговой прокруткой и без и еще много чего. На базе фоторамы можно создать интересные адаптивные слайдеры для сайта.

P.S.Ставил слайдер несколько раз и считаю что он один из лучших

13. Бесплатная и адаптивная 3D галерея-слайдер с миниатюрами.

Экспериментальная галерея-слайдер 3DPanelLayout с сеткой и интересными эффектами анимации.

14. Слайдер на css3

Адаптивный слайдер выполнен при помощи css3 с плавным появлением контента и легкой анимацией.

15. WOW Slider

WOW Slider — это слайдер изображений с потрясающими визуальными эффектами и анимациями.

Скачать (Чтобы скачать слайдер нужно указать свою почту и после этого вам придет ссылка на скачивание.)

16. Galleria – бесплатный JavaScript фрейморк галереи


Это бесплатный движок для создания галереи изображений. Она адаптивна и имеет первоэкранный режим.

17. Elastic

Эластичный слайдер с полной адаптивностью и с миниатюрами слайдов.

18. Slit

Это полноэкранный адаптивный слайдер с использованием анимации css3. Выполнен слайдер в двух вариантах и анимация сделана достаточно необычно.

19. Адаптивная фотогалерея plus

Простой бесплатный слайдер-галерея с подгрузкой изображений.

20. Адаптивный слайдер для WordPress

Адаптивный и бесплатный слайдер для WP.

21. Parallax Content Slider

Слайдер с эффектом параллакса и контролем каждого элемента с помощью CSS3.

22. Слайдер с привязкой музыки

Слайдер с использованием открытого исходного кода JPlayer. Этот слайдер напоминает презентацию с музыкой.

Слайдеры для сайта третья часть.

23. Слайдер с jmpress.js

Адаптивный слайдер основан на jmpress.js и поэтому позволит использовать некоторые интересные 3D эффекты к слайдам.

24. Fast Hover Slideshow

Слайд шоу с быстрым переключением слайдов. Слайды переключаются при наведении курсора.

25. Image Accordion with CSS3

Аккордеон изображений с помощью css3.

26. A Touch Optimized Gallery Plugin

Это адаптивная галерея которая оптимизирована для тач-устройств.

27. 3D Галерея

3D Wall Gallery — создана для браузера Safari где и будет виден 3D эффект. Если смотреть на другом браузере то функциональность будет в порядке но небудет виден 3D эффект.

28. Слайдер с пагинацией

Адаптивный слайдер с нумерацией страниц с помощью ползунка JQuery UI. идея состоит в том чтобы чтобы использовать простую и необычную концепцию навигации. Есть возможность перемотки всех изображений или послайдового переключения.

29.Image Montage with jQuery

Автоматическое расположение изображений в зависимости от ширины экрана. Очень полезная и интересная штука при разработке сайта портфолио.

30. 3D Gallery

Простенький 3D круговой слайдер на css3 и jQuery.

31. Полноэкранный режим с 3D эффектом на css3 и jQuery

Слайдер с возможностью полно-экранного просмотра изображений с красивым переходом.

32. Portfolio Image Navigation

Интересная идея для портфолио. Особенностью является необычная навигация а вернее структура по которой можно просматривать фотографии.

33. Многоуровневая фото-карта.

Это многоуровневая карта — галерея изображений позволяет показывать изображения, связанные с их местоположения. В основе лежит google maps. В правой части показано миниатюру изображения которую можно просмотреть в лайт-боксе при нажатии на него.

34. Полноэкранная галерея с миниатюрами

Адаптивная галерея-слайдер с миниатюрой и описанием слайда.

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

89 CSS Sl >

C ollection of free HTML and CSS slider code examples: card, comparison, fullscreen, responsive, simple, etc. Update of June 2020 collection. 7 new items.

Table of Contents

Related Articles

Card Sliders

Author

  • Jeff Ham
  • January 10, 2020

Links

Made with


  • HTML/Haml
  • CSS/SCSS
  • JavaScript/CoffeeScript (jquery.js)

About the code

Onboarding Screens

A set of onboarding screens in HTML/CSS/JS. A personal experiment with layering PNG icons, CSS3 transitions, & flexbox.

Мастер Йода рекомендует:  Знакомство с фронтенд-тестированием. Часть третья. E2E-тестирование

Demo Image: Information Card Slider

Information Card Slider

HTML, CSS and JavaScript information card slider.
Made by Andy Tran
November 23, 2015

Demo Image: Elastic Slider

Elastic Slider

Photo slider working on desktop and mobile browsers.
Made by Taron
September 29, 2014

Comparison (Before/After) Sliders

Author

  • Mario Duarte
  • August 14, 2020

Links

Made with

  • HTML
  • CSS/SCSS
  • JavaScript/Babel (jquery.js)

About the code

Image Comparison Slider

A simple and clean image comparison slider, fully responsive and touch ready made with CSS and jQuery.

Author

  • Matthew Steele
  • July 19, 2020

Links

Made with

  • HTML
  • CSS/SCSS

About the code

Javascriptless Before/After Slider

A before and after slider with only html and css.

Author

  • Huw Llewellyn
  • July 14, 2020

Links

Made with

  • HTML

  • CSS
  • JavaScript

About the code

Before After 3 Layer Image Slider

Playing around with a new idea using my two layer before/after image slider. Keeping it minimal. Keeping it vanilla. Like it if it’s useful 🙂

Demo Image: Before After Image Slider (Vanilla JS)

Before After Image Slider (Vanilla JS)

Vanilla JS, minimal, nice to look.
Made by Huw
July 3, 2020

Author

  • Envato Tuts+
  • May 15, 2020

Links

Made with

  • HTML
  • CSS
  • JavaScript

About the code

Split Screen UI

A «split-screen» slider element with JavaScript.

Demo Image: Before & After Slider Gallery With SVG Masks

Before & After Slider Gallery With SVG Masks

A little experiment for a before & after slider all inside a SVG. Masking makes it pretty simple. Since it’s all SVG, the images and captions scale nicely together. GreenSock’s Draggable and ThrowProps plugins were used for the slider control.
Made by Craig Roblewsky
April 17, 2020

Demo Image: HTML5 Before & After Comparison Slider

HTML5 Before & After Comparison Slider

Uses customised range input for slider.
Made by Dudley Storey
October 14, 2020

Demo Image: Responsive Image Comparison Slider

Responsive Image Comparison Slider

Responsive image comparison slider with HTML, CSS and JavaScript.
Made by Ege Görgülü
August 3, 2020

Demo Image: HTML5 Video Before-and-After Comparison Slider

HTML5 Video Before-and-After Comparison Slider

HTML5, CSS3 and JavaScript video before-and-after comparison slider.
Made by Dudley Storey
April 24, 2020

Demo Image: Image Comparison Slider

Image Comparison Slider

A handy draggable slider to quickly compare 2 images, powered by CSS3 and jQuery.
Made by CodyHouse
September 15, 2014

Fullscreen Sl >

Author

  • Kamil
  • July 11, 2020

Links

Made with

About the code

Pure CSS Slider

Simple slider based on radio inputs. 100% pure HTML + CSS. Works also with arrow keys.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author


  • Inner DonalLogue
  • January 24, 2020

Links

Made with

  • HTML/Pug
  • CSS/SCSS
  • JavaScript

About the code

Slider Transition

Nice transition effect for fullscreen slider.

Author

  • digistat
  • January 9, 2020

Links

Made with

  • HTML
  • CSS/SCSS
  • JavaScript (swiper.js)

About the code

Horizontal Parallax Sliding Slider

Horizontal parallax sliding slider with Swiper.js.

Author

  • Alex Nozdriukhi
  • August 17, 2020

Links

Made with

  • HTML/Pug
  • CSS
  • JavaScript/Babel

About the code

Smooth 3D Perspective Slider

Responsive smooth 3D perspective slider on mouse move.

Demo Image: Fullscreen Hero Image Slider

Fullscreen Hero Image Slider

Fullscreen hero image slider (swipe panels theme) with HTML, CSS and JavaScript.
Made by Tobias Bogliolo
June 25, 2020

Demo Image: Velo.js Slider With Borders

Velo.js Slider With Borders

A slider interaction thing using Velocity and Velocity effects (UI Pack) to enhance the animation. Animation is triggered via arrow keys, nav click, or scrolling jack. This version includes borders as part of the interaction.
Made by Stephen Scaff
May 11, 2020

Demo Image: Popout Slider

Popout Slider

Simple slider in a minimal style to show off images. Part of the image pops out on each slide.
Made by Nathan Taylor
Jannuary 22, 2020

Demo Image: Responsive Parallax Drag-slider With Transparent Letters

Responsive Parallax Drag-slider With Transparent Letters

The thing is pretty easy customizable. You can safely change font, font size, font color, animation speed. The first letter of a new string in array in JS will appear on a new slide. Easy to create (or delete) a new slide: 1. Add new city in the array in JS. 2. Change number of slides variable and put a new image in scss list in CSS.
Made by Ruslan Pivovarov
October 8, 2020

Demo Image: Fancy Slider

Fancy Slider

Features:

  1. Clip-path for image masking rectangle border (webkit only).
  2. Blend-mode for this mask.
  3. Smart color system, just put your color name and value into sass map and then add proper class with this color name to elements and everything will work!
  4. Cool credits side-menu (click small button in the center of demo).
  5. Vanilla js with just Demo Image: Gray & White — Skewed Slider With Scrolling

Gray & White — Skewed Slider With Scrolling

This skewed slider with scrolling based on pure JS and CSS (without libraries).
Made by Victor Belozyorov
September 3, 2020

Demo Image: Pokemon Slider

Pokemon Slider

A slider animation with Pokemon design.
Made by Pham Mikun
August 18, 2020

Demo Image: Slider With Half-Collored Angled Text

Slider With Half-Collored Angled Text

HTML, CSS and JavaScritp slider with complex animation and half-collored angled text.
Made by Ruslan Pivovarov
July 13, 2020

Demo Image: Slider Parallax Effect

Slider Parallax Effect

Slider parallax effect with HTML, CSS and JavaScript.
Made by Manuel Madeira
June 28, 2020

Demo Image: Slider With Ripple Effect

Slider With Ripple Effect

HTML, CSS and JavaScript slider with ripple effect.
Made by Pedro Castro
May 21, 2020

Demo Image: Clip-Path Revealing Slider

Clip-Path Revealing Slider

Clip-Path revealing slider with HTML, CSS and JavaScript.
Made by Nikolay Talanov
May 16, 2020

Demo Image: Preview Slider

Preview Slider

GSAP + Slick slider with preview of previous/next slides.
Made by Karlo Videk
April 27, 2020

Demo Image: Full Page Slider

Full Page Slider

HTML, CSS and JavaScript full page slider.
Made by Joseph Martucci
February 28, 2020

Demo Image: Full Slider Prototype

Full Slider Prototype

Full slider prototype with HTML, CSS and JavaScript.
Made by Gluber Sampaio
January 6, 2020

Demo Image: Greensock Animated Slideshow

Greensock Animated Slideshow

A fullscreen, sort of responsive, slideshow animated with Greensocks TweenLite/Tweenmax.
Made by Arden
December 12, 2015

Demo Image: Linear Slider With SplitText Effect

Linear Slider With SplitText Effect

Linear slider with SplitText effect.
Made by Arden
December 5, 2015

Demo Image: Full-Screen Slider ( GSAP Timeline ) #1

Full-Screen Slider ( GSAP Timeline ) #1

Full-Screen slider (GSAP Timeline) #1 with HTML, CSS and JavaScript.
Made by Diaco M.Lotfollahi
November 23, 2015

Demo Image: Pure CSS Slider With Custom Effects

Pure CSS Slider With Custom Effects

HTML and CSS slider with custom effects.
Made by Nikolay Talanov
November 12, 2015

Demo Image: Fullscreen Drag-Slider With Parallax

Fullscreen Drag-Slider With Parallax

Fullscreen drag-slider with parallax with HTML, CSS and JavaScript.
Made by Nikolay Talanov
November 12, 2015

Demo Image: Actual Rotating Slider

Actual Rotating Slider

Proof of concept rotating slider. Uses clip-path and lots of math.
Made by Tyler Johnson
April 16, 2015

Demo Image: Simple Responsive Fullscreen Slider

Simple Responsive Fullscreen Slider

A simple fullscreen CSS & jQuery slider using translateX and translate3d smoothness!
Made by Joseph
August 19, 2014

10 бесплатных слайдеров каруселей на чистом CSS

Слайдеры (слайд-шоу) — здесь мы собрали и продолжаем регулярно обновлять коллекцию бесплатных слайдеров для сайта с различными интересными эффектами и переходами, отзывчивые (адаптивные), полноэкранные, c 3D-эффектами и прочие… В большинстве работ используется JavaScript (jQuery), но также есть и на чистом CSS. Сразу на странице Вы можете просмотреть Демо и скачать исходный код (* zip).

Особо хотелось бы отметить Owl Carousel 2 и Fotorama — пожалуй, самые популярные слайдеры: легкие, удобные и многофункциональные, включают в себя множество опций для настройки и имеют адаптивные дизайны. Ссылки на Owl Carousel 2 и Fotorama

Simplicity: 3D слайдер с интересным плавающим эффектом

Также при смене слайдов большие изображения меняются местами с изображениями в миниатюре.

Добавить комментарий