Glodi-Natlor Glodi-Natlor - 1 year ago 137
Javascript Question

Bootstrap Carousel-controls not clickable and not working in ASP.net MVC 5

Can anyone help please. I've tried switching from

bootstrap.min.js
to
bootstrap.js
; from
jquery.min.js
to
jquery.js
. The animation works perfectly but no control is clickable or working. Is it a problem with ASP.NET MVC5?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Index - My 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 for 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 and 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>

Answer Source

Very sorry to bother you, since the problem was kindly crazy. I finally got the problem. I had changed the property

.navbar-collapse{ min-height :900px; color: transparent;}

unknowingly on my drafts in a .css file, yet its z-index is higher than the carousel's by default. So there's no way the carousel would be clickable, since it was covered... Thank you indeed for you interest though!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download