CODEWITHSUNDEEP
javascriptjqueryhtml
Saqueib
Saqueib

Reputation: 3520

jQuery simple slider next & prev suffling issue

I am trying to figure out why my slider is acting strange, it works as desired if you just keep clinking until its reach to end of slider, but if you try to go back in middle it will shuffle some pics.

Here is the website temp link for demo

I need to hide 3 <li> on every next button click, and show back them when we click back button.

Here is the code i have developed so far.

HTML

<li id="gallery_beachwear">
<div class="imageSlider">
  <ul class="arrow_nav">
    <li><a href="#next" title="Next" class="arrow-active go-next"> &gt; </a></li>
    <li><a href="#prev" title="Prev" class="arrow-disables go-prev"> &lt; </a></li>
    <li><a href="#!/" title="Close" class="closeBtn"> X </a></li>
  </ul>

  <ul class="imgList">
    <li>
        <a href="images/gallery/clothing/a.jpg" rel="Appendix"><span class="zoomImg" style="opacity: 0;"></span>
          <img alt="" src="images/gallery/clothing/a.jpg">
        </a>
    </li>
            <li>
        <a href="images/gallery/clothing/b.jpg" rel="Appendix"><span class="zoomImg" style="opacity: 0;"></span>
          <img alt="" src="images/gallery/clothing/b.jpg">
        </a>
    </li>
  </ul>
</div> <!-- End of slider -->
</li>

I have created a function to re use since i have 2 slider

JS

function imageGallery(ID) {
    var imgList = $(ID),
    items = imgList.find(".imgList li"),
    arrows = imgList.find("ul.arrow_nav"),
    currenItem = 0,
    itemCount = items.length,
    steps = 3;

    arrows.find('a.go-next').bind('click', (function(e){
        e.preventDefault();

        var i = currenItem;
            if(i !== 0) {
                i++;
            }

            if( (itemCount - currenItem ) > 4 ) {
                $(items[i]).hide(200);
                i++;
                $(items[i]).hide(200);
                i++;
                $(items[i]).hide(200);
                currenItem = i; 
            }
            console.log(i);
    }));

    arrows.find('a.go-prev').bind('click', (function(e){
        e.preventDefault();

        var i = currenItem;
            if(i !== 0) {
                i--;
            }

            if( (itemCount - currenItem ) > 0 ) {
                //Hide next
                $(items[i]).show(200);
                i--;
                $(items[i]).show(200);
                i--;
                $(items[i]).show(200);
                currenItem = i; 
            }

            console.log(i);
    }));
}

//Calling function
imageGallery("#gallery_beachwear");

Upvotes: 0

Views: 91

Answers (1)

manassorn
manassorn

Reputation: 450

Your logic is wrong you should change it to

arrows.find('a.go-next').bind('click', (function(e){
    e.preventDefault();
    var i = currenItem;
    if( (itemCount - currenItem ) > 3 ) {
        $(items[i]).hide(200);
        i++;
        $(items[i]).hide(200);
        i++;
        $(items[i]).hide(200);
        i++;
        currenItem = i; 
    }
}));
arrows.find('a.go-prev').bind('click', (function(e){
    e.preventDefault();
    var i = currenItem;
    if( (currenItem ) > 0 ) {
        //Hide next
        i--;
        $(items[i]).show(200);
        i--;
        $(items[i]).show(200);
        i--;
        $(items[i]).show(200);
        currenItem = i; 
    }
    console.log(i);
}));

Upvotes: 2

Related Questions