Question

我想将第一个容器更改为同一页面中的第二个容器，就像幻灯片一样。我怎么做？我尝试使用我发现的javascript代码，但它没有用。我没有找到我想要的例子，但我希望你理解。抱歉我的英文。

＆＃13;

.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 {
	text-decoration: none;
	color: black;
	}
    
	a:hover {
	text-decoration: underline overline; 
	color: red;
	}

＆＃13;

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

＆＃13;

Answer 1

你的意思是bootstrap carousel？以下是用法：components-carousel和demo。

如何在同一页面上进行分页 - Bootstrap

1 个答案: