ли самозагрузки обеспечить ползунок контента

Я пытаюсь добиться адаптивный веб-страницы с помощью начальной загрузки и используется 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

ли самозагрузки обеспечить ползунок контента

ответ

Смежные вопросы