如何在同一页面上分页 - 引导

Question

我想在同一页面中将第一个容器更改为第二个容器，就像幻灯片一样。我怎么做？我用一个我发现的JavaScript代码尝试了它，但没有奏效。我没有找到我想要的例子，但我希望你能理解。对不起我的英语。

.pagination ul { 
 
    display: inline-block; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.pagination li { 
 
    display: inline; 
 
} 
 

 
.pagination li a { 
 
    color: black; 
 
    float: left; 
 
    padding: 8px 16px; 
 
    text-decoration: none; 
 
} 
 

 
.pagination li.active a { 
 
    background-color: red; 
 
    color: white; 
 
} 
 

 
.pagination li:hover.active a { 
 
    background-color: red; 
 
} 
 

 
.pagination li:hover:not(.active) a { 
 
    background-color: #ddd; 
 
    color: black; 
 
} 
 

 
.disabled { 
 
    pointer-events: none; 
 
} 
 

 
a:link, a:visited, a:active { 
 
\t text-decoration: none; 
 
\t color: black; 
 
\t } 
 
    
 
\t a:hover { 
 
\t text-decoration: underline overline; 
 
\t color: red; 
 
\t }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="container-fluid bg-3 text-center">  
 
    <div class="row"> 
 
    <div class="col-sm-3"> 
 
\t <a href="https://www.youtube.com/watch?v=E-FhHowKuM0"> 
 
     <p>Unreal Engine 4 - Clock Town South Demo - Pentium G3250 + POV Gtx 660 - 1080p</p><br> 
 
     <img src="Videos/clock town.jpg" class="img-responsive" style="width:100%" alt="Image"></a> 
 
    </div> 
 
    <div class="col-sm-3"> 
 
\t <a href="https://www.youtube.com/watch?v=M3ULfZ2EReg"> 
 
     <p>Counter Strike Global Offensive - Pentium G3250 + POV Gtx 660 - 1080p</p><br> 
 
     <img src="Videos/Tumbnail cs go.jpg" class="img-responsive" style="width:100%" alt="Image"></a> 
 
    </div> 
 
    <div class="col-sm-3"> 
 
\t <a href="https://www.youtube.com/watch?v=VVa9yrHj89g"> 
 
     <p>Mad Max - Pentium G3250 + POV Gtx 660 - 1080p</p><br> 
 
     <img src="Videos/Tumbnail mad max.jpg" class="img-responsive" style="width:100%" alt="Image"></a> 
 
    </div> 
 
    <div class="col-sm-3"> 
 
\t <a href="https://www.youtube.com/watch?v=lbw6GahwVi0"> 
 
     <p>Fallout 4 - Pentium G3250 + POV Gtx 660 - 1080p</p><br> 
 
     <img src="Videos/Tumbnail fallout 4.jpg" class="img-responsive" style="width:100%" alt="Image"></a> 
 
    </div> 
 
    </div> 
 
</div><br><br> 
 

 
<div class="container-fluid bg-3 text-center">  
 
    <div class="row"> 
 
    <div class="col-sm-3"> 
 
\t <a href="https://www.youtube.com/watch?v=cMlv24s4ZbE"> 
 
     <p>The Vanishing of Ethan Carter - Pentium G3250 + POV Gtx 660 - 1080p</p><br> 
 
     <img src="Videos/Tumbnail the vanishing of ethan carter.jpg" class="img-responsive" style="width:100%" alt="Image"></a> 
 
    </div> 
 
    </div> 
 
</div><br><br> 
 

 
<div class="container text-center" id="paginas"> 
 
    <ul class="pagination"> 
 
    <li class="disabled"><a href="">«</a></li> 
 
\t <li class="active"><a href="index.html">1</a></li> 
 
    <li><a href="videos2.html">2</a></li> 
 
    <li><a href="videos2.html">»</a></li> 
 
    </ul> 
 
</div>

Answer 1

你的意思是引导旋转木马？以下是用法：components-carousel和demo。