Bootstrap Carousel 不要从头开始

Question

我正在使用轮播进行一项精美的调查。

<div id="myCarousel" class="carousel slide" data-interval="false" data-ride="carousel" style="vertical-align: center">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        ...
        <li data-target="#myCarousel" data-slide-to="n"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            page 1
        </div>

        <div class="item">
            page 2                            
        </div>

        ...

        <div class="item">
            page n
        </div>
    </div>

    <!-- Left and right controls -->
    <a class="left" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>                    
        <span class="sr-only">Previous</span>
    </a>
    <a class="right" href="#myCarousel" role="button" data-slide="next">                    
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

有没有办法让 carousel 表现得更像一个滑动窗口，这意味着不可能进入 n 元素 carousel：

• 从第 1 页到第 n 页
• 从第 n 页到第 1 页

编辑
不知何故，我似乎没有很好地描述这个问题。所以我会尝试更好：

首先，carousell 的原始用途是用于显示图片： http://www.w3schools.com/bootstrap/bootstrap_carousel.asp

我知道在轮播的每个“页面”中使用不同的形式。 您可以通过点击右侧的按钮进入轮播的下一个“页面”，如果您点击右侧的按钮，您可以转到最后一页。

现在我唯一的问题是 - 因为这将成为一项调查 - 当第一个页面加载我的第一个问题时，用户可以单击左侧的按钮并转到轮播的末尾（最后一页/第 n 页)。

是否可以禁用此功能？

Answer 1

我相信还有更优雅的解决方案，但这可能会让你开始：

jsFiddle Demo

HTML：

<div class="container">
    <div class="row">
        <div id="s1" class="slide">
          <div class="shead">Slide Title 1</div>
          <div class="sbody">Here is body of slide 1 with questions</div>
          <div class="sfoot"><button>Next</button></div>
        </div><!-- .slide -->
        <div id="s2" class="slide">
          <div class="shead">Slide Title 2</div>
          <div class="sbody">Here is body of slide 2 with questions</div>
          <div class="sfoot"><button>Next</button></div>
        </div><!-- .slide -->
        <div id="s3" class="slide">
          <div class="shead">Slide Title 3</div>
          <div class="sbody">Here is body of slide 3 with questions</div>
          <div class="sfoot"><button>Next</button></div>
        </div><!-- .slide -->
        <div id="s4" class="slide">
          <div class="shead">Slide Title 4</div>
          <div class="sbody">Thank you for taking this survey</div>
        </div><!-- .slide -->
    </div><!-- .row -->
</div><!-- .container -->

JS：

var cnt=1;
$(function(){

    $('body').css({'background':'wheat'});
    $('#s'+cnt).css({'margin-left':0});
  $('button').click(function(){
      $('#s'+cnt).animate({
        marginRight:'100%'
      },500);
        cnt++;
      $('#s'+cnt).animate({
        marginLeft:'0%'
      },500,function(){
            //reset slide position, in case you wish to add a "Go Back one slide" btn
            $('#s'+cnt-1).css({'margin-left':'100%'});
      });
  });

});//END document.ready

CSS：

html,body{height:500px;width:100%;overflow:hidden;}
div{position:relative;}
.row{height:400px;width:100%;}
.slide{position:absolute;top:0;margin-left:100%;height:100%;width:100%;padding:20px;}
.shead{height:50px;width:100%;color:#aaa;background:#222;}
.sbody{height:300px;width:100%;padding:20px;}
.sfoot{height:50px;width:100%;}
.sfoot button{padding:12px 20px;background:darksteelgrey;color:#888;}
#s1{color:white;background:darkcyan;}
#s2{color:yellow;background:red;}
#s3{color:#333;background:palegreen;}
#s4{color:yellow;background:blue;font-size:2rem;}