D_S D_S - 16 days ago 5
jQuery Question

Simple slider in jQuery only showing first two pictures after toggling

I know this question has been asked many times already, but I don't seem to find the right solution for me and. I'm trying to create simple slider. When I click on a picture, the other one will be visible. Here is a codepen with the code

Eventually I would actually like to create a carousel like function, that would loop through my items calling

.animate({scrollLeft}) ...
but I'm getting stuck in the loop implementation as well. But baby steps, right?

EDIT: Problem is I'm only toggling the first and then the second picture out of 4.

Thanks for the help guys.

Here is the code:

index.html

<div class=container>
<img class='isActive' src="http://placehold.it/350x150">
<img class='isHidden' src="http://placehold.it/350x150">
<img class='isHidden' src="http://placehold.it/350x150">
<img class='isHidden'src="http://placehold.it/350x150">
</div>


index.scss

html {
box-sizing: border-box;
}

*,
*:before,
*:after {
box-sizing: inherit;
}

body {
background: black;
}

.container {
// display: inline-flex;
}

.slide {

}

.isActive {
visibility: visible;
}

.isHidden {
visibility: hidden;
}


index.js

$(function() {
var allImgItems = $('img');
var items = $('.container').find(allImgItems);

toggleVisibility = function(item) {
item.toggleClass('isHidden');
item.next().removeClass('isHidden').addClass('isActive');
// item.next().removeClass('isHidden').animate( { scrollLeft: 200 + 'px'}, '500', 'swing', function() {console.log('Animation completed') } );
console.log(item);
}

toggleItem = function () {
var item = $('img:first').click(function () { // [QUESTION]The problem is here I think, since I'm just passing the first obj and not the list?
toggleVisibility(item);
})
}
toggleItem();
})

Answer

You can pass event.currentTarget parameter to click function to get current DOM element. And than remove hide class .isHidden from next element, but add same class to that element.

If you click on a last element of slider, get back to first image and do what you need for him. Check working code: codePen

$(function() {


  var allImgItems = $('img');
  var items = $('.container').find(allImgItems);

  allImgItems.click(function(event, index) {

    var item = $(event.currentTarget)
    item.addClass('isHidden');
    item.next("img").removeClass('isHidden').addClass('isActive');
    item.next().removeClass('isHidden').animate({
      scrollLeft: 200 + 'px'
    }, '500', 'swing', function() {
      console.log('Animation completed')
    });

    if ($(this).is(':last-child')) {
      allImgItems.first("img").removeClass('isHidden').addClass('isActive');
    }

  });
})
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
body {
  background: black;
}
.container {
  display: inline-flex;
}
.slide {} .isActive {
  visibility: visible;
}
.isHidden {
  visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=container>
  <img class='isActive' src="https://placehold.it/150x150">
  <img class='isHidden' src="https://placehold.it/150x150">
  <img class='isHidden' src="https://placehold.it/150x150">
</div>

Comments