css - Asp.net bootstrap carousel slider does not work -
i been trying follow tutorial , implement bootstrap carousel slider. want use later in own webpage, know i'm trying work.
right doesn't showing in asp.net webform have create in visual studio. i'm not sure wrong, because code same.
code:
<!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>fullslider</title> <link href="content/full-slider.css" rel="stylesheet" /> <link href="content/bootstrap.min.css" rel="stylesheet" /> <script src="script/jquery.js"></script> <script src="script/bootstrap.min.js"></script> </head> <body> <form id="form1" runat="server"> <!-- navigation --> <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <!-- brand , toggle grouped better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">start bootstrap</a> </div> <!-- collect nav links, forms, , other content toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li> <a href="#">about</a> </li> <li> <a href="#">services</a> </li> <li> <a href="#">contact</a> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container --> </nav> <!-- full page image background carousel header --> <header 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> <!-- wrapper slides --> <div class="carousel-inner"> <div class="item active"> <!-- set first background image using inline css below. --> <div class="fill" style="background-image: url('http://placehold.it/1900x1080&text=slide one');"></div> <div class="carousel-caption"> </div> </div> <div class="item"> <!-- set second background image using inline css below. --> <div class="fill" style="background-image: url('http://placehold.it/1900x1080&text=slide two');"></div> <div class="carousel-caption"> </div> </div> <div class="item"> <!-- set third background image using inline css below. --> <div class="fill" style="background-image: url('http://placehold.it/1900x1080&text=slide three');"></div> <div class="carousel-caption"> <h2>caption 3</h2> </div> </div> </div> <!-- controls --> <a class="left carousel-control" href="#mycarousel" data-slide="prev"> <span class="icon-prev"></span> </a> <a class="right carousel-control" href="#mycarousel" data-slide="next"> <span class="icon-next"></span> </a> </header> <!-- jquery --> <script src="js/jquery.js"></script> <!-- bootstrap core javascript --> <script src="js/bootstrap.min.js"></script> <!-- script activate carousel --> <script> $('.carousel').carousel({ interval: 5000 //changes speed }) </script> </form> </body> </html> the code have standard bootstrap navigation bar works perfect.. there empty space carousel should be.
can see wrong?
css file:
/*! * start bootstrap - full slider html template (http://startbootstrap.com) * code licensed under apache license v2.0. * details, see http://www.apache.org/licenses/license-2.0. */ html, body { height: 100%; } .carousel, .item, .active { height: 100%; } .carousel-inner { height: 100%; } /* background images set within html using inline css, not here */ .fill { width: 100%; height: 100%; background-position: center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; } footer { margin: 50px 0; }
ok saw different codes may because of might not have worked!
below possible reasons might reason why did not work:
- you using
<header>instead ofdiv- basically using
<div>instead of<img>, used setbackground-imageof<div>,captionhad 1 morediv.- you had classes added
<div>had own styles have effected original styles- overall working in background height getting effected
see demo basic , initial design of 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> <li data-target="#mycarousel" data-slide-to="3"></li> </ol> <!-- wrapper slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="https://placehold.it/1900x1080&text=slide one" alt="chania"/> </div> <div class="item"> <img src="https://placehold.it/1900x1080&text=slide two" alt="chania"/> </div> <div class="item"> <img src="https://placehold.it/1900x1080&text=slide three" alt="flower"/> </div> <div class="item"> <img src="https://placehold.it/1900x1080&text=slide two" alt="flower"/> </div> </div> <!-- left , right controls --> <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>
Comments
Post a Comment