How to add the jQuery carousel to Drupal website


Do you have a Drupal version of your slider or do I have to ask a developer to implement it?  I do have some knowledge, and can edit change file to adpat. If there is a documentation about how to implement on Drupal, it would be great.

Thanks in advance.


Yes, you can add the jQuery carousel and jQuery slider to your Drupal theme, post or page.

For Amazing Carousel, you can check the tutorial:

Form Amazing Slider, you can check the tutorial:

Can we place hyperlinks to each slide?


Can I place hyperlinks to each slide in the carousel?


In Slides dialog, after adding images, click and select an image, then in the bottom of the dialog, there is an option “click to open web link”. You can choose to open the current image or video in a LightBox popup, or you can enter a web link.

jQuery Carousel not working in Internet Explorer


Absolutely love your products, Slider and Carousel. Thank you.

My problem is that the carousel is working beautifully on all browsers I have tried except IE. The page with carousel works fine on Firefox, Chrome, Opera, Torch, and Safari but not IE regardless if the OS is XP, Vista, or W7.


It’s because the DOCTYPE of your webpage triggers the quirk mode of Internet Explorer. You can view this tutorial:

In short, currently, at the beginning of your webpage, the code is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

You need to change it:

<!DOCTYPE html>

Running the jQuery carousel and slider on the same page


It seems that I can’t run the carousel and slider at the same time. Is there a way to achieve this?


When adding the codes, you need to remove the second jquery.js from the code (marked by red), then the the slider and carousel will work at the same time.

<script src="sliderengine/jquery.js"></script>
<script src="sliderengine/amazingslider.js"></script>
<script src="sliderengine/initslider-1.js"></script>

<script src="carouselengine/jquery.js"></script>
<script src="carouselengine/amazingcarousel.js"></script>
<link rel="stylesheet" type="text/css" href="carouselengine/initcarousel-3.css">
<script src="carouselengine/initcarousel-3.js"></script>