#slideshow-1 #slideshow-2 #slideshow-3 #slideshow-4 #slideshow-5 #slideshow-6 #slideshow-7 #slideshow-8 #slideshow-9 #slideshow-10 #slideshow-11 #slideshow-12

Welcome to Menucool jQuery Slideshow

This demo shows how the jQuery slideshow (or Thumbnail Slider if using the pure JavaScript) can work together with the JavaScript Image Slider.

Enhanced Slideshow Effect

The jQuery Slideshow/thumbnail slider works nicely together with the JavaScript Image Slider which greatly enhanced the slideshow with an added aesthetic appeal.

SEO Friendly

The markup is valid HTML5 and SEO optimzied, with all content always being available to search engines.

A Tool for Web Designer

Its goal is to simplify the process of creating professional image/content slideshow for the web and mobile devices. This jQuery Slideshow will entertain your audience while scrolling what feature your website has.

JavaScript Image Slider is driven by the jQuery/Thumbnail Slideshow

Each slide of the JavaScript Image Slider is triggered by the thumbnail scrolling.

Rich HTML

Rich HTML content can be added to the thumbnails, or to the description of each JavaScript Image Slider slide.

Fully Customizable

The jQuery Slideshow, or Thumbnail Slider if using the pure JavaScript, can be horizontal or vertical, and its styles and behaviors are fully customizable by tweaking the CSS and the JavaScipt.

Varying Width, or Varying Height

The varying size (either varying width for the horizontal jQuery slideshow, or varying height for the vertical slider) is allowed for the thumbnails.

A Great Way to Showcase Your Products

It is a perfect way to showcase your products. This script allows you to easily animate any series of elements, by sequentially scrolling them.

Wide Browsers and Devices Support

The carousel is completely configurable and compatible with all major browsers (including ie6+, Firefox Chrome, Opera, Safari) and mobile platforms like iphone / ipad.

A Great Carousel

Use this stunning carousel to entertain your readers while scrolling what feature your website has. It has a very smooth user interface that gives your slider an added aesthetic appeal.

Easy to Use

Enhance your website by adding a unique and attractive slider! And it is easy: download, copy & paster, tweak the styles to your desires. Well, that's it.
demos:   1234
Options
scrollByEachThumb:
circular:
autoAdvance:
largeImageSlider: imageSlider
inSyncWithLargeImageSlider:

jQuery Slideshow

Sometimes you need a screen to display the corresponding large picture while the thumbnails are scrolling. This can be done by integrating our Javascript Image Slider into the jQuery Slider:

  1. Put the Javascript Image Slider's code (HTML, CSS, JavaScript) into your page following the instruction of Javascript Image Slider
  2. Put the jQuery Slider's code (HTML, CSS, JavaScript) into your page following the instruction of jQuery Slider
      The link to the Javascript Image Slider's script must be placed before the jQuery Slider's script:
    <script src="(path)/js-image-slider.js" type="text/javascript"></script> <script src="(path)/thumbnail-slider.js" type="text/javascript"></script>
  3. Go to the top of the Javascript Image Slider's script, and customize the sliderOptions to your preference.
  4. Go to the top of the jQuery Slider's script, and assign the imageSlider to the largeImageSlider property. var mct1_Options = { ...... largeImageSlider: imageSlider, inSyncWithLargeImageSlider: true, ...... }; If set inSyncWithLargeImageSlider to false, the JavaScript Image Slider won't carousel along with the thumbnail slider unless a thumbnail is clicked.
  5. Before deploying to production, purchase a license from us, and set it to the license property in each script of the two sliders.
    Note: You don't need to buy two licenses as both sliders are using the same license key.

Done! That's all there is to it.

Source Code

Go to page jQuery Slider and click the "Download" button (This demo is the demo2.html in the downloaded package).

License:

Please refer to the license description in page jQuery Slider.

 


QUESTION & ANSWER
More ...

 

Your Name
Question Title
+ =  
Troubleshooting question? please read Troubleshooting Request before asking.