CODEWITHSUNDEEP
javascriptjqueryhtmldebuggingslider
LukeD1uk
LukeD1uk

Reputation: 242

Multiple image slider loading images wrong

If you take a look at this pen: http://codepen.io/LukeD1uk/pen/LEKBa You will see my sliders are loading the last LI of all UL and displaying them in each slider. Obviously its not supposed to do this; anyone know whats up?

Upvotes: 0

Views: 55

Answers (2)

joshboley
joshboley

Reputation: 1153

You are grabbing the last child li and prepending it

$('.slider ul li:last-child').prependTo('.slider ul');

Remove line 19 in your CodePen and add e.preventDefault() like below to keep the page from jumping to the top

$('a.control_prev').click(function (e) {
  e.preventDefault();
    moveLeft($(this).parent());
});

$('a.control_next').click(function (e) {
  e.preventDefault();
    moveRight($(this).parent());
});

Upvotes: 1

LukeD1uk
LukeD1uk

Reputation: 242

This was answered on another questions I posted related to this issue.

This:

$('#slider ul li:last-child').prependTo('#slider ul');

Becomes this

$('.slider').each(function(slider){
  slider = $(slider);
  slider.find('ul li:last-child').prependTo(slider.find('ul'));
});

Original Question: Multiple sliders, buttons controlling all sliders

Upvotes: 0

Related Questions