CODEWITHSUNDEEP
javascriptjqueryanimationscroll
baby machinery
baby machinery

Reputation: 83

jQuery Horizontal Scrolling animation not working

I'm having trouble in jquery horizontal scroll animation. i'm rendering all of list data from database. it should visible only 4 item always. but on scroll its not showing hidden items and not showing 4 items. and also scroll stops after single scroll i want it to scroll until it reach end of list. how to solve please.

[Style]

* {
    margin: 0;
    padding: 0;
    list-style: none;
}

#content {
    width: 500px;
}

.scroller {
    border: 1px solid #f00;
    height: 100px;
    width: auto;
    overflow: hidden;
}

    .scroller li {
        float: left;
    }

    .scroller li {
        width: 24.5%;
        height: 100%;
        text-align: center;
        border: 1px solid #444;
    }

.item {
    background: green;
    position: relative;
}

[html]

<div id="content">
    <ul class="scroller">
        <li class="item">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
        <li class="item">5</li>
        <li class="item">6</li>
    </ul>
    <a href="javascript:void(0);" id="prev">&laquo;</a>
    <a href="javascript:void(0);" id="next">&raquo;</a>
</div>

[jquery]

$(document).ready(function () {
    var $item = $('li.item'),
    visible = 4,
    index = 0,
    endIndex = ($item.length / visible) - 1;
    $('#next').click(function () {
        if (index < endIndex) {
            index++;
            $item.animate({ 'left': '-=100px' });
        }
    });
    $('#prev').click(function () {
        if (index > 0) {
            index--;
            $item.animate({ 'left': '+=100px' });
        }
    });
});

enter image description here

Upvotes: 0

Views: 272

Answers (1)

Z-Bone
Z-Bone

Reputation: 1584

Try this snippet. I changed your css and code just a bit

$(document).ready(function() {
var $item = $('li.item'), 
visible = 4, 
index = 0,
endIndex = ( $item.length - visible ) -1; 
$('#content').css('width', visible * 100 + 'px');
$('#next').click(function(){
  if (index <= endIndex) {
    index++;
    $item.animate({'left':'-=100px'});
  }
});
$('#prev').click(function(){
    if (index > 0) {
      index--;
      $item.animate({'left':'+=100px'});
    }
  });
});
* {margin:0;padding:0;list-style: none;}
#content{width:500px;}
.scroller{border:1px solid #f00;height:100px;width:auto;overflow:hidden; display: -webkit-box;}
.item{
  background:green;
  position:relative;
  float:left;
  width:98px;
  height:100%;
  text-align:center;
  border:1px solid #444;} 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
    <ul class="scroller">
        <li class="item">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
        <li class="item">5</li>
        <li class="item">6</li>
        <li class="item">7</li>
        <li class="item">8</li>
        <li class="item">9</li>
        <li class="item">10</li>
    </ul>
    <a href="javascript:void(0);" id="prev">&laquo;</a>
    <a href="javascript:void(0);" id="next">&raquo;</a>
</div>

Upvotes: 1

Related Questions