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

Posted 2023-02-25

【中文标题】基于文本的滑块，下一个上一个带有连续水平滑块

【英文标题】：Text based slider with next previous with continuous horizontal slider

【发布时间】：2013-06-11 09:46:09

【问题描述】：

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

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

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

【问题讨论】：

你能加个jsfiddle.net

jsfiddle.net/srrMA 但在 jsfiddle 中无法正常工作。

你需要将 jslider 插件添加到你的 jsfiddle 中的外部资源

对不起，我只是粘贴了我使用的代码。请帮助我。

把jslider插件的链接粘贴到这里

【参考方案1】：

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

Link To Slider , Demo Of 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');  
);

【参考方案2】：

我自己也在寻找类似的东西。但我正在寻找无限滚动的文本。浏览网页，我发现了这个“无限滚动水平文本”A PEN BY Chrysto。也许这有帮助？

http://codepen.io/bassta/pen/tEarb

HTML

<button id="ov">Overflow Visible</button> 
<button id="oh">Overflow Hidden</button>

    <div class="holder">
        <ul class="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>

CSS

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;

JS

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