javascript - 基于文本的 slider ，具有下一个前一个和连续水平 slider

Question

我已经发过与这个问题相关的帖子，我无法得到答案。我的需要是基于文本的连续水平 slider ，带有下一个、上一个选项，没有 slider ，现在我尝试自己的新 slider ，现在我的问题是如何使下一个、上一个选项成为我的代码。我的 slider 代码如下

    (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);

我的 HTML 是

    <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>

如何在此代码中添加下一个和上一个？

Answer 1

我不知道这是否是一个答案，我只是添加一个解决方案而已。有一个 slider 满足您的要求。我已经在我的代码中使用了它，它工作得很好。

Link To Slider , Demo Of Slider

初始化 slider 甚至很简单。

<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');  
});