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.

The Ken Burns Slider

 

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.

Puppy Carousel

 

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;

Advanced Too Cute Puppy Slider

 

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;

Triple Ad Fade Slider

 

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s