Free image html slider

110+ Perfect CSS Sliders (Free Code + Demos)

Enjoy this huge, 100% free and open source collection of CSS slider code examples. The list includes CSS slider cards, comparison, fullscreen, responsive, and simple.

1. Onboarding Screens CSS Slider

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

2. Image Comparison Slider

A simple and clean image comparison slider, fully responsive and touch ready made with css and jquery.

3. Javascriptless Before/After Slider

I wanted to try and make a before and after slider with only html and css. Please let me know your thoughts!

4. Before After 3 Layer Image Slider (Vanilla)

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 🙂

5. Split-Screen UI

6. Pure CSS Bug ECommerce Interactions

7. Pure Css Slider

8. Slider Transition (WIP)

9. Horizontal Parallax Sliding Slider With Swiper.js

10. Smooth 3d Perspective Slider

Responsive (sort of?). Uses this technique for smooth transitions on mouse move — https://codepen.io/rachsmith/post/animation-tip-lerp

11. CSS Carousel With Keyboard Controls

Not recommended for production use. But it seemed like a fun idea to see how far I could take a form with radio inputs.

12. Pure CSS Carousel

13. Smallest Slider Ever W/o JS

14. Images Opacity Slider

15. Stacked Flexible Slides Layout

This example illustrates how to create layout of slides stacked on each other (especially useful for fade in/out transitions). It’s achieved without setting their height and avoiding position: absolute; so they are fully flexible and easy to keep in normal page flow.

16. Yarden (Design By Olya Marchak)

17. Masked Text W/ Navigation (CSS Only)

18. Oceanic Overlays Slider

19. Responsive CSS Slider

20. Pure HTML/CSS Slider + Circular SVG Progress Bar

21. Responsive CSS Vertical Slider With Thumbnails

An experiment to create a completely responsive vertical slider with thumbnails using only CSS, and retaining the aspect ratio of the images.

22. Flexbox Image Slider

23. Motion Blur Effect Using SVG Filters

24. Greensock Animated Slider

25. CSS-only Image Slider Using SVG Patterns

This is an experiment on how SVG patterns can help us create masked-like images for a CSS-only image slider. CHANGELOG Added will-change property to improve performance.

26. Parallax Horizontal Image Scroller — No JS!

Parallax is like a tarpaulin: if you don’t nail down all the corners, it just doesn’t work right. With vertical scrolling parallax effects a dime a dozen, I was shocked at how hard it was to find a good horizontal parallax effect that wasn’t loaded with jquery or other miscellaneous ser.

27. Checkbox Hack Slider

no checkbox at all 😀 but classic href=’#..’ plus :target combo photo by https://unsplash.com/@szvmanski

28. CSS Only Slider

29. Pure CSS Carousel

30. CSS Image Slider W/ Next/prev Buttons

A 100% pure CSS image slider with previous/next buttons and image transitions. Updated with simplified HTML and CSS, better image transitions and resized images.

31. Information Card Slider

32. Elastic Slider

33. Before After Image Slider (Vanilla)

I couldn’t find a before after image slider that suited my purposes: — Vanilla JS — Minimal — Nice to look at — Like it if it’s handy 🙂

34. 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.

35. HTML5 Before & After Comparison Slider

36. Responsive Image Comparison Slider

37. HTML5 Video Before-and-After Comparison Slider

38. Responsive Image Comparison Slider

39. JQuery | Fullscreen Hero Image Slider (Swipe Panels Theme)

40. Velo 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.

41. Popout Slider

Simple slider in a minimal style to show off images. part of the image pops out on each slide. Has some lag issues due to the blur and hi res images.

42. Responsive Parallax Drag-slider With Transparent Letters

Doesn’t work in IE. 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.

43. Fancy Slider

44. Gray & White — Skewed Slider With Scrolling

45. Slider With Complex Animation And Half-collored Angled Text

46. Slider Parallax Effect

