abdulheru abdulheru - 7 months ago 32
Javascript Question

Text based slider with next previous with continuous horizontal slider

I have already post related to this question, I cant get the answer. My need is text base continuous horizontal slider with next, previous option there is no slider, now I try my own new slider, now my question is how can make the next, previous to my code. my slider code is below

(function($) {

$.fn.jslider = function(options){
var config = {
speed : 1000,
pause : 2000,
transition : 'fade'
},
options = $.extend(config,options);
this.each(function(){


var $this = $(this);
$this.wrap('<div class="slider_content" />');
$this.css({
'width':'4440px',
'position':'relative',
'padding':'0'
});

if(options.transition === 'slide'){
$this.children().css({
'float' : 'left',
'list-style' : 'none'

});
$('.slider_content').css({
'width': $this.children().width(),
'overflow':'hidden'
});
slide()
}
function slide(){
setInterval(function(){
$this.animate({'left':'-'+ $this.parent().width()},options.speed,function(){
$this
.css('left',0)
.children(':first')
.appendTo($this);
})
},options.pause);
}

//Sider Function end
});

}

})(jQuery);


And my HTML is

<div class='prev'>test</div>
<div class="slider_capsule">

<ul class="slider">
<li> 1 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever</li>
<li> 2 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever</li>
<li> 3 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever</li>
<li> 4 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever</li>
<li> 5 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever</li>
</ul>
</div>
</div>


How can add next and previous to this code?

Answer

I dont know it is an answer or not, I am adding a solution thats all. There is a slider with your requirement. I have used it in my code it works fine.

Link To Slider , Demo Of Slider

Initialising slider is even simple.

<div id="viewport">
<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
</ul>
</div>
<a id="previous">Previous</a>
<a id="next">Next</a>

$(document).ready(function(){
    $('#viewport').carousel('#simplePrevious', '#simpleNext');
    $('#slider-stage').carousel('#previous', '#next');  
});