javascript - Bootstrap Carousel-controls not clickable and not working in ASP.net MVC 5 -
can please. i've tried switching bootstrap.min.js bootstrap.js; jquery.min.js jquery.js. animation works no control clickable or working. problem asp.net mvc5?
<!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>index - asp.net application</title> <link rel="stylesheet" href="/content/font-awsome/css/font-awesome.min.css"> <!--<link rel="stylesheet" href="~/content/bootstrap.min.css">--> <link rel="stylesheet" href="/content/bootstrap.css"> <link href="/content/site.css" rel="stylesheet" type="text/css" /> <!--<script type="text/javascript" src="~/scripts/jquery-1.10.2.min.js"></script>--> <script type="text/javascript" src="http://gc.kis.v2.scr.kaspersky-labs.com/cadf6e67-d04a-8f45-8dd6-5103ea07cb3e/main.js" charset="utf-8"></script><link rel="stylesheet" crossorigin="anonymous" href="http://gc.kis.v2.scr.kaspersky-labs.com/e3bc70ae3015-6dd8-54f8-a40d-76e6fdac/abn/main.css"/><script type="text/javascript" src="/scripts/jquery-1.10.2.js"></script> <script type="text/javascript" src="/scripts/jquery-1.10.2.intellisense.js"></script> .min.css" rel="stylesheet" type="text/css" /> <script> var windowssize=function(){ var h=$(window).height(), w=$(window).width(); $("#winsize").html("<p>width: "+w+"<br>height: "+h+"</p>"); }; $(document).ready(function(){windowssize();}); $(window).resize(function(){windowssize();}); </script> </head> <body data-spy="scroll" data-target=".navbar" data-offset="50" style="border:0px solid black; padding:0px; margin:0px;"> <nav class="navbar navbar-fixed-top opaque-navbar" style="padding:0px; margin:0px;"> <div class="container-fluid"> <div class="navbar-header" style="padding:0px; margin:0px; display:inline-block; width:100%"> <button id="menubarbutton" type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mynavbar" style="border:0;margin-top:0px;background-color:#ffffff; outline:none"> <span id="bar1" class="icon-bar" style="border:0; background-color:#17508d; height:3px; width:35px"></span> <span id="bar2" class="icon-bar" style="border:0; background-color:#17508d; height:3px; width:35px"></span> <span id="bar3" class="icon-bar" style="border:0; background-color:#17508d; height:3px; width:35px"></span> </button> <a class="navbar-brand" href="#" style="margin-top:0px; border:0; padding-top:6px; position:fixed"> <img style="height:56px; margin-left:3px; padding-top:0px; image-resolution:snap; image-rendering:optimizequality" src="/content/images/dcmplogos/dcmplogo12.png"/> </a> <div id="topest-menu-nav" style="float:right"> <div class="social-links-ontop" style="display:inline-block; background-color:#17508d;padding-left:12px;"><a href="#"> <span class="fa fa-facebook" style="font-size:20px"></span></a> </div> <div class="social-links-ontop" style="display:inline-block;background-color:#13cf33; padding-left:9px"><a href="#"> <span class="fa fa-whatsapp" style="font-size:20px"></span></a> </div> <div class="social-links-ontop"style="display:inline-block; background-color:#2bccd7;padding-left:8px;"><a href="#"> <span class="fa fa-twitter" style="font-size:20px"></span></a> </div> <div class="social-links-ontop" style="display:inline-block; background-color:#a91515;padding-left:7px;"> <a href="#"> <span class="fa fa-youtube-play" style="font-size:20px"></span> </a> </div> </div> </div> <div class="collapse navbar-collapse" id="mynavbar"> <div class="section-menu"> <ul class="nav navbar-nav" style="margin:0px;"> <li><a href="#"><i class="fa fa-home" style="font-size:larger"></i> home</a></li> <li> <a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="10" data-close-others="false" href="#">departments & services</a> <ul class="dropdown-menu" style="margin-top:3px; min-width:100%;border-radius:0px"> <li><a href="#">direction</a></li> <li><a href="#">sales & procurement</a></li> <li><a href="#">quality assurance</a></li> </ul> </li> <li><a href="#">products</a></li> <li><a href="#">partners</a></li> <li><a href="#">news</a></li> <li><a href="#">about us</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li style="padding-right:10px; padding-left:10px;"> <a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="10" data-close-others="false" href="#"><span class="fa fa-globe" style="font-size:20px; font-weight:normal"></span> switch language</a> <ul class="dropdown-menu" style="min-width:100%; margin-top:3px; border-radius:0px"> <li><a href="#"><span class="lang-sm" lang="en"></span> english</a></li> <li><a href="#"><span class="lang-sm" lang="fr"></span> francais</a></li> </ul> </li> </ul> </div> </div> </div> </nav> <!--<section class="banner"> <div class="container"> <div class="row"> <h1>transparent background example</h1> </div> </div> </section>--> <div class="container-fluid" style="z-index:0;"> <div class="carousel slide" id="mycarousel"> <!-- indicators --> <ol class="carousel-indicators"> <li class="item1 active"></li> <li class="item2" onclick="showitem2()"></li> <li class="item3" id="item3id"></li> <li class="item4"></li> </ol> <!-- wrapper slides --> <div class="carousel-inner" role="listbox" > <div class="item active"> <img src="/content/images/homecarousel/5821d1693.jpg"> <div class="carousel-caption"> <h2>...</h2> <p>...</p> </div> </div> <div class="item"> <img src="/content/images/homecarousel/5821d1693.jpg"> <div class="carousel-caption"> <h2>...</h2> <p>...</p> </div> </div> <div class="item"> <img src="/content/images/homecarousel/5821d1693.jpg"> <div class="carousel-caption"> <h2>carousel 3</h2> <p>...</p> </div> </div> <div class="item"> <img src="/content/images/homecarousel/5821d1693.jpg"> <div class="carousel-caption"> <h2>...</h2> <p>...</p> </div> </div> </div> <!-- left , right controls --> <a class="left carousel-control" href="#mycarousel" role="button"> <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"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">next</span> </a> <script> $(document).ready(function () { // enable carousel animation $('.carousel').carousel({ interval: 2000 }); // enable carousel indicators $('.item1').click(function () { $('.carousel').carousel(0); }); $('.item2').click(function () { $('carousel').carousel(1); }); $('item').click(function () { $('carousel').carousel(2); }); $('.item4').click(function () { $('.carousel').carousel(3); }); // enable carousel controls $('.left').click(function () { $("#mycarousel").carousel("prev"); }); $('.right').click(function () { $("#mycarousel").carousel("next"); }); }); </script> </div> </body> </html>
very sorry bother you, since problem kindly crazy. got problem. had changed property
.navbar-collapse{ min-height :900px; color: transparent;}
unknowingly on drafts in .css file, yet z-index higher carousel's default. there's no way carousel clickable, since covered... thank indeed interest though!
Comments
Post a Comment