Главная » Языки программирования

Виды слайдеров html css

На чтение 7 мин
Содержание
  1. 101 CSS Sliders
  2. Table of Contents
  3. Related Articles
  4. Card Sliders
  5. Author
  6. Links
  7. Made with
  8. About the code
  9. Onboarding Screens
  10. Information Card Slider
  11. Elastic Slider
  12. Comparison (Before/After) Sliders
  13. Author
  14. Links
  15. Made with
  16. About the code
  17. Image Comparison Slider
  18. Author
  19. Links
  20. Made with
  21. About the code
  22. Javascriptless Before/After Slider
  23. Author
  24. Links
  25. Made with
  26. About the code
  27. Before After 3 Layer Image Slider
  28. Before After Image Slider (Vanilla JS)
  29. Author
  30. Links
  31. Made with
  32. About the code
  33. Split Screen UI
  34. Before & After Slider Gallery With SVG Masks
  35. HTML5 Before & After Comparison Slider
  36. Responsive Image Comparison Slider
  37. HTML5 Video Before-and-After Comparison Slider
  38. Image Comparison Slider
  39. Fullscreen Sliders
  40. Author
  41. Links
  42. Made with
  43. About a code
  44. Pure CSS ECommerce Slider
  45. Author
  46. Links
  47. Made with
  48. About the code
  49. Pure CSS Slider
  50. Author
  51. Links
  52. Made with
  53. About the code
  54. Slider Transition
  55. Author
  56. Links
  57. Made with
  58. About the code
  59. Horizontal Parallax Sliding Slider
  60. Author
  61. Links
  62. Made with
  63. About the code
  64. Smooth 3D Perspective Slider
  65. Fullscreen Hero Image Slider
  66. Velo.js Slider With Borders
  67. Popout Slider
  68. Responsive Parallax Drag-slider With Transparent Letters
  69. Fancy Slider
  70. Author
  71. Подборка слайдеров для сайта на чистом CSS
  72. Пример 1: Маленький слайдер с автоматической прокруткой фото
  73. HTML разметка
  74. CSS оформление
  75. Пример 2: Слайдер, стилизованный под рамку картины
  76. HTML разметка
  77. CSS оформление
  78. Пример 3: Обычный слайдер со стрелками — вперед и назад

101 CSS Sliders

Collection of free HTML and CSS slider code examples: card, comparison, fullscreen, responsive, simple, etc. Update of May 2020 collection. 5 new items.

Table of Contents

Card Sliders

Author

Made with

About the code

Onboarding Screens

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

Demo Image: Information Card Slider

Information Card Slider

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

Читайте также:  Css transition ease in and out

Demo Image: Elastic Slider

Elastic Slider

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

Comparison (Before/After) Sliders

Demo image: Image Comparison Slider

Author

Made with

About the code

Image Comparison Slider

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

Demo image: Javascriptless Before/After Slider

Author

Made with

About the code

Javascriptless Before/After Slider

A before and after slider with only html and css.

Demo image: Before After 3 Layer Image Slider

Author

Made with

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, 2017

Demo image: Split Screen UI

Author

Made with

About the code

Split Screen UI

A «split-screen» slider element with JavaScript.

Demo Image: 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, 2017

Demo Image: HTML5 Before & After Comparison Slider

HTML5 Before & After Comparison Slider

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

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, 2016

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, 2016

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 Sliders

Author

Made with

About a code

Pure CSS ECommerce Slider

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

Читайте также:  Javascript запросить у пользователя число и вывести все делители этого числа

Author

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

Demo image: Slider Transition

Author

Made with

About the code

Slider Transition

Nice transition effect for fullscreen slider.

Demo image: Horizontal Parallax Sliding Slider

Author

Made with

About the code

Horizontal Parallax Sliding Slider

Horizontal parallax sliding slider with Swiper.js.

Demo image: Smooth 3D Perspective Slider

Author

Made with

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, 2017

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, 2017

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, 2017

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, 2016

Demo Image: Fancy Slider

Fancy Slider

  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

Author

Источник

Подборка слайдеров для сайта на чистом CSS

Пример 1: Маленький слайдер с автоматической прокруткой фото

Это самый простой слайдер без возможности самостоятельного скроллинга фотографий. Рекомендуемый размер изображений 500x300px.

Маленький слайдер с автоматической прокруткой фото Пример слайдера 1

HTML разметка

 
 Виды слайдеров html css Виды слайдеров html css Виды слайдеров html css Виды слайдеров html css

CSS оформление

