jquery - How to add a static content to Bootstrap carousel? -
here have code bootstarp carousel , working fine different devices.
<div id="mycarousel" class="carousel slide" data-interval="3000"> <!-- 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"> <div class="item active"> <img src="img/t1/p-banner1.jpg" alt="" /> <div class="carousel-caption"> <h3>image 1</h3> <p>image 1 description</p> </div> </div> <div class="item"> <img src="img/sizeimg/dal.png" alt=""/> <div class="carousel-caption"> <h3>image 1</h3> <p>image 1 description</p> </div> </div> <div class="item"> <img src="img/sizeimg/url.jpg" alt=""/> <div class="carousel-caption"> <h3>image 1</h3> <p>image 1 description</p> </div> </div> </div> <!-- controls --> <a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#mycarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="js/lib/bootstrap.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.carousel').carousel(); }); </script> now, doubt that, how can add content buttons(login, register) common on slides carousel? , centre slide image , should responsive well.
code of buttons shown below. , appears on slides static.
<div class="container"> <div class="btn-group" aria-label="..."> <a class="btn btn-default" href="#" style="background:black;opacity: 0.5; color:white;">login</a> <a class="btn btn-default" href="#" style="background:black;opacity: 0.5; color:white;">register</a> </div> </div> i have tried in different ways, , working fine large devices not small devices , due these buttons, in mobile devices right nav button of carousel not working.
any appreciated. in advance.
try on style position :static; top: %; right: %; button class
reference positioning:http://www.w3schools.com/css/css_positioning.asp
Comments
Post a Comment