I am creating a page with a bootstrap carousel and w3.css fixed top navigation bar. Then suddenly when I scroll down the page the indicators of the carousel is overlapping my top navigation.
Here is the picture of the current problem with a red arrow
Here is my code for my top navigation bar
<script>
window.onscroll = function() {scrollFunc()};
function scrollFunc() {
if (document.body.scrollTop > 130 || document.documentElement.scrollTop > 130) {
document.getElementById("myTop").classList.add("w3-cyan","w3-card-4");
document.getElementById("myIntro").classList.add("w3-show-inline-block");
} else {
document.getElementById("myIntro").classList.remove("w3-show-inline-block");
document.getElementById("myTop").classList.remove("w3-cyan","w3-card-4");
}
}
</script>
<div id="myTop" class="w3-top w3-container w3-padding-2 w3-theme w3-large">
<!-- <i class="w3-opennav w3-hide-large w3-xlarge w3-margin-left w3-margin-right" onclick="w3_open()"></i> -->
<span id="myIntro" class="w3-hide">
<a href="index.php">
<img src="admin/img/fcuautonomous.png" width="200px" height="50">
</a>
</span>
</div>
<header class="w3-container w3-theme w3-padding-18 w3-blue">
<h1 class="w3-xxxlarge w3-padding-16">
<a href="index.php">
<img src="admin/img/fcuautonomous.png" width="400px">
</a>
</h1>
</header>
<nav class="w3-card-4 w3-indigo">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<i class="fa fa-chevron-circle-down" aria-hidden="true"></i>
</button>
<a class="navbar-brand" href="index.php"><b>Alumni Tracer System</b></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Alumni Registration</li>
<li>News and Events</li>
<li>Job Oppurtunities</li>
<li>Job Oppurtunities</li>
<li>Featured Alumni</li>
<li>Photo Gallery</li>
</ul>
</div>
</div>
</nav>
and for the Bootstrap 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>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="admin/img/SLIDER1.jpg" alt="Chania">
</div>
<div class="item">
<img src="admin/img/SLIDER2.jpg" alt="Chania">
</div>
<div class="item">
<img src="admin/img/SLIDER3.jpg" alt="Flower">
</div>
<div class="item">
<img src="admin/img/SLIDER4.jpg" alt="Flower">
</div>
<div class="item">
<img src="admin/img/SLIDER5.jpg" alt="Flower">
</div>
</div>
<!-- Left and 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>
It is due to higher z-index of carousel indicators.
You can fix by either giving them lower z-index or by giving the navbar a higher z-index.
Increase the z-index property value of navbar to 21
Related
I have a carousel and I placed a button which supposed to stop the spinning
but the button doesn't get click instead the "carousel-control-next" tag being clicked
how can I fix this?
** when I remove the "carousel-control-next" its works fine **
$("#carouselButton").click(function(){
if($('#carouselButton').children('span').hasClass('fa fa-pause')){
$("#mycarousel").carousel('pause');
$("#carouselButton").children('span').removeClass('fa-pause');
$("#carouselButton").children('span').addClass('fa-play');
}
else{
$("#mycarousel").carousel('cycle');
$("#carouselButton").children('span').removeClass('fa-play');
$("#carouselButton").children('span').addClass('fa-pause');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row row-content">
<div class="col">
<div id="mycarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active" >
<p class="d-none d-sm-block">content1</p>
</div>
<div class="carousel-item">
<p class="d-none d-sm-block">content2 </p>
</div>
<div class="carousel-item">
<p class="d-none d-sm-block">content3 </p>
</div>
</div>
<!--create in the bottom indicators to show in which slide you are
the "slide to allow you to press them and move the the slide you want-->
<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>
<!-----THE BUTTON ------>
<button class="btn btn-danger btn-sm" id="carouselButton">
<span class="fa fa-pause"></span>
</button>
<a class="carousel-control-prev" href="#mycarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#mycarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
</div>
</div>
It is almost 100% CSS issue, it could be easier to help if you provided codesandbox/codepen link. But you can try to apply z-index on the button if carousel controls overlap it somehow.
I have the following problem:
I want to implement a Carousel with Bootstrap version 3.3.7 on my website. The code looks like this:
<!-- Carousel
================================================== -->
<div class="row dark-start d-none d-lg-block">
<div class="col-md-12">
<div id="categoryExampleSlider" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#categoryExampleSlider" data-slide-to="0" class="active"></li>
<li data-target="#categoryExampleSlider" data-slide-to="1"></li>
<li data-target="#categoryExampleSlider" data-slide-to="2"></li>
<li data-target="#categoryExampleSlider" data-slide-to="3"></li>
<li data-target="#categoryExampleSlider" data-slide-to="4"></li>
<li data-target="#categoryExampleSlider" data-slide-to="5"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="../imgs/slider1_sport.jpg" alt="sport">
</div>
<div class="item">
<img src="../imgs/slider2_outdoor.jpg" alt="outdoor">
</div>
<div class="item">
<img src="../imgs/slider3_senioren.jpg" alt="ass">
</div>
<div class="item">
<img src="../imgs/slider4_ass.jpg" alt="ass">
</div>
<div class="item">
<img src="../imgs/slider5_risiko.jpg" alt="risiko">
</div>
<div class="item">
<img src="../imgs/slider6_rettervideo.jpg" alt="rettervideo">
</div>
</div>
<a class="left carousel-control" href="#categoryExampleSlider" 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="#categoryExampleSlider" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
</div>
</div>
The controls and the indicators are displayed but it does not rotate. Neither automatically nor when I click on the controls and/or indicators.
What am I doing wrong here?
Try with bootstrap 3.4.0 version. You need to change the version. It absolutely works. This example is useful for u.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row dark-start d-none d-lg-block">
<div class="col-md-12">
<div id="categoryExampleSlider" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#categoryExampleSlider" data-slide-to="0" class="active"></li>
<li data-target="#categoryExampleSlider" data-slide-to="1"></li>
<li data-target="#categoryExampleSlider" data-slide-to="2"></li>
<li data-target="#categoryExampleSlider" data-slide-to="3"></li>
<li data-target="#categoryExampleSlider" data-slide-to="4"></li>
<li data-target="#categoryExampleSlider" data-slide-to="5"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="public/images/1.svg" alt="sport">
</div>
<div class="item">
<img src="public/images/1.svg" alt="outdoor">
</div>
<div class="item">
<img src="public/images/1.svg" alt="ass">
</div>
<div class="item">
<img src="public/images/1.svg" alt="ass">
</div>
<div class="item">
<img src="public/images/1.svg" alt="risiko">
</div>
<div class="item">
<img src="public/images/1.svg" alt="rettervideo">
</div>
</div>
<a class="left carousel-control" href="#categoryExampleSlider" 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="#categoryExampleSlider" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</body>
</html>
#premox this is your exact answer I didn't change anything except writing CDN links and your good to go:
Check below snippet copied you exact code.
By this I guess you have wrong jquery link in your code.
.item {
height : 400px;
width : 400px;
border: 1px solid red;
margin: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="row dark-start d-none d-lg-block">
<div class="col-md-12">
<div id="categoryExampleSlider" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#categoryExampleSlider" data-slide-to="0" class="active"></li>
<li data-target="#categoryExampleSlider" data-slide-to="1"></li>
<li data-target="#categoryExampleSlider" data-slide-to="2"></li>
<li data-target="#categoryExampleSlider" data-slide-to="3"></li>
<li data-target="#categoryExampleSlider" data-slide-to="4"></li>
<li data-target="#categoryExampleSlider" data-slide-to="5"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="../imgs/slider1_sport.jpg" alt="sport">
</div>
<div class="item">
<img src="../imgs/slider2_outdoor.jpg" alt="outdoor">
</div>
<div class="item">
<img src="../imgs/slider3_senioren.jpg" alt="ass">
</div>
<div class="item">
<img src="../imgs/slider4_ass.jpg" alt="ass">
</div>
<div class="item">
<img src="../imgs/slider5_risiko.jpg" alt="risiko">
</div>
<div class="item">
<img src="../imgs/slider6_rettervideo.jpg" alt="rettervideo">
</div>
</div>
<a class="left carousel-control" href="#categoryExampleSlider" 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="#categoryExampleSlider" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
</div>
</div>
I an trying to implement four tabs/Button with in the Bootstrap Carousel .Here each slide of carousel contains 4 tabs so 4 carousel slides and 4*4 tabs totally here
<!-- The main page goes here -->
<div id="container" class="chart_sectn">
<div class="main">
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">Forecast</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2">Last Week</label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3">Last Year</label>
<input id="tab4" type="radio" name="tabs">
<label for="tab4">Trend</label>
<section id="content1">
<div class="container">
<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 for slides -->
<div class="carousel-inner">
<div class="item active">
<div id="chart_div"></div>
</div>
<div class="item">
<h2>car 1 disp2</h2>
</div>
<div class="item">
<h2>car 1 disp3</h2>
</div>
<div class="item">
<h2>car 1 disp4</h2>
</div>
</div>
<!-- Left and right controls
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>-->
</div>
</div>
<script type="text/javascript">
$('.carousel').carousel({
interval: false
});
</script>
</section>
<section id="content2">
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#step11" data-toggle="tab" aria-expanded="false" class="active"></li>
<li data-target="#step12" data-toggle="tab" aria-expanded="false"></li>
<li data-target="#step13" data-toggle="tab" aria-expanded="false"></li>
<li data-target="#step14" data-toggle="tab" aria-expanded="false"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active" id="step11">
<h2>car 2 disp1 </h2>
</div>
<div class="item" id="step12">
<h2>car 2 disp2</h2>
</div>
<div class="item" id="step13">
<h2>car 2 disp3</h2>
</div>
<div class="item" id="step14">
<h2>car 2 disp4</h2>
</div>
</div>
<!-- Left and right controls
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>-->
</div>
</div>
<script type="text/javascript">
$('#myCarousel').carousel();
$('#myCarousel1').carousel();
$('.carousel').carousel({
interval: false
});
</script>
</section>
<section id="content3">
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#step21" data-toggle="tab" aria-expanded="false" class="active"></li>
<li data-target="#step22" data-toggle="tab" aria-expanded="false"></li>
<li data-target="#step23" data-toggle="tab" aria-expanded="false"></li>
<li data-target="#step24" data-toggle="tab" aria-expanded="false"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active" id="step21">
<h2>Car3 disp1</h2>
</div>
<div class="item" id="step22">
<div id="chart_div"></div>
<h2>Car3 disp2</h2>
</div>
<div class="item" id="step23">
<h2>Car3 disp3</h2>
</div>
<div class="item" id="step24">
<h2>Car3 disp4</h2>
</div>
</div>
<!-- Left and right controls
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>-->
</div>
</div>
<script type="text/javascript">
$('#myCarousel').carousel();
$('#myCarousel1').carousel();
$('.carousel').carousel({
interval: false
});
</script>
</section>
<section id="content4">
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#step31" data-toggle="tab" aria-expanded="false" class="active"></li>
<li data-target="#step32" data-toggle="tab" aria-expanded="false"></li>
<li data-target="#step33" data-toggle="tab" aria-expanded="false"></li>
<li data-target="#step34" data-toggle="tab" aria-expanded="false"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active" id="step31">
<h2>Car4 disp1</h2>
</div>
<div class="item" id="step32">
<h2>Car4 disp2</h2>
</div>
<div class="item" id="step33">
<h2>Car4 disp3</h2>
</div>
<div class="item" id="step34">
<h2>Car4 disp4</h2>
</div>
</div>
<!-- Left and right controls
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>-->
</div>
</div>
<script type="text/javascript">
$('#myCarousel').carousel();
$('#myCarousel1').carousel();
$('.carousel').carousel({
interval: false
});
</script>
</section>
</div>
</div>
The above is my code and here after i click on the each tab a chart will be displayed.If we swipe to the second slide another chart with four tabs like that 4 charts each chart contains 4 tab i wan to place it inside the carosel. any ideas or suggestion to do this in better way
Getting crazy :D Been stuck for three days.
I am trying to put a carousel in my page, I am loading the images located in my machine, each one having a size of 1200*480.
When I test it the images are not shown.
This is the code:
<div class="jumbotron">
<h1>Kurt Angle</h1>
<p>Olympic Gold Medalist, World Champion, Hall of Famer, Living Legend</p></div>
<!--CAROUSEL BEGINES-->
<div class="fluid-container">
<div class="carousel slide"
data ride="carousel"
id="carousel">
<!--indicators--->
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<!--wrapper of the images(itmes)--->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="Pictures/angle_olympics_croppedxcf.jpg" alt="slide1">
</div>
<div class="item">
<img src="file:///home/davide/Pictures/angle%20cropped%202.jpg"
alt="slide2">
</div>
<div class="item">
<img src="file:///home/davide/Pictures/kurt_angle_cropped_3.jpg"
alt="slide3">
</div>
</div>
<!--now let's put right and left control-->
<a class="left carousel-control"
href="#carousel"
role="button"
data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
CSS:
.jumbotron{
background-color: #241f14 !important;
color: #ffffff;
}
.carousel .item{
height: 100%;
}
Codepen page
Please could you help me?
try this one:
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://media.istockphoto.com/photos/overhead-view-of-two-business-persons-in-the-lobby-picture-id520791880?s=2048x2048" alt="Image">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="http://media.istockphoto.com/photos/friends-connection-digital-devices-technology-network-concept-picture-id525208898?s=2048x2048" alt="Image">
<div class="carousel-caption">
<h3>Lorem</h3>
<p>Lorem ipsum...</p>
</div>
</div>
</div>
<!-- Left and 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>
DEMO HERE
i have a header with a navbar and a Carousel sliding image using bootstrap
how can i fixed this two together on scroll
when the user scroll the website to see the information the navbar and carousel still fixed on the top and the information scroll under the header
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for 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>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
Home
</li>
<li>
About Us
</li>
<li>
Services
</li>
<li>
Factory
</li>
<li>
Projects
</li>
<li>
Clients
</li>
<li>
Video
</li>
<li>
Contact Us
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="row">
<img src="img/logo%20corner.png" class="center-block img-responsive imglogo">
</div>
<!-- Full Page Image Background Carousel Header -->
<header id="myCarousel" class="carousel slide">
<!-- 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 for Slides -->
<div class="carousel-inner">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url('img/slide1.jpg');"></div>
<div class="carousel-caption">
</div>
</div>
<div class="item">
<!-- Set the second background image using inline CSS below. -->
<div class="fill" style="background-image:url('img/slide2.jpg');"></div>
<div class="carousel-caption">
</div>
</div>
<div class="item">
<!-- Set the third background image using inline CSS below. -->
<div class="fill" style="background-image:url('img/slide3.jpg');"></div>
<div class="carousel-caption">
</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>
If i have understood I give you a link where you can find your happiness.
http://www.w3schools.com/howto/howto_css_parallax.asp
Hope help you :)
I added the full code for you to have as a resource to reference with your document because what you posted is the stock bootstrap template with no input. Double check and make sure you have the latest bootstrap installed and are linking the files correctly. Below I used a CDN, but its better to have it downloaded.
The main thing to make sure you have the fixed header navigation is the following code:
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-inverse navbar-fixed-top">
You can find the above code in the below code. Let me know if you have any questions.
<!DOCTYPE html>
<html>
<head>
<title>Whatever</title>
<meta charset="utf-8">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<a class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="navbar-brand" href="#">Bootstrap 3</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>About
</li>
<li>Contact
</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- /container -->
</div>
<!-- /navbar wrapper -->
<!-- Carousel -->
<div id="myCarousel" class="carousel slide">
<!-- 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>
<div class="carousel-inner">
<div class="item active">
<img src="/root/directory/file_path.jpg" class="fill">
<div class="container">
<div class="carousel-caption">
<h1>Bootstrap 3 Carousel Layout</h1>
<pthis is="" an="" example="" layout="" with="" carousel="" that="" uses="" the="" bootstrap="" 3="" styles.<="" small="">
<p></p>
<p><a class="btn btn-lg btn-primary" href="http://getbootstrap.com">Learn More</a>
</p>
</pthis>
</div>
</div>
</div>
<div class="item">
<img src="/root/directory/file_path.jpg" class="fill">
<div class="container">
<div class="carousel-caption">
<h1>Changes to the Grid</h1>
<p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
<p><a class="btn btn-large btn-primary" href="#">Learn more</a>
</p>
</div>
</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>
</div>
</body>
</html>