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>

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

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

修改
不知怎的，似乎我把这个问题描述得不是很好。所以我尝试更好：

所以首先，carousell是用于展示图片的原始内容： http://www.w3schools.com/bootstrap/bootstrap_carousel.asp

我知道在每个＆＃34; Page＆＃34;内部使用不同的形式。旋转木马。你可以去下一个＆＃34; Page＆＃34;如果单击右侧的按钮，则单击右侧按钮或最后一个旋转木马。

现在我唯一的问题是 - 因为这将成为一项调查 - 当第一个问题加载的第一页时，用户可以点击左侧的按钮并转到旋转木马的末尾（最后一页/页面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;}

Bootstrap Carousel Don从头开始

1 个答案: