Here are some Carousels and Sliders I have designed. Y’all are free to use any of the code as y’all see fit. It is all open source. All I respectfully request is that y’all put in a code comment of “designed/coded by Cakey Baby”. I will be adding more as time goes on.
Ken Burns Image Slider
Here is the first one. It is a slider using what is called the Ken Burns effect. I didn’t like any of the designs I found on line. They were not very adaptable and the animation looked “jumpy” at times. So I created my own design that can be any size and easily adapted for your needs. It can also manage as many images as you want.
Too Cute “Puppy Carousel”
Here is my “Puppy Carousel” (aawww…that’s just too cute). It is a responsive design but it is designed for only four images. I believe it is a unique design as I have not seen one like it online. I will be trying, in the future, to adapt the design to allow for more images to be simply added. In the mean time, if you want to change the number of images, you will have to rewrite the “button logic” yourself. Images can be selected by clicking the next button (on the left), the previous button (on the right) and thumbnail images.
Advanced Too Cute “Puppy Carousel”
As promised above, here is an advanced version of the Too Cute Puppy Carousel. Some of the advancements includes;
- Handles 3 to 12 images for even more cuteness.
- Just put in the images’ source code into the array for your image choices.
- Automatically populates and configures itself.
- Self styles the thumbnail images.
- Improved and simplified button logic.
- Improved and smoother animation between the main and thumbnail images.
The code comes with a nauseating amount of instructional and informative comments. It is fully responsive and can be easily adapted to any size you need. As always, all the code is open source and free to anybody who wishes to use any part or all of it. Here is the jsfiddle link;
The Triple Ad Fade Slider
This a triple fade slider that has text for each slider and each image. To avoid the hassle of creating a bunch of html for the text, I used “text images” instead. I used the open source GIMP. (Gnu Image Manipulation Program) You can download it for free here. Just set a background to the same size as your images are, set the opacity to zero (upper right hand corner) and then follow these easy to use step by step instructions . Here is the jsfiddle link;