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 some 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.
Full Page Slideshow
Full page slide show based off of Jonathan Snook’s tutorial.
Greensock animated slideshow [wip]
A fullscreen, sort of responsive, slideshow animated with Greensocks TweenLite/Tweenmax.
Nautilus Slideshow
Nautilus slideshow with HTML, CSS and JavaScript.
Tweenmax slideshow
A customizable slideshow TweenMax.
CSS Fadeshow
This is an extended version of a pure CSS slideshow gallery which comes with more and easier customization and previous/next buttons.
Slick Slideshow with blur effect
Slideshow with blur effect in HTML, CSS and JavaScript.
Ken Burns effect CSS only
Ken Burns slideshow effect CSS only.
Split-screen Slideshow
HTML, CSS and JavaScript split-screen slideshow.
Slideshow Parallax with TweenMax
Bubble Slideshow Component
This is a Vue component that uses clip-path for an interesting slideshow transition effect.
Geometrical Birds – slideshow
83 triangles morphing and changing color into different birds.
Silhouette zoom slideshow
Slideshow where the person in the current frame is used to zoom into the next frame.
A slideshow with a blinds transition
The transition treats each part of the photo as a blind, closes them all together, and when they are open again, a new photo is revealed underneath.
Dual Slideshow Demo
Just playing around with a dual pane slideshow concept.
Slideshow presentation
Navigate using the up and down arrow keys.
Split Slick Slideshow
Vertical slideshow in split screen.
Parallax Slideshow
HTML, CSS and JS slideshow with parallax effect.
Untitled Slider
A small experiment which quickly turned into something more.
Slideshow Vanilla JS w/ CSS Transition
Custom slideshow with staggered transitions. Built in vanilla JS.
If you enjoyed reading this article about CSS slideshows, you should read these as well:
- Free poster mockup examples to download in PSD format
- Book mockup examples: Free to download book cover mockup designs
- Free magazine mockup examples you should check out
The post CSS slideshow examples that you can use in your websites appeared first on Design your way.
Source: https://ift.tt/2PtEXVD
No comments:
Post a Comment