Javascript 基于文本的滑块，带有下一个上一个滑块和连续水平滑块

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

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

（函数（$）{
$.fn.jslider=函数（选项）{
变量配置={
速度：1000，
暂停：2000年，
过渡：“褪色”
},
选项=$.extend（配置，选项）；
这个。每个（函数（）{
var$this=$（this）；
$this.wrap（“”）；
$this.css({
“宽度”：“4440px”，
'位置'：'相对'，
“填充”：“0”
}); 
如果（options.transition==='slide'）{
$this.children（）.css({
‘float’：‘left’，
“列表样式”：“无”
});
$（'.slider_content'）.css({
“宽度”：$this.children（）.width（），
“溢出”：“隐藏”
});
幻灯片（）
}
函数幻灯片（）{
setInterval（函数（）{
$this.animate（{'left'：'-'+$this.parent（）.width（）}，options.speed，function（））{
美元这个
.css（'left'，0）
.children（“：first”）
.appendTo（$this）；
})
}，选项。暂停）；
}
//侧功能端
});
}
})（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>

测试

1 Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum一直是业界标准的虚拟文本
Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum一直是业界标准的虚拟文本
3 Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum一直是业界标准的虚拟文本
4 Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum一直是业界标准的虚拟文本
5 Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum一直是业界标准的虚拟文本

---

如何将“下一个”和“上一个”添加到此代码？

我不知道这是否是一个答案，我正在添加一个解决方案，仅此而已。有一个滑块与您的要求。我已经在我的代码中使用了它，它工作得很好

,

初始化滑块甚至很简单

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

一,
二,
三,
四,
五,

以前的
下一个
$（文档）.ready（函数（）{
$（“#viewport”）.carousel（“#simplePrevious”，“#simpleNext”）；
$（'slider stage'）.carousel（'previous'，'next'）；
});

我不知道这是否是一个答案，我正在添加一个解决方案，仅此而已。有一个滑块与您的要求。我已经在我的代码中使用了它，它工作得很好

,

初始化滑块甚至很简单

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

一,
二,
三,
四,
五,

以前的
下一个
$（文档）.ready（函数（）{
$（“#viewport”）.carousel（“#simplePrevious”，“#simpleNext”）；
$（'slider stage'）.carousel（'previous'，'next'）；
});

我自己也在寻找类似的东西。但我正在寻找一个无限滚动文本。浏览网页，我发现这个“无限滚动水平文本”是克里斯托的笔。也许有帮助

HTML JS

---

我自己也在找类似的东西。但我正在寻找一个无限滚动文本。浏览网页，我发现这个“无限滚动水平文本”是克里斯托的笔。也许有帮助

HTML JS

---

你可以在jsfiddle中添加一个但不起作用的插件。你需要将jslider插件添加到jsfiddle中的外部资源对不起，我对所有东西都是新的，只是我粘贴了我使用的代码。请帮助我。只需在此处粘贴jslider插件的链接。你可以在JSFIDLE中添加一个，但在JSFIDLE中无法使用我们的配置。你需要将jslider插件粘贴到JSFIDLE中的外部资源对不起，我对所有东西都是新的，只是粘贴了我使用的代码。请帮助我。只需在此处粘贴jslider插件的链接

body,div,ul,li,p {
    margin:0;
    padding:0;
}

/*
    CUSTOM STYLES
*/
.holder {
    position:relative;
    top:100px;
    left:100px;
    width:200px;
    height:150px;
    background-color:red;
    overflow:visible;
}

.holder.hide-overflow {
    overflow:hidden;
}

ul.list {
    position:relative;
    display:inline-block;
    background-color:#000;
    list-style:none;
}

ul.list.cloned {
    position:absolute;
    top:0;
    left:0;
    background-color:lime!important;
}

ul.list li {
    background-color:blue;
    float:left;
    width:200px;
    height:150px;
    text-align:center;
    font-size:30px;
}

var $holder = $(".holder");
var $list = $holder.find("ul.list");
var $clonedList = $list.clone();

var listWidth = $list.find("li").length * 200;
var endPos = $holder.width() - listWidth;

$list.add($clonedList).css({
    "width" : listWidth + "px"
});

$clonedList.addClass("cloned").appendTo($holder);

//TimelineMax
var infinite = new TimelineMax({repeat: -1, paused: false});
var time = 5;

infinite.fromTo($list, time, {left:0}, {left: -listWidth, ease: Linear.easeNone}, 0);
infinite.fromTo($clonedList, time, {left:listWidth}, {left:0, ease: Linear.easeNone}, 0);
infinite.set($list, {left: listWidth});
infinite.to($clonedList, time, {left: -listWidth, ease: Linear.easeNone}, time);
infinite.to($list, time, {left: 0, ease: Linear.easeNone}, time);

//Pause/Play

$holder.on("mouseenter", function(){
    infinite.pause();
}).on("mouseleave", function(){
    infinite.play();
});

//Show/Hide overflow
$("#ov").on("click", function(){
    $holder.removeClass("hide-overflow");
});

$("#oh").on("click", function(){
    $holder.addClass("hide-overflow");
});