CODEWITHSUNDEEP
javascriptjqueryhtml
Core
Core

Reputation: 335

jQuery Carousel not working on click

I've been trying to make a carousel function for my website, but I can't seem to get it to work. It uses jQuery and is supposed to fade in and out the photos within the carousel, but when I click on the next and previous buttons, nothing happens.

JS:

$(window).ready(function() {
    $("#slide-next").click(function() {
        $(".carousel-item.visible").fadeOut();
        $(".carousel-item.visible").next().fadeIn("fast", function() {
            $(".carousel-item.visible").removeClass("visible");
            $(this).addClass("visible");
        });
    });
    $("#slide-prev").click(function() {
        $(".carousel-item.visible").fadeOut();
        $(".carousel-item.visible").prev().fadeIn("fast", function() {
            $(".carousel-item.visible").removeClass("visible");
            $(this).addClass("visible");
        });
    });
});

HTML:

<div id='left_scroll'><i id="slide-prev" class="el el-chevron-left"></i>
</div>
<ul class="carousel-list">
    <li class="carousel-item visible">
        <img src='images/ral1.png' />
    </li>
    <li style="display:none;" class="carousel-item">
        <img src='images/ral2.png' />
    </li>
    <li style="display:none;" class="carousel-item">
        <img src='images/ral3.jpg' />
    </li>
    <li style="display:none;" class="carousel-item">
        <img src='images/ral4.jpg' />
    </li>
</ul>
<div id='left_scroll'><i id="slide-next" class="el el-chevron-left"></i>
</div>

Please remember that I am new to jQuery.

Upvotes: 1

Views: 500

Answers (2)

Robin Carlo Catacutan
Robin Carlo Catacutan

Reputation: 13679

It's because when you're on the last element then click next, there's no element to find. And when you are on you're first element then click previous there's also no element to find.

Check out the prev() demo

It will show you the same experience you are having when you're on your first element.

To fix it, add conditions if you're on your first element then you clicked on prev it should target the last element.

$(window).ready(function() {
    $("#slide-next").click(function() {
        // instead of fadeout use `hide` instead to immediately hide 
        $(".carousel-item.visible").hide();
      
        var current = $(".carousel-item.visible");
        // if last child then you are clicking next
        if ( current.is( ".carousel-list li:last-child" ) ) {
          $(".carousel-item:first-child").fadeIn("fast", function() {
              $(".carousel-item.visible").removeClass("visible");
              $(".carousel-item:first-child").addClass("visible");
          });
        }
        else {
          $(".carousel-item.visible").next().fadeIn("fast", function() {
              $(".carousel-item.visible").removeClass("visible");
              $(this).addClass("visible");
          });
        }
    });
    $("#slide-prev").click(function() {
        // instead of fadeout use `hide` instead to immediately hide
        $(".carousel-item.visible").hide();
        var current = $(".carousel-item.visible");
        // if you're on first element then you clicked on prev
        if ( current.is( ".carousel-list li:first-child" ) ) {
          $(".carousel-item:last-child").fadeIn("fast", function() {
              $(".carousel-item.visible").removeClass("visible");
              $(".carousel-item:last-child").addClass("visible");
          });
        }
        else {
          $(".carousel-item.visible").prev().fadeIn("fast", function() {
              $(".carousel-item.visible").removeClass("visible");
              $(this).addClass("visible");
          });
        }
    });
});
ul {
  list-style: none;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css">
                             
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   <div id='left_scroll'><i id="slide-prev" class="el el-chevron-left">Prev</i></div>   
                    <ul class="carousel-list">  
                        <li class="carousel-item visible"><img src='http://dummyimage.com/100x100/000/fff' /></li>  
                        <li style="display:none;" class="carousel-item"><img src='http://dummyimage.com/100x100/f20045/fff' /></li>  
                        <li style="display:none;" class="carousel-item"><img src='http://dummyimage.com/100x100/0044f0/fff' /></li>  
                        <li style="display:none;" class="carousel-item"><img src='http://dummyimage.com/100x100/00f03c/fff' /></li>  
                    </ul> 
                <div id='left_scroll'><i id="slide-next" class="el el-chevron-left">Next</i></div>

Upvotes: 1

harrrrrrry
harrrrrrry

Reputation: 14477

after you make it fadeOut, the next visible selector wont work as there isn't any visible element.

try this:

$("#slide-next").click(function() {
    $(".carousel-item.visible").next().fadeIn("fast");
    $(".carousel-item.visible:first").fadeOut();
});

Upvotes: 0

Related Questions