CODEWITHSUNDEEP
javascriptjquerydrupalflexslider
Developer
Developer

Reputation: 1437

Flexislider Thumbnails Click Issue - Intermediate Issue

DEMO

Steps : click 1-3 again and again and then click on active thumnail twice then next thumnail click wont work.

I have implemented Flexi Slider with Thumbnails, Its working fine, but sometimes The Thumbnails are not clickable. Not sure where Iam going Wrong. 

/* New Slider */
    $('.sliderNew #carousel').flexslider({
        animation       : "slide",
        controlNav      : true,
        animationLoop   : true,
        slideshow       : true,
        itemWidth       : 140,
        itemMargin      : 5,
        minItems        : 1,
        asNavFor        : '.sliderNew #slider',
        reverse         : false
    });

    $('.sliderNew #slider').flexslider({
        animation       : "slide",
        controlNav      : false,
        animationLoop   : true,
        slideshow       : true,
        reverse         : false,        
        sync            : ".sliderNew #carousel",
        start: function( slider ) {
            $('.sliderNew #carousel .slides li').on('click',function(event){
                //alert('asd')
                $('.sliderNew #slider').flexslider("play");
            });
        }       
    });
    /* New Slider */

Appreciate your help..

Thanks..

Upvotes: 2

Views: 1130

Answers (3)

Eric Mahieu
Eric Mahieu

Reputation: 327

I've done some digging and found that this is probably due to a bug in the FlexSlider version you're using (version 2.1). In the Github updates (unfortunately they only go back to version 2.2) I did read something about "click handler updates", so I guess you've been so unfortunate to stumble upon an old bug. I've tracked it back to this update on GitHub, but that's more or less a guess.

On the bright side, they've fixed the bug. I've updated the JSFiddle to use the new version of FlexSlider: http://jsfiddle.net/ennesht2/

You probably also want to check what you're doing with your CSS/positioning, because the demo looks like it's falling apart in Safari/Chrome (OSX). I've done one quick fix in your CSS to make the navigation element appear in this new version (uncommented the height:0), but you'll also want to update your CSS to use FlexSlider's version 2.3 one.

 .sliderNew #carousel .flex-viewport {
     border :none;
     //height:0;
     display:inline-block;
     width:100%;
 }

Upvotes: 1

Alin
Alin

Reputation: 1228

I have a hunch on this one, I think that whenever your slide is running, it's coming over your thumbs, this happened once in a project I participated in.

The following is not a good practice of z-index but it should help you find out if this is the problem.

Add the following to your css to test the theory:

#carousel .slides li{
    z-index:9999;
}

Upvotes: 0

kelvintaywl
kelvintaywl

Reputation: 245

Firstly, since you are already using IDs to grab your DOM elements, you can simply use $('#slider') instead of $('.sliderNew #slider'). The same logic goes for the carousel element :)

I think you may wish to set the click handler on the img element, rather than its parent (the li element). So perhaps:

start: function( slider ) {
        $('#carousel .slides li img').on('click',function(event){
            $('#slider').flexslider("play");
        });
    }

Upvotes: 0

Related Questions