jQuery Image SlideShow


So to get started you’re going to need jQuery and the Orbit plugin (make sure jQuery is attached first).

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.orbit.min.js" type="text/javascript"></script>

Now we can quickly hookup the CSS we need:

<link rel="stylesheet" href="css/orbit.css">

And finally, let’s dig into the markup.

Now, just a couple notes before moving on…

  • First, Orbit will dynamically determine the height and width of your set of images and scale accordingly, but make sure all your images are the same size or the larger images will peek out on the sides.
  • Secondly, you’ll notice that the “id” of the parent div is “featured”, but it doesn’t have to be. When you call the Orbit plugin, you set your own selector and the magical “orbit” class gets applied.

All we need to do now is activate the Orbit plugin.

<script type="text/javascript">
     $(window).load(function() {
         $('#featured').orbit();
     });
</script>

And there you have it. Orbit, implemented and ready to rock with all the default settings.

Article resource: http://www.htmldrive.net/items/show/928/Countdown-jQuery-Slick-Image-Slider-Plugin
Advertisements

One thought on “jQuery Image SlideShow

Ask J

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