Can't make my image slider, slide

Question

I'm trying to build a slider from scratch but I am having some issues.

Here is my concept: I am using 3 divs with the same class="carr" (ATT), and I am trying to do the following, if the div is :visible, when I click the 'next' button, that div will be hidden, and the div immediately after that one shows instead. This process repeats for div's after. When the last div is :visible if would have something in the lines of "if the last element is visible, on click of next button show first div' from this it would be the same process as before. The process for the previous button would be likewise.. for same methods. Can I get some help? I will post the codes and a pen at the end.

HTML:

<div id="slider">

  <div id="a" class="carr">A</div>
  <div id="b" class="carr">B</div>
  <div id="c" class="carr">C</div>

</div>

<div id="butons">
  <button id="ca">←</button>
  <button id="fu">→</button>
</div>  

CSS:

body{
  background:indigo;
}

#butons{
  margin-right:20px;
  float:right;
}

button{
  border: 0;
  background: DarkSlateGray ;
  height:20px;
  width:50px;
  margin-right:10px;
  color:white;
  outline: none;
}

#a,#b,#c{
  float:left;
  color:white;
  font-size:20px;
  width:50px;
  height:50px;
  background:crimson;
  text-align:center;
  margin-left:10px;
}

#b, #c{
  display:none;
}

My basic and lame JQuery attempt...:

$(document).ready(function(){

   $('#fu').click(function(){

    if($('.carr').is(':visible')){

      $('.carr').parent().next(".carr").show();

    }

    else{
      alert();
    }

  });

});

And here is the PEN.

Answer 1

It would probably be best just to toggle a hidden class.

HTML:

  <div class="carr">A</div>
  <div class="carr hidden">B</div>
  <div class="carr hidden">C</div>
  <!-- ... -->

</div>

<div id="butons">
  <button id="ca">←</button>
  <button id="fu">→</button>
</div>  

CSS:

body{
  background:indigo;
}

#butons{
  margin-right:20px;
  float:right;
}

button{
  border: 0;
  background: DarkSlateGray ;
  height:20px;
  width:50px;
  margin-right:10px;
  color:white;
  outline: none;
}

.hidden {
  display:none;
}

.carr {
  position: absolute;
  float:left;
  color:white;
  font-size:20px;
  width:50px;
  height:50px;
  background:crimson;
  text-align:center;
  margin-left:10px;
}

JavaScript:

$(function(){

    var slides   = [],
        curSlide = 0;

    $('.carr').each(function(i) {
        slides[i] = $(this);
    });

    $('#ca, #fu').click(function() {
        slides[curSlide].addClass('hidden');
        if ($(this).attr('id') === 'fu') {
            curSlide = (curSlide < slides.length - 1) ? curSlide + 1 : 0;
        } else {
            curSlide = (curSlide > 0) ? curSlide - 1 : slides.length - 1;
        }
        slides[curSlide].removeClass('hidden');
    });

});

Pen: http://codepen.io/scheisse_minelli/pen/mCxuD

Answer 2

This should do it.

The problem was here:

if($('.carr').is(':visible')){

  $('.carr').parent().next(".carr").show();

}

First off, $('.carr') selects all the divs with a class of carr. You are then asking jQuery if they are all visible which, of course, they never are.

But even if the conditional worked, inside of it, $('.carr').parent().next(".carr").show() actually selects the next div from the parent, which would be the div containing the buttons.

What you want to do is this:

var current = $('.carr:visible');
var next;

if (current.is(':last-child')) {
  next = current.siblings(':first-child');
} else {
  next = current.next();
}

current.hide();
next.show();

First, I select the only visible element with the carr class. Then I check if it's the last child of its parent. If so, I select the first child as the next item to show. Otherwise, I simply select the next one. Then I hide the current one and show the next one.

I hope this helps!