A slider inspired by a Dribbble created by Jardson Almeida (https://dribbble.com/shots/2518516-Nike-Promotion-Ads-Parallax-Effect).

47. Slider With Ripple Effect V1.1

48. Clip-Path Revealing Slider

49. Preview Slider

50. Full Page Slider

51. Full Slider Prototype

Hi, this slide demo was based on HelloThierry.com home slider, originally created by @jcsuzanne. With this demo I’m trying to achieve the same interactions results and improve my JS skills. Have fun!

52. Greensock Animated Slideshow [wip]

A fullscreen, sort of responsive, slideshow animated with Greensocks TweenLite/Tweenmax. This is work in progress, currently working on how to best pevent the slidein animations from firing when users click the next/prev button repeatedly. See: http://greensock.com/forums/topic/13282-m.

53. Linear Slider With SplitText Effect | Greensock

54. Full-Screen Slider ( GSAP Timeline )

55. Pure Css Slider With Custom Effects

56. Fullscreen Drag-slider With Parallax

Sort of responsive. Tested in Chrome/FF/last IE, everywhere looks fine. Source of inspiration — https://stupid-studio.com/ (their js is minified, so all code is mine, except some parts of svg, like viewBox/minHeight).

57. Actual Rotating Slider

58. Simple Responsive Fullscreen Slider

a simple fullscreen css & jQuery slider using translateX and translate3d smoothness! If this can be further simplified suggestions are most welcome.

59. Slider Transitions

Exploring some slider transitions. I am using Swiper slider with parallax option enabled. Playing with CSS filters mostly here.

60. GSAP Slider

61. Slider UI

62. Slider Gsap | Virsion: 02

63. Slice Slider

A little slicey transition slider using a simple add class deal. Wanted to see if I could get this interaction butter smooth, with just css transitions, as oppose to a animation lib like Velocity or GSAP. Have to smooth out the timings a bit and decide on the best approach for mobile (j.

64. Slider Animation Effect

Leveraged CSS border-image & clip-path to create a slider animation effect. Inspiration from: https://dribbble.com/shots/2375246-Fashion-Butique-slider-animation

65. Flexbox Slider

Little slider built with flexbox. Somewhat responsive, and can have fixed elements alongside the slider area.

66. Canvas Slider

67. CSS Only Cupcake Slider With Sprinkles!

68. Exploring UI Animation

This time I’m doing a slider concept designed by the guys at Kreativa Studio. I really loved the dribble post, so I give it a try. Hope you guys like it. https://dribbble.com/KreativaStudio

69. Exploring UI Animation 2

70. Exploring UI Animation 3

71. Ecommerce Slider V2.1

72. Clean Slider With Curved Background

73. CSS Slider Concept

74. Slicing Images Pure Css And More

75. Double Exposure Carousel Slider

Double exposure is photographic technique that combines 2 different images into a single image. Then I use this technique with canvas blend modes.

76. Tiny Circle Slider — Customized

Original javascript Tiny Circle Slider by Maarten Baijs Reconstructed from original design by Yadwinder Yadwinder Singh yadwindersingh.com html5coder.net earlier version without background-image this version with (encoded) SVG background-images Standalone SVG as a Github Gist

77. CSS Slider

78. Untranslatable

I read this article and I just had to. This is a simple slider experiment displaying words with beautiful meanings which cannot be directly translated. Focus: elegant typography and simple yet alluring transitions.

79. Image Slider With Masking Effect

The animation idea is to change the value of CSS clip path, thus make a masking effect. Works great on chrome and opera. There’s some issue with Safari and Firefox doesn’t support CSS Clip Path yet.

80. Dot Slider

81. Prism Effect Slider

82. Sliding Background Gallery

83. Dual Slider

84. Sequence.js — Mono

Read the tutorial. A product slider powered by Sequence.js. Sequence.js — The responsive CSS animation framework for creating unique sliders, presentations, banners, and other step-based applications. About Sequence.js | Sequence.js Theme Store | Fork Sequence.js on GitHub Follow @IanL.

85. Tiny Circle Slider — Customized

Original javascript Tiny Circle Slider by Maarten Baijs Reconstructed from original design by Yadwinder Yadwinder Singh yadwindersingh.com html5coder.net earlier version without background-image this version with (encoded) SVG background-images Standalone SVG as a Github Gist

86. Responsive GTA V Slider

87. A Cubey Slider (Webkit)

88. CSS Hover Slider

89. Image Overlay Slider

90. Pure CSS Featured Image Slider

91. Feature Slider

92. Animated Cube Slider

93. Simple Image Slider

A simple JQuery image slider! Features: — Automatic slideshow — Pause on hover — Dynamic slide counter — Show/Hide controls on hover

94. Multi Axis Image Slider

95. 3D Cube Slider. Pure CSS.

96. CSS Slider

97. CSS Product Page

98. Real Simple Slider

99. Split Slick Slideshow

100. CSS3 Fullscreen Background Slideshow

101. Animated CSS Slider

102. 3D Slider

103. Pure CSS Automated Slider With Caption Using CSS Animation

This is a Slider that does not use any JavaScript! Yes, it is possible! Just need to modify the animations % based on your preferences and the container width based on the number of slides. By default the whole loop of animation is 30 seconds, also here you can speed it up if you like.

Источник