是否引導提供內容滑塊

我試圖用引導，實現了響應網頁和用於內容與圖片滑動jcarousellite J-查詢插件..是否引導提供內容滑塊

現在垂直滑塊工作正常，但我不能實現引導響應當我調整我browser.when瀏覽器大小的形象出現，但似乎沒有文字..

有任何替代...

這低於

<!Doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="css/normalize.css"> 
<link rel="stylesheet"type="text/css"href="bootstrap /css/bootstrap.min.css"> 
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-custom.css> 
<link rel="stylesheet" type="text/css" href="css/components.css"> 

<link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.css"> 
<link rel="stylesheet" type="text/css" href="fonts/stylesheet.css"> 
<link rel="stylesheet" type="text/css" href="css/style.css"> 
<link rel = "stylesheet" type = "text/css" href ="css/superslide.css"> 

<link rel="stylesheet" type="text/css" href="css/img.css"> 


<body> 
<div class = "container"> 
<div class = "row"> 
<div class = "col-xs-12 col-md-5"> 


<div class="row"> 

<div class = "col-xs-8 col-md-8 news"> 
<div class = "p1">NEWS</div> 
</div> 

<div class = "col-xs-4 col-md-4 news"> 
<a><button class="icon-up"></button></a> 
<a><button class="icon-down"></button></a> 
</div> 
</div> 

<div id="newsticker-demo" class = "newsticker-jcarousellite"> 
<ul> 
<li class = "row"> 

<div class="col-xs-12 col-md-3"> 

<img id = "myImage" src="asset/1.png"> 
</div> 

<div class="col-xs-12 col-md-9"> 


<p>sdsds</p> 
<p><a href="#">blah</a></p> 

<p>blah</p> 
</div> 

</li>   

<li class = "row"> 

<div class="col-xs-12 col-md-3"> 

</div> 

<div class="col-xs-12 col-md-9"> 


<p>sds</p> 
<p><a href="#">blah</a></p> 

<p>blah</p> 
</div> 

</li> 

<li class = "row"> 

<div class="col-xs-12 col-md-3"> 

<img src="asset/3.png"> 
</div> 

<div class="col-xs-12 col-md-9"> 


<p>sds</p> 
<p><a href="#">blah</a></p> 

<p>blasdsdsdssdsdsdsdsdsdddddddddddddddddd</p> 
</div> 


</li>  
</ul> 



</div> 
</div> 
<script src="js/jquery.min.js" type="text/javascript"></script> 
<script src="js/jcarousellite_1.0.1c4.js" type="text/javascript"></script> 

<script src="js/bootstrap.min.js" type="text/javascript"></script> 


</body> 

</html> 
</code>

代碼

來源

2016-02-02 Deep13

我想你可以打電話給「旋轉木馬」一個內容滑塊，所以是的。 Bootstrap提供了一個。

https://getbootstrap.com/examples/carousel/

<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
    <!-- 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> 
    </ol> 
    <div class="carousel-inner" role="listbox"> 
    <div class="item active"> 
     <img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide"> 
     <div class="container"> 
     <div class="carousel-caption"> 
      <h1>Example headline.</h1> 
      <p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p> 
      <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p> 
     </div> 
     </div> 
    </div> 
    <div class="item"> 
     <img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide"> 
     <div class="container"> 
     <div class="carousel-caption"> 
      <h1>Another example headline.</h1> 
      <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
      <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p> 
     </div> 
     </div> 
    </div> 
    <div class="item"> 
     <img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide"> 
     <div class="container"> 
     <div class="carousel-caption"> 
      <h1>One more for good measure.</h1> 
      <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
      <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p> 
     </div> 
     </div> 
    </div> 
    </div> 
    <a class="left carousel-control" 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 carousel-control" 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>

您需要包括bootstrap.min.js和carousel.css

https://getbootstrap.com/dist/js/bootstrap.min.js

https://getbootstrap.com/dist/css/bootstrap.min.css

來源

2016-02-02 06:04:04 Michael

但是對於垂直滑塊我使用jcarsousellite和內，我已經添加自舉類..有什麼阻止獲得r esponisveness？ – Deep13