HTML:

<div id="container"> <div class="currentLeft"> First Div </div> <div class="current"> Second Div </div> <div class="currentRight"> Third Div </div> </div> <a href="#" id="previous">Previous</a> <a href="#" id="next">Next</a> <a href="#" id="add">Add content</a> ​ 

CSS:

/*the main div that contains all the sliding div*/ #container{ width:100px; border:1px solid #000; height:20px; position: relative; overflow:hidden; } /*there are 3 different classes * current - div that is presently visible * currentLeft - div that should slide from left on pressing previous * currentRight - div that should slide from right on pressing next */ .current{ width:99px; height:auto; position: absolute; float: left; left:0px; } .currentLeft{ width:99px; height:auto; position: absolute; left:-100px; float:left; } .currentRight{ width:99px; height:auto; position: absolute; left:100px; float:left; } 

jQuery:

$('#next').click(function(){ //slide a div only if there is a next element if($('.currentRight').length >0) { $('.current').animate({left:'-100px'}).removeClass('current').addClass('currentLeft').next().animate({left:'0px'}).removeClass('currentRight').addClass('current'); } }); $('#previous').click(function(){ //slide a div only if there is a previous element if($('.currentLeft').length >0) { $('.current').animate({left:'100px'}).removeClass('current').addClass('currentRight').prev().animate({left:'0px'}).removeClass('currentLeft').addClass('current'); } }); $('#add').click(function(){ //it is used for simplicity's sake. I intend to use append()/prepend() to add more content var cont = $('.current').html()+'More<br/>'; $('.current').html(cont); var ht = $('.current').css('height'); $('#container').css('height',ht); }); 

​The demo can be seen at : [http://jsfiddle.net/gentrobot/RY3TH/2/][1]

I am planning to write a plugin for this later. [1]: http://jsfiddle.net/gentrobot/RY3TH/2/

I am planning to write a plugin for this later. 

jsFiddle

 $('#next').click(function(){ //slide a div only if there is a next element if($('.currentRight').length >0) { $('.current').animate({left:'-100px'}).removeClass('current').addClass('currentLeft').next().animate({left:'0px'}).removeClass('currentRight').addClass('current'); } }); $('#previous').click(function(){ //slide a div only if there is a previous element if($('.currentLeft').length >0) { $('.current').animate({left:'100px'}).removeClass('current').addClass('currentRight').prev().animate({left:'0px'}).removeClass('currentLeft').addClass('current'); } }); $('#add').click(function(){ //it is used for simplicity's sake. I intend to use append()/prepend() to add more content var cont = $('.current').html()+'More<br/>'; $('.current').html(cont); var ht = $('.current').css('height'); $('#container').css('height',ht); }); 

 /*the main div that contains all the sliding div*/ #container{ width:100px; border:1px solid #000; height:20px; position: relative; overflow:hidden; } /*there are 3 different classes * current - div that is presently visible * currentLeft - div that should slide from left on pressing previous * currentRight - div that should slide from right on pressing next */ .current{ width:99px; height:auto; position: absolute; float: left; left:0px; } .currentLeft{ width:99px; height:auto; position: absolute; left:-100px; float:left; } .currentRight{ width:99px; height:auto; position: absolute; left:100px; float:left; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"> <div class="currentLeft"> First Div </div> <div class="current"> Second Div </div> <div class="currentRight"> Third Div </div> </div> <a href="#" id="previous">Previous</a> <a href="#" id="next">Next</a> <a href="#" id="add">Add content</a> ​

The demo can be seen at : [http://jsfiddle.net/gentrobot/RY3TH/2/][1]

HTML:

<div id="container"> <div class="currentLeft"> First Div </div> <div class="current"> Second Div </div> <div class="currentRight"> Third Div </div> </div> <a href="#" id="previous">Previous</a> <a href="#" id="next">Next</a> <a href="#" id="add">Add content</a> ​ 

CSS:

/*the main div that contains all the sliding div*/ #container{ width:100px; border:1px solid #000; height:20px; position: relative; overflow:hidden; } /*there are 3 different classes * current - div that is presently visible * currentLeft - div that should slide from left on pressing previous * currentRight - div that should slide from right on pressing next */ .current{ width:99px; height:auto; position: absolute; float: left; left:0px; } .currentLeft{ width:99px; height:auto; position: absolute; left:-100px; float:left; } .currentRight{ width:99px; height:auto; position: absolute; left:100px; float:left; } 

jQuery:

$('#next').click(function(){ //slide a div only if there is a next element if($('.currentRight').length >0) { $('.current').animate({left:'-100px'}).removeClass('current').addClass('currentLeft').next().animate({left:'0px'}).removeClass('currentRight').addClass('current'); } }); $('#previous').click(function(){ //slide a div only if there is a previous element if($('.currentLeft').length >0) { $('.current').animate({left:'100px'}).removeClass('current').addClass('currentRight').prev().animate({left:'0px'}).removeClass('currentLeft').addClass('current'); } }); $('#add').click(function(){ //it is used for simplicity's sake. I intend to use append()/prepend() to add more content var cont = $('.current').html()+'More<br/>'; $('.current').html(cont); var ht = $('.current').css('height'); $('#container').css('height',ht); }); 

​The demo can be seen at : [http://jsfiddle.net/gentrobot/RY3TH/2/][1]

I am writing code for a very basic jQuery slider with the following features:

1. Slide the content left or right on click of next/previous links till there is no more content on the clicked side.
2. If any content is added dynamically, the entire content should slide.

There still need to be too many addition and modifications, I would like to know if my approach is correct and the code that I am writing is going the correct way.

The demo can be seen at : [http://jsfiddle.net/gentrobot/RY3TH/2/][1]

I am planning to write a plugin for this later. [1]: http://jsfiddle.net/gentrobot/RY3TH/2/

I am writing code for a very basic jQuery slider with the following features:

1. Slide the content left or right on click of next/previous links till there is no more content on the clicked side.
2. If any content is added dynamically, the entire content should slide.

While there are still many additions and modifications necessary, I would like to know if my approach is correct and the code that I am writing is going the correct way.

The demo can be seen at : [http://jsfiddle.net/gentrobot/RY3TH/2/][1]

I am planning to write a plugin for this later. [1]: http://jsfiddle.net/gentrobot/RY3TH/2/