I have a jQuery slideshow that worked fine when it was running in a site built with standalone PHP files, but now that I've rebuilt the site in Drupal, it has a problem. The slideshow is running in the header of this page:


There are five images in the slideshow, the first of which is selected randomly. The first time the script loops back to the beginning, the first image does not appear. Then, on subsequent loops, everything is fine. Here is the jQuery script:

var x = Math.floor(Math.random() * $(".home-page-header-images .view-content .header-slideshow-image").length);
$(".home-page-header-images .view-content .header-slideshow-image:eq(" + x + ")").addClass("active").css({opacity: 1.0});

    setInterval(homepageSlideshow, 4000);

    function homepageSlideshow() {
        var activeImg = $(".header-slideshow-image.active");
        var nextImg = activeImg.next(".header-slideshow-image");
        if (nextImg.length == 0) {
            nextImg = $(".header-slideshow-image:first");
        nextImg.addClass("next").animate({opacity: 1.0}, 1000, function() {
            activeImg.removeClass("active").css({opacity: 0.0});

Here is the relevant CSS:

.home-page-header-images .header-slideshow-image, #footer-slideshow .header-slideshow-image {
opacity: 0;
position: absolute;
z-index: 0;
/* Early IE */
filter: alpha(opacity=0);

.home-page-header-images .header-slideshow-image.active, #footer-slideshow .header-slideshow-image.active {
z-index: 1;
display: block;

.home-page-header-images .header-slideshow-image.next, #footer-slideshow .header-slideshow-image.next {
z-index: 2;
display: block;

I am so thoroughly stumped its not even funny. Any help is greatly appreciated. Happy to provide any additional information. I'm relatively new to Drupal theme development, just FYI.

1 Answer 1


This because you have two slider block in your durpal website. The second one is hidden in the footer section. Block id is : block-multiblock-7.

Both of these block are having same DOM structure, so in the following scenario your slider will break.

Breaking Scenario: Main slider -> 5th Image is active. Footer Slider -> 3th Image is active

Then your condition fails:

if (nextImg.length == 0) {
            nextImg = $(".header-slideshow-image:first");

Hope you are clear with my point.


  • That is perfectly clear. Thank you! That hidden slideshow is for mobile devices. I will recode this.
    – JOakland
    Jul 2, 2014 at 16:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.