不使用引导程序的Scroller

Question

我有一段代码，我称之为“滚动器”，它基本上是将用户从一个按钮切换到另一个按钮，然后用箭头按钮向后切换。当我不使用引导程序时，它可以很好地工作，但是现在我正在尝试使用引导程序，它将无法工作。以下是代码：

​

/*START MINE SCROLLER CONTROL*/
#containerms {
    position: absolute;
    margin: 0px;
    padding: 0px;
    width: 49%;
    height: 100%;
    overflow: hidden;
}
.boxms {
    position: absolute;
    width: 50%;
    left: 150%;
    top: 100px;
    margin-left: -25%;
    
}
#box1ms {
    left: 50%;
}

.movems {
    position:fixed;
    z-index:2;
    top:50%;
    margin-top:-20px;
    text-align:center;
    padding:20px;
    background:#fff;
    color: #000;
}
.leftms {
cursor:pointer;
left:50%;
width: 1px;
height: 1px;
border-radius: 30px;
background: #BABABA;
color: #fff;
clear: both;
display: block;
text-align: center;
font-size: 20px;
line-height: 3px;
}
.rightms {
cursor:pointer;
right:1%;
width: 1px;
height: 1px;
border-radius: 30px;
background: #BABABA;
color: #fff;
clear: both;
display: block;
text-align: center;
font-size: 20px;
line-height: 3px;
}
ul{
    list-style: none;
}

span.namems{
  width: 150px;
  text-align: center;
  background: #ABA38F;
  color: #fff;
  padding: 5px;
}
/*END MINE SCROLLER CONTROL*/

<div class="col-xs-6" id="green-line-l">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>

					<div class="row" style="height:100%;">
						<div class="movems leftms circle" > < </div>
			<div class="movems rightms circle" > > </div>
			<div id="containerms">
				<ul>
					<li id="boxms1" class="boxms current"><span class="namems">Forest Floor</span>
							<br>
							<br>
						<input type="button" id="forestfloor" onclick="mine1Click()"></input>
							<br>
							<br>
					</li>
					<li id="boxms2" class="boxms"><span class="namems">Forest Cave</span>
						<br>
						<input id="forestfloor"></input>
					</li>
					<li id="boxms3" class="boxms"><span class="namems">Cave Atrium</span>
						<br>
						<input id="forestfloor"></input>
					</li>
					<li id="boxms4" class="boxms"><span class="namems">Deep tunnles</span>
						<br>
						<input id="forestfloor"></input>
					</li>
					<li id="boxms5" class="boxms"><span class="namems">The Dark Roads</span>
						<br>
						<input id="forestfloor"></input>
					</li>
					<li id="boxms6" class="boxms"><span class="namems">Abandonded Mine</span>
						<br>
						<input id="forestfloor"></input>
					</li>
					<li id="boxms7" class="boxms"><span class="namems">King's Tomb</span>
						<br>
						<input id="forestfloor"></input>
					</li>
					<li id="boxms8" class="boxms"><span class="namems">Underground Kingdom</span>
						<br>
						<input id="forestfloor"></input>
					</li>
					<li id="boxms9" class="boxms"><span class="namems">Dragons Lair</span>
						<br>
						<input id="forestfloor"></input>
					</li>
					
					   
				</ul>
			 </div>
			 <script>
			 debugger
			 var i = 1;
			$('.rightms').click(function () {
				if (i < $("#containerms ul li").length) {
					$("#boxms" + i).animate({
						left: '-50%'
					}, 400, function () {
						var $this = $("#boxms" + i);
						$this.css('leftms', '150%')
							.appendTo($('.containerms'));
					});
					$("#boxms" + i).next().animate({
						left: '50%'
					}, 400);
					i++;
				}
			});
			$('.leftms').click(function () {

				if (i > 1) {
					$("#boxms" + i).animate({
						left: '150%'
					}, 400, function () {
						var $this = $("#boxms" + i);
						$this.css('rightms', '-150%')
							.appendTo($('.containerms'));
					});
					$("#boxms" + i).prev().animate({
						left: '50%'
					}, 400);
					i--;
				}
			});
			</script>
		</div>
		
				</div>
			</div>

​

我不知道这个代码有什么问题，我正在寻求一些帮助。谢谢。

Answer 1

好吧，所以我想通了。包含“滚动体”的row并不是垂直或水平扩展到足以显示内容，所以我手动地强迫它们展开。