Trying to create a carousel effect using jQuery

Question

When a page loads, four characters are displayed, of which only one is displayed. There are two arrows. One on the left and one on the right. When you press the left arrow, the present character disappears, and the previous character disappears. When you press the right arrow, the present character disappears, and the next character disappears. I figured out how to fadeOut the current character on the screen, but I don’t know how to fadeIn the next or previous character when they click on the arrows.

Here is the fiddle I created to illustrate the problem: http://jsfiddle.net/9K7bf/32/

And here is the code:

HTML:

<section id="characters">
    <div id="one" class="character"></div>
    <div id="two" class="character"></div>
    <div id="three" class="character"></div>
    <div id="four" class="character"></div>
</section>

<div id="arrow-left"></div>
<div id="arrow-right"></div>

CSS

#characters{
    width: 100%;
    height: 100px;
}
#one{
    height: 50px;
    width: 50px;
    display: block;
    background-color: green;
    margin: 100px auto;
}
#two{
    height: 50px;
    width: 50px;
    display: none;
    background-color: blue;
    margin: 100px auto;
}
#three{
    height: 50px;
    width: 50px;
    display: none;
    background-color: purple;
    margin: 100px auto;
}
#four{
    height: 50px;
    width: 50px;
    display: none;
    background-color: black;
    margin: 100px auto;
}
#arrow-left{
    height: 25px;
    width: 25px;
    display: block;
    background-color: black;
    float: left;
}
#arrow-right{
    height: 25px;
    width: 25px;
    display: block;
    background-color: black;
    float: right;
}

JQuery

$(document).ready(function(){
  $("#arrow-right").on('click', function(){
    $(".character").fadeOut().this();
  });  
    $("#arrow-left").on('click', function(){
    $(".character").fadeOut().this();
  });
});

Answer 1

, . , , , .

, class='arrow' .

$(document).ready(function() {
  var i = 0; // Counter variable to keep track of the current item
  $("#arrow-right").on('click', function() {
    $(".character").eq(i).fadeOut('fast'); // Quickly fade out the current element
    i = i < 3 ? i + 1 : 0; // Increment counter till it reaches 3 (because element index is from 0 to 3). If it reaches 3 then we reset to 0 to loop back again.
    $(".character").eq(i).fadeIn('slow'); // Slowly fade in the next element. Note i here is the next element because we have already incremented the counter.
  });
  $("#arrow-left").on('click', function() {
    $(".character").eq(i).fadeOut('fast');
    i = i > 0 ? i - 1 : 3; // Same as for the right click except here the logic is reverse as we have to go back.
    $(".character").eq(i).fadeIn('slow');
  });
});

#characters {
  width: 100%;
  height: 100px;
  position: relative; /* Need because the characters would be absolutely positioned relative to their parent box */
}
.character { /* Created this class to put in all common properties to avoid repetition */
  height: 50px;
  width: 50px;
  position: absolute; /* This is required because all elements have to be positioned one on top of another */
  left: 50%; /* Required for positioning the boxes */
  top: 50%;  /* Required for positioning the boxes */
}
#one {
  display: block;
  background-color: green;
}
#two {
  display: none;
  background-color: blue;
}
#three {
  display: none;
  background-color: purple;
}
#four {
  display: none;
  background-color: black;
}
.arrow { /* Common class for common properties */
  height: 25px;
  width: 25px;
  display: block;
  background-color: black;
}
#arrow-left {
  float: left;
}
#arrow-right {
  float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<section id="characters">
  <div id="one" class="character"></div>
  <div id="two" class="character"></div>
  <div id="three" class="character"></div>
  <div id="four" class="character"></div>
</section>
<div id="arrow-left" class='arrow'></div> <!-- Note the addition of class -->
<div id="arrow-right" class='arrow'></div>

Hide result

Answer 2

jsfiddle. , , , , (. activeItem ).

, , . , , , , :

• , .
• ( , (: javascript ))
• .
• fade-in , display:block ( CSS). , , . position: absolute position: fixed CSS, .

:

$(document).ready(function(){
    // store what current
    var activeItem = 0;

    $("#arrow-right").on('click', function(){
        $(".character").eq(activeItem).fadeOut();
        activeItem++;
        $(".character").eq(activeItem).fadeIn();
    });  

    $("#arrow-left").on('click', function(){
        $(".character").eq(activeItem).fadeOut();
        activeItem--;
        $(".character").eq(activeItem).fadeIn();
    });
});

jsfiddle

Answer 3

.next() .prev(). : , "" , .

$(document).ready(function(){

$("#arrow-right").on('click', function(){
    var next = $(".character:visible").next().attr("id");
    $(".character").fadeOut();
    $("#"+next).fadeIn();
});  
$("#arrow-left").on('click', function(){
    var prev = $(".character:visible").prev().attr("id");
    $(".character").fadeOut();
    $("#"+prev).fadeIn();
});
});

EDIT: , if statement. else, css , .

$(document).ready(function(){

    $("#arrow-right").on('click', function(){
        var next = $(".character:visible").next().attr("id");
        if(next){
            $(".character").fadeOut();
            $("#"+next).fadeIn();
        }
    });  
    $("#arrow-left").on('click', function(){
        var prev = $(".character:visible").prev().attr("id");
        if(prev){
            $(".character").fadeOut();
           $("#"+prev).fadeIn();
        }
    });
});

Answer 4

javascript , . , . script - . css.

With the number of free jquery sliders, why not just use a plugin like Nivo? Or google "How to create a jquery slider from scratch." There are several tutorials there.