.container_slider_css{margin:50px auto;width:500px;height:300px;overflow:hidden;position:relative} .photo_slider_css{position:absolute;animation:round 16s infinite;opacity:0;width:100%} @keyframes round { 25%{opacity:1} 40%{opacity:0} } img:nth-child(1){animation-delay:12s} img:nth-child(2){animation-delay:8s} img:nth-child(3){animation-delay:4s} img:nth-child(4){animation-delay:0} @media(min-width:0px) and (max-width:320px) { .container_slider_css{width:80%;height:190px} } @media(min-width:321px) and (max-width:480px) { .container_slider_css{width:80%;height:190px} }

Пример 2: Слайдер, стилизованный под рамку картины

Слайдер, стилизованный под рамку картины

Рекомендуемый размер изображений 400x300px. Слайдер отображается ровно по центру страницы. Адаптива под мобильные устрайства — нет. Если вы новичок в веб, то корректно установить данный слайдер себе на сайт будет проблематично из-за абсолютного позиционирования. Используются тени (box-shadow). Есть возможность самостоятельно скроллить фото. Radio кнопки для прокрутки изображений появляются при наведении мышки. Скачать пример 2

HTML разметка

    
  
  •  
    • 
  
  •  
    • 
  
  •  
    • 
  
  •  
    •

CSS оформление

.slider_picture{background-color:#fff;box-shadow:inset 0 0 2px hsla(0,0%,0%,.2),0 3px 1px hsla(0,0%,100%,.75),0 -1px 1px 2px hsla(0,0%,0%,.1);height:18.75em;left:50%;margin:-9.875em -13em;padding:.5em;position:absolute;top:50%;width:25em} .slider_picture:before{background-color:#22130c;bottom:-2.5em;box-shadow:inset 0 1px 1px 1px hsla(0,0%,100%,.2),inset 0 -2px 1px hsla(0,0%,0%,.4),0 5px 50px hsla(0,0%,0%,.25),0 20px 20px -15px hsla(0,0%,0%,.2),0 30px 20px -15px hsla(0,0%,0%,.15),0 40px 20px -15px hsla(0,0%,0%,.1);content:'';left:-2.5em;position:absolute;right:-2.5em;top:-2.5em;z-index:-1} .slider_picture:after{background-color:#fff5e5;bottom:-1.5em;box-shadow:0 2px 1px hsla(0,0%,100%,.2),0 -1px 1px 1px hsla(0,0%,0%,.4),inset 0 2px 3px 1px hsla(0,0%,0%,.2),inset 0 4px 3px 1px hsla(0,0%,0%,.2),inset 0 6px 3px 1px hsla(0,0%,0%,.1);content:'';left:-1.5em;position:absolute;right:-1.5em;top:-1.5em;z-index:-1} .slider_picture li{box-shadow:0 -1px 0 2px hsla(0,0%,0%,.03);list-style:none;position:absolute} .slider_picture input{display:none} .slider_picture label{background-color:#111;background-image:linear-gradient(transparent,hsla(0,0%,0%,.25));border:.2em solid transparent;bottom:.5em;border-radius:100%;cursor:pointer;display:block;height:.5em;left:24em;opacity:0;position:absolute;transition:.25s;width:.5em;visibility:hidden;z-index:10} .slider_picture label:after{border-radius:100%;bottom:-.2em;box-shadow:inset 0 0 0 .2em #111,inset 0 2px 2px #000,0 1px 1px hsla(0,0%,100%,.25);content:'';left:-.2em;position:absolute;right:-.2em;top:-.2em} .slider_picture:hover label{opacity:1;visibility:visible} .slider_picture input:checked + label{background-color:#fff} .slider_picture:hover li:nth-child(1) label{left:.5em} .slider_picture:hover li:nth-child(2) label{left:2em} .slider_picture:hover li:nth-child(3) label{left:3.5em} .slider_picture:hover li:nth-child(4) label{left:5em} .slider_picture img{height:18.75em;opacity:0;transition:.25s;width:25em;vertical-align:top;visibility:hidden} .slider_picture li input:checked ~ img{opacity:1;visibility:visible;z-index:10}

Пример 3: Обычный слайдер со стрелками — вперед и назад

Рекомендуемый размер изображений 960x640px. Слайдер полностью адаптирован под мобильные устройства. Есть возможность подписывать названия слайдов. Для отображения стрелочек — вперед и назад, — используется стандартный набор иконок font-awesome. На мой взгляд этот слайдер самый оптимальный.

Источник

Оцените статью
© 2023 Программирование