Categories:

Home / Free JavaScripts / Image Slideshows & Galleries / Here

Cut & Paste Simple Carousel

Credit: JavaScript Kit

Description: Simple Carousel lets you display a long series of images and captions as a horizontal strip that can be dragged left or right to reveal the obscured ones. It's inspired by the carousel that Google uses on its search results when you search for say "action movies" to showcase movie covers and titles. The contents of the carousel are loaded from an external file on the server via Ajax, and can be reloaded with a different file at any time.

Example (images used are copyright their respective sources, and used only for illustration):

Load carouselcontent2.htm

Directions:

Step 1: Add the following code to the <HEAD> section of your page:

Download the following external files and upload to same directory as where your webpage resides:

Step 2: Add the below container markup for a simple carousel to the <BODY> where you want it to appear on the page:

The markup of Step 2 acts as the container for the carousel contents, which is defined inside an external file, carouselcontent.htm.

And that's it for installation, though read on for more details on setting up/ customizing the script.

Setup Information

As mentioned, there are two parts to the markup of a simple carousel, firstly, the outer container that you add to your page:

<div class="carousel" id="mycarousel">
<div class="belt">
// actual carousel contents fetched via ajax and inserted here
</div>
</div>

Give the main DIV element an unique but arbitrary ID value, which is used to identify it inside the initialization code of Step 1. The CSS class names should be retained. Inside the inner DIV "belt" is where the external contents of the carousel will be inserted into once it's fetched.

The 2nd part of the markup is that for the carousel content itself, which should be defined inside an external file, by default carouselcontent.htm. The structure of this markup should be a series of DIV elements with CSS class "content":

<div class="content">
<a href="http://www.imdb.com/title/tt1877832/"><img src="xmen.jpg" /></a>
XMen
</div>

<div class="content">
<a href="http://www.imdb.com/title/tt0103064/"><img src="terminator2.jpg" /></a>
Terminator 2
</div>

"

The initialization code

To transform the above markup into a carousel, we need to call new simplecarousel() in the HEAD section of your page to initialize the carousel. The syntax is:

<script>

jQuery(function($){ // on DOM load

 mycarousel = new simplecarousel({
  id: 'mycarousel',
  url: 'carouselcontent.htm'
 })

})

</script>

Where mycarousel in red should be an arbitrary but unique name for each instance of Simple Carousel on the page. Inside simplecarousel() is a list of settings for the carousel, with the two listed above- the "id" and "url" settings being mandatory. Here is a description of all of the available settings:

setting Description
id The ID of the main carousel container markup.
url The URL of the external content file on your server that contains the carousel contents.
dragleeway

defaults to 40

The number of pixels users can drag when at the start/end of carousel before it bounces back.
bounceduration

defaults to 0.5

The duration in seconds for the carousel to bounce back.

Separate each setting with a comma, except the very last one:

<script>

jQuery(function($){ // on DOM load

 mycarousel = new simplecarousel({
  id: 'mycarousel',
  url: 'carouselcontent.htm',
  dragleeway: 10 // <-- no comma after last setting
 })

})

</script>

Changing the dimensions of the carousel

To change the dimensions of the carousel, open up simplecarousel.css and modify the width and height properties inside the ".carousel" class. Refer to the comments to see other aspects of the carousel you may wish to edit, such as the content DIV and images sizes.

Reloading the contents of a carousel

Once you've initialized a carousel, you can modify its contents anytime with a different file. Just call:

carouselvar.loadfile('newurl')

With carouselvar being the unique variable you assigned new simplecarousel() to when calling it in the code of Step 1. For example, the following link when clicked on loads the content file "carouselcontent2.htm" into the demo carousel above:

<a href="#" onClick="mycarousel.loadfile('carouselcontent2.htm'); return false">Load carouselcontent2.htm</a>

Load carouselcontent2.htm


JavaScript Tools:
Site Info


CopyRight (c) 2018 JavaScript Kit. NO PART may be reproduced without author's permission. Contact Info