Glodi-Natlor Glodi-Natlor - 7 days ago 3
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

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!