Search code examples
jquerycarousel

Simple carousel prev/next jquery function - prev function not working

I have a problem in "PREV" jquery function in the following carousel, please help.

<div id="carousel">
    <div id="product-detail-image-wrapper">
        <div id="product-detail-image-inner-wrapper">
            <img class="product-detail-image" src="images/01.jpg" />
            <img class="product-detail-image" src="images/02.jpg" />
            <img class="product-detail-image" src="images/03.jpg" />
            <img class="product-detail-image" src="images/04.jpg" />
            <img class="product-detail-image" src="images/05.jpg" />
        </div>
        <img id="image-control-left" src="images/left-arrow.png" onclick="showPrev();" />
        <img id="image-control-right" src="images/right-arrow.png" onclick="showNext();" />                         
    </div>
</div>

The showNext() function is working perfect. But the showPrev() is not working.

At the beginning, only the first image will show, others will not show.

$(document).ready(function(){
    //hide all the images except the first one...
    $('#product-detail-image-inner-wrapper img:gt(0)').hide();
});

function showNext() {
    $('#product-detail-image-inner-wrapper :first-child').fadeOut()
        .next('img').fadeIn()
        .end().appendTo('#product-detail-image-inner-wrapper');                     
    
}

function showPrev() {
    $('#product-detail-image-inner-wrapper :first-child').fadeOut()
         .last('img').fadeIn()
         .end().prependTo('#product-detail-image-inner-wrapper');                       
}

Can anyone please tell me what the error in showPrev() function? I tried so many times, but doesn't work. Much appreciated.

In showNext() function, when clicking "next" button, image "01" will fade out and image "02" will fade in, and then image "01" will go to the end of the list like this :

<div id="product-detail-image-inner-wrapper">
    <img class="product-detail-image" src="images/02.jpg" />
    <img class="product-detail-image" src="images/03.jpg" />
    <img class="product-detail-image" src="images/04.jpg" />
    <img class="product-detail-image" src="images/05.jpg" />
    <img class="product-detail-image" src="images/01.jpg" />
</div>

The last 4 lines above will be set to "display:none;". I am expecting the same behavior in the reverse pattern in showPrev() function.

Solution

  • If you had turn on your DevTols you would see that right image was not selected nor moved properly to first place.

    When moving backwards you need to: fade out first image, find last one, fade it in and move to first position.

    function showPrev() {
  $('#product-detail-image-inner-wrapper :first-child').fadeOut()
    .nextAll('img:last-of-type').fadeIn().end();
  $("#product-detail-image-inner-wrapper :last-child").prependTo('#product-detail-image-inner-wrapper');
}

    Working example:

    $(document).ready(function() {
  //hide all the images except the first one...
  $('#product-detail-image-inner-wrapper img:gt(0)').hide();
});

function showNext() {
  $('#product-detail-image-inner-wrapper :first-child').fadeOut()
    .next('img').fadeIn()
    .end().appendTo('#product-detail-image-inner-wrapper');

}

function showPrev() {
  $('#product-detail-image-inner-wrapper :first-child').fadeOut()
    .nextAll('img:last-of-type').fadeIn().end();
  $("#product-detail-image-inner-wrapper :last-child").prependTo('#product-detail-image-inner-wrapper');
}
    img {
  max-width: 200px;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="carousel">
  <div id="product-detail-image-wrapper">
    <div id="product-detail-image-inner-wrapper">
      <img class="product-detail-image" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.dAEeeFKKWyKvfi09BT_b7QHaFj%26pid%3DApi&f=1" title="1" />
      <img class="product-detail-image" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.hUrigs4oGP1BPza_niQmnQHaFh%26pid%3DApi&f=1" title="2" />
      <img class="product-detail-image" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.w4J0Joa9SQJjntfW3Bl2kgHaD5%26pid%3DApi&f=1" title="3" />
      <img class="product-detail-image" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.QEM5dAvEzjYwaND5AmgsQgHaEM%26pid%3DApi&f=1" title="4" />
      <img class="product-detail-image" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.loIp0wgsX2e_eppiqs-pvgHaHa%26pid%3DApi&f=1" title="5" />
    </div>
    <button id="image-control-left" onclick="showPrev();">-</button>
    <button id="image-control-right" onclick="showNext();">+</button>
  </div>
</div>