Clever Geek Handbook

Adding images causes the carousel to malfunction

I am using a sleek carousel to display images on my website. However, when using the slickAdd method, I ran into some strange problem.

The drag and drop function seems to be messed up when using this method. Other items like regular divs, headers, etc. Work great when added.

I made a jsfiddle that illustrates the problem ( http://jsfiddle.net/s5jvpymy/1/ ) using this carousel done like this:

$('.container').slick({
            dots:true,
            arrows:false,
});

$('.container').slickAdd('<div class="item"><img src="http://media.caranddriver.com/images/media/51/dissected-lotus-based-infiniti-emerg-e-sports-car-concept-top-image-photo-451994-s-original.jpg" /></div>');

The first two images are working fine due to the markup set before the slice initialization. However, if you slide to the last image, you cannot drag it in any direction.

I've checked the markup and CSS and the three points match, so I'm not sure what is causing this problem.

The weird problem is with Firefox only. In Chrome and IE, it works great.

Anyone with an idea why Firefox is behaving this way?

+3


source to share


2 answers


Try adding this to your main slick library file

 Slick.prototype.swipeHandler = function(event) { event.preventDefault();



According to slick github this should fix your problem, check here

+1


source


Another solution could be to prevent the element from being dragged, it looks like the dragfox drag event will interfere with the one slider:

$('.container').on( 'dragstart', 'img', function() { return false; } );



-DEMO -

+3


source






More articles:


All Articles