CODEWITHSUNDEEP
javascriptjqueryhtmlcssslick.js
Lildholdt
Lildholdt

Reputation: 123

Adding images causes slick carousel to malfunction

I am using the slick carousel for displaying images on my website. However I have encountered a strange problem when using the slickAdd method.

When using this method it seems to mess up the drag functionality. Other items, like ordinary divs, headings etc. works fine when added.

I have made a jsfiddle which illustrates the problem (http://jsfiddle.net/s5jvpymy/1/) with the slick carousel implemented 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 two first images are working fine due to the markup being set before slick initialization. However when sliding to the last image it is not possible to drag this in any direction.

I have checked the markup and CSS and item three correspond excatly to the two others so I am not sure what causes this issue.

The strange thing is the problem is only present in Firefox. In Chrome and IE it works fine.

Anyone that have an idea why Firefox behaves like this?

Upvotes: 3

Views: 2297

Answers (2)

A. Wolff
A. Wolff

Reputation: 74420

An other solution could be to prevent drag on element, looks like firefox drag event is interfering with slider one:

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

-DEMO-

Upvotes: 3

Justin Breiland
Justin Breiland

Reputation: 460

Try adding this to your main slick library file

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

According to slick's github, this should solve your problem, check it out here

Upvotes: 1

Related Questions