Not able to slide the div content using jquery

综合技术 2018-02-20 阅读原文

I'm trying to move the images inside a div to the left one by one.But i'm only able to move one image on click of a button.I'm looking to slide the images inside a div. Here is my code on jsfiddle.

Problem courtesy of: iJade


jsFiddle demo

  • Once you reach the last image it would be goot to turn your slider to the starting position, so let's use Modulus
    to turn our counter to '0'.
  • Than just move your slider doing some basic math: -300px * the current Counter value

After each click counter will increase, but once it reaches the number of images 4
it will jump back to value 0
- 300px * 0 = 0
and that will slide your gallery back to '0px' left.


var imgN = $('#slide div img').length; // number of images
var c = 0; // just a Counter
$("#btn").click(function() {
    c = ++c % imgN;      // once it reaches the imgN will turn to '0'
    $("#slide div").animate({left: -300*c }, "fast");   // let's use our math!

Modified CSS:

        height: 300px;
        overflow: hidden;
    #slide div{
        position: absolute;
        left: 0px;
        width:9000px;    /*make sure to have a big value here if you don't want to do it dynamically with jQUery*/
   #slide img{
        vertical-align: top;
        height: 300px;
        width: 300px;

Solution courtesy of: Roko C. Buljan

CSS3 Recipes

责编内容by:CSS3 Recipes阅读原文】。感谢您的支持!


jQuery slideToggle and CSS border-radius propery s... I am using MVC4 and in my page I took 4 div and all div. I have JSFiddle ...
jQuery中的事件 虽然利用原生的JavaScript事件能完成一些交互,但jQuery增加并扩展了基本的事件处理机制。jQuery不仅提供了更加优雅的事件处理语法,而且极大...
出位的template.js 基于jquery的模板渲染插件,简单、好用... 找了好几款基于jquery的模板渲染插件,无一感觉很难用(教程较少、绑定不统一),也可能我智商问题,比如jquery template.js 、jtemp...
Allow only letters and spaces – jquery valid... Regex validation Allow only character and space in ...
Does JQuery try to insert HTML from another div dy... This is really hard to explain. I have some divs with an id within a table ...