So I am trying to make my carousel responsive to resizing, and mobile devices. However, when I resize the screen, the actual images do not stay within the card that I have the carousel in.
The website is actually live, so if you wanted to take a look, please visit wwww.alysaandjordanplustwo.baby
Excuse my skills - I am learning front-end for the first time.
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<title>Alysa and Jordan Plus Two | Home </title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body style="background-image: url(img/background.png); background-size:cover;">
<nav class="navbar navbar-expand-lg navbar-fixed-top navbar-dark" style="background-color: #6C3400;" >
<a class="navbar-brand" style="color: white;" href="#">Jordan and Alysa Plus Two</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" style="background-color: #6C3400;">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active" >
<a class="nav-link" style="color: #FFCD73;" href="#">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" style="color: white;" href="photo_gallery.html">Photo Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" style="color: white;" href="registry.html">Registry</a>
</li>
<div class="dropdown nav-link" style="padding: none; margin: none;">
<a class="dropdown-toggle" href="about.html" style="background-color: #6c3400; color: white;" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
About Us
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item no-border" href="baby_b_memorial.html">Baby B Memorial</a>
</div>
</div>
<li class="nav-item">
<a class="nav-link" style="color: white;" href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>
<div class="container justify-content-center">
<div class="row justify-content-center">
<div class="card justify-content-center" style="margin-top: 1rem;">
<div class="card-body">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" style="width: 800px; height: 400px" >
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner justify-content-center">
<div class="carousel-item justify-content-center active " style="width:800px; height:400px;">
<img class="card-img" src="img/first_halloween_resized.jpg" alt="First slide">
</div>
<div class="carousel-item justify-content-center" style="width:800px; height:400px;" >
<img class="card-img" src="img/2nd_image_resized.jpeg" alt="Second slide">
</div>
<div class="carousel-item justify-content-center" style="width:800px; height:400px;">
<img class="card-img" src="img/third_slide.svg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="container text-center" style="background-color: #FFCD73; border-radius: 10px; height: 100%; width: 100%; margin-top: 5vh;">
<h3 style="font-style:italic; padding-top: 15px; padding-bottom: 15px;">"Don't find love. Let love find you. <br> That is why it is called falling in love because you do not force yourself to fall,<br> you just fall" <br> - Author Unknown</h3>
<h2 style="font-style:italic; padding-top: 15px; padding-bottom: 15px;">~~~</h2>
<h3 style="font-style:bold; color: #6c3400; padding-top: 15px; padding-bottom: 15px;">Find out our babies gender!</h3>
</div>
<div class="container" style="padding-top: 5vh;">
<div class="row">
<div class="col-lg">
<!-- Photo on the left -->
<img class="rounded mx-auto d-block img-thumbnail" src="img/first_photo.jpg" style="margin-bottom: 5vh;">
</div>
<div class="col-sm" style="background-color: #FFCD73; border-radius: 10px; padding-top: 15px; padding-bottom: 10vh;">
<H2>Our Story</H2>
<p>Alysa and I met for the first time at Kennesaw State University in the Fall 2022 semester. I was the first one to message Alysa, as we were in a student group where we could all talk about our majors and meet new people. I decided to message Alysa to see if she wanted to meet and perhaps study together. Which is just what we did – we ended up studying together, and I offered as much help as I could remember while she was taking Calculus. It had been years since I took Calculus 1, and I was very rusty. Before we knew it, we were always around each other, almost every possible minute that we could. Eventually, I believe, we ended up falling for each other, even though we both were hesitant to enter a relationship. I am so, so, so glad that we met, and for the next steps of our life together! <br><br> - Jordan | September 7th, 2022 </p>
</div>
</div>
</div>
<!-- Footer -->
<footer class="page-footer font-small white pt-4" style="background-color: #6C3400; margin-top: 10vh;">
<!-- Footer Links -->
<div class="container-fluid text-center text-md-left">
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-6 mt-md-0 mt-3">
<!-- Content -->
<h5 style="color: #FFFFFF;">Thank you for visiting our website!</h5>
<p style="color: #FFFFFF;">Please be respectful, and only share this website with immediate family for the time being. Thank you! <br><br>- Jordan & Alysa</p>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none pb-3">
<!-- Grid column -->
<div class="col-md-3 mb-md-0 mb-3">
<!-- Links -->
<h5 class="text-uppercase" style="color:#FFFFFF;">Registry Links</h5>
<ul class="list-unstyled">
<li>
Amazon
</li>
<li>
Buy Buy Baby
</li>
<li>
Target
</li>
</ul>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-3 mb-md-0 mb-3">
<!-- Links -->
<h5 class="text-uppercase" style="color:#FFFFFF;">Quick Links</h5>
<ul class="list-unstyled">
<li>
RSVP Form (Coming Soon)
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
<li>
Link 4
</li>
</ul>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
<!-- Copyright -->
<div class="footer-copyright text-center py-3" style="color:#FFFFFF">Copyright © 2022:
Written with ♥ by Jordan Viehmeyer (Dad)
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
<!-- Javascript-->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
I have not modified the CSS code of the carousel itself, so it is bootstrap standard using the min.css file.
The photos are sized 800 width, 400 height. That is how I'd like them to display, but proportionally.
Remove all style="width:800px; height:400px;" from your code. By adding this you forcing the element to a fixed size, so element wont be responsive.
In your carousel replace .card-img class with d-block w-100 classes, as per this example... (don't use card-img class)
Follow these bs docs... Carousel with indicators
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
Related
I am following the Bootstrap code snippet page to create the following carousel. It has three images and the controls are supposed to slide left are right. The scripts that I am using are shown in the <script> tags at the bottom of the file.
<!doctype html>
<head>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Wantrepreneur</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<header>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item active" style="background-image: url('https://source.unsplash.com/LAaSoL0LrYs/1920x1080')">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4">First Slide</h2>
<p class="lead">This is a description for the first slide.</p>
</div>
</div>
<!-- Slide Two - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('https://source.unsplash.com/bF2vsubyHcQ/1920x1080')">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4">Second Slide</h2>
<p class="lead">This is a description for the second slide.</p>
</div>
</div>
<!-- Slide Three - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('https://source.unsplash.com/szFUQoyvrxM/1920x1080')">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4">Third Slide</h2>
<p class="lead">This is a description for the third slide.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</header>
<!-- Page Content -->
<section class="py-5">
<div class="container">
<h1 class="display-4">Full Page Image Slider</h1>
<p class="lead">The background images for the slider are set directly in the HTML using inline CSS. The images in this snippet are from Unsplash, taken by Joanna Kosinska!</p>
</div>
</section>
<script src="js/vendor/bootstrap.bundle.min.js"></script>
<script src="js/vendor/jquery.slim.min.js"></script>
</html>
However, when I press either of the controls, the link in my browser changes from link.com to link.com#carouselExampleIndicators, but nothing happens and the images don't slide/change. What should I do to fix this?
Thanks,
Vinny
This is a simple script order issue. Bootstrap needs jQuery, but you are loading Bootstrap before jQuery. Switch the order:
<script src="js/vendor/jquery.slim.min.js"></script>
<script src="js/vendor/bootstrap.bundle.min.js"></script>
Before release of bootstrap 5,
In Bootstrap < 5 is dependent on jQuery:-
so, you have to maintain the order of the external scripts in your html code:-
It should be:-
<script src="js/vendor/jquery.slim.min.js"></script>
<script src="js/vendor/bootstrap.bundle.min.js"></script>
I can't get the carousel indicators to show. I think it's something to do with my use of the jumbrotron and container etc inside each "slide". Maybe because the indicators are white so I can't see them - in which case how to I either budge the indicators up a bit or move the grey box down a bit, so that the white indicators will sit on top of the grey? I've spent hours trying to fix it but I'm fairly new to HMTL/CSS/JS etc so clearly missing something! Many thanks for your help.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<section class="jumbotron text-center">
<div class="container">
<h1 class="display-4">Slide 1</h1>
<p class="lead text-muted">Sample sentence 1</p>
</div>
</section>
</div>
<div class="carousel-item">
<section class="jumbotron text-center">
<div class="container">
<h1 class="display-4">Slide 2</h1>
<p class="lead text-muted">Sample sentence 2</p>
</div>
</section>
</div>
<div class="carousel-item">
<section class="jumbotron text-center">
<div class="container">
<h1 class="display-4">Slide 3</h1>
<p class="lead text-muted">Sample sentence 3</p>
</div>
</section>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
I've changed some css to view the indicators clearly. You can check this.
.carousel-control-next-icon, .carousel-control-prev-icon {
display: inline-block;
width: 20px;
height: 20px;
background: no-repeat 50%/100% 100%;
background-color: #686161 !important;
border-radius: 100%;
box-shadow: 0px 0px 7px 2px #000000a1;
background-size: initial !important;
}
.carousel .jumbotron {
margin-bottom: unset;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<section class="jumbotron text-center">
<div class="container">
<h1 class="display-4">Slide 1</h1>
<p class="lead text-muted">Sample sentence 1</p>
</div>
</section>
</div>
<div class="carousel-item">
<section class="jumbotron text-center">
<div class="container">
<h1 class="display-4">Slide 2</h1>
<p class="lead text-muted">Sample sentence 2</p>
</div>
</section>
</div>
<div class="carousel-item">
<section class="jumbotron text-center">
<div class="container">
<h1 class="display-4">Slide 3</h1>
<p class="lead text-muted">Sample sentence 3</p>
</div>
</section>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
You can change arrows color and will see them
.carousel-control-prev-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e") !important;
}
.carousel-control-next-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e") !important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<section class="jumbotron text-center">
<div class="container">
<h1 class="display-4">Slide 1</h1>
<p class="lead text-muted">Sample sentence 1</p>
</div>
</section>
</div>
<div class="carousel-item">
<section class="jumbotron text-center">
<div class="container">
<h1 class="display-4">Slide 2</h1>
<p class="lead text-muted">Sample sentence 2</p>
</div>
</section>
</div>
<div class="carousel-item">
<section class="jumbotron text-center">
<div class="container">
<h1 class="display-4">Slide 3</h1>
<p class="lead text-muted">Sample sentence 3</p>
</div>
</section>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
In this part fill='%23000' the 000 stands for the color.
I can see them just fine. Change the background colour to black or a darker shade to view them. :)
I am using a navbar and a subnav under a Carousel. And my subnav should be fixed after getting there. It is fixed but content is jumping.
if i only would use a container above i would already have found a solution but it don't work for me, so its still jumping..
I already saw some solutions but don't get it..
so what am i doing false?
https://jsfiddle.net/sdkpj9f3/
.navbar {
margin-bottom: 0;
}
#myCarousel {
padding: 0px;
}
.subnav {
margin: 0px;
top: 0px;
background: rgba(85, 93, 106, 0.7);
border-style: none;
}
.subnav.affix {
position: fixed;
top: 0;
width: 100%;
}
.subNav-item:hover {
font-size: 20px;
background: rgba(111, 131, 158, 0.2);
}
<html>
<head>
<title></title>
<!-- 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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top navtop">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navtop">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--LOGO-->
<a href="index.html" class="">
<img src="images/logos/RULogo.png" style="height: 50px; width: 50px;">
</a>
</div>
<!--NAV START-->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li class="">Gallery
</li>
<li class="">Shop
</li>
<li class="">Blog
</li>
<li class="">About & Contact
</li>
</ul>
</div>
<!--NAV END-->
</nav>
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/picture3.jpg" alt="img1">
<div class="carousel-caption white-on-white">
<h1>Welcome</h1>
<h2>kjlkjkl</h2>
</div>
</div>
<div class="item">
<a href="contact.html" class="no-link">
<img src="images/picture1.jpg" alt="img1">
<div class="carousel-caption white-on-white">
<h1>Who?</h1>
</a>
<h2>Developers</h2>
</div>
</div>
</div>
<!-- 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>
<!--SlideShow END-->
<!--SubNav-->
<nav class="navbar subnav" role="navigation">
<div class="collapse navbar-collapse collapse-buttons">
<ul class="nav navbar-nav navbar-right">
<li class="subNav-item">something
</li>
<li class="subNav-item">something
</li>
<li class="subNav-item">something
</li>
<li class="subNav-item">something
</li>
<li class="subNav-item">something
</li>
</ul>
</div>
</nav>
<!--END SUbnav-->
<div id="Code" class="container-fluid">
<div class="row">
<div class="col-sm-8">
<div class="well well-lg">
<p>this picture has blablablablabalbalb</p>
</div>
</div>
<div class="col-sm-4">
<div class="well well-lg">
<p>this picture has blablablablabalbalb</p>
</div>
</div>
</div>
</div>
<!-- Container (Portfolio Section) -->
<div id="portfolio" class="container-fluid text-center">
<h2>Portfolio</h2>
<br>
<h4>What we have created</h4>
<div class="row text-center slideanim">
<div class="col-sm-4">
<div class="thumbnail">
<img src="images/picture1.jpg" alt="Paris" width="400" height="300">
<p><strong>bla blaa</strong>
</p>
<p>blablablabll lbalabl lab lab</p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="images/picture2.jpg" alt="New York" width="400" height="300">
<p><strong>blablabla</strong>
</p>
<p>blablabalbalbala</p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="images/picture3.jpg" alt="San Francisco" width="400" height="300">
<p><strong>blablabalbal</strong>
</p>
<p>bla, blabla bla ba</p>
</div>
</div>
</div>
<br>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
var h = $('.navtop').height();
var h2 = $('#myCarousel').height();
var h3 = h + h2;
$('.subnav').affix({
offset: {
top: 1200
}
});
</script>
<body>
</html>
Usually when the site jumps from affix, it's because the header becomes position fixed and leaves the layout and is position on top of the content itself. The rest of the site "jumps" up the height of the header.
One thing you can do is wrap your navbar in a wrapper and give the navbar wrapper the height of the nav.
<div class="navbar-wrapper">
<nav class="navbar navbar-inverse navbar-static-top navtop">
<!-- the rest of your nav code is here -->
</nav>
</div>
and in css
.navbar-wrapper { height:60px; } /* or whatever the height of the nav is */
You can find the height of your nav by using the browser inspector or by guessing until the jump disappears.
Here is your Jsfiddle, cleaned up a bit so it works.
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>
As you can see that here on first two slides the interval attribute doesnt work or maybe it's taking the first one for the second. i want to set different interval between first and second slide and for rest it may remain same.. but i am for some reason unable to do this.. kindly help
$.fn.carousel.Constructor.prototype.cycle = function (e) {
e || (this.paused = false)
this.interval && clearInterval(this.interval)
this.options.interval
&& !this.paused
&& (this.interval = setInterval($.proxy(this.next, this), this.$element.find('.item.active').data('interval') || this.options.interval))
return this
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="carousel-1" class="carousel carousel-fade slide" data-ride="carousel">
<div class="pause-play-buttons">
<i id="playButton" class="fa fa-play" aria-hidden="true"></i>
<i id="pauseButton" class="fa fa-pause" aria-hidden="true"></i>
</div>
<ol class="carousel-indicators">
<li class="active" data-target="#carousel-1" data-slide-to="0"></li>
<li data-target="#carousel-1" data-slide-to="1"></li>
<li data-target="#carousel-1" data-slide-to="2"></li>
<li data-target="#carousel-1" data-slide-to="3"></li>
<li data-target="#carousel-1" data-slide-to="4"></li>
<li data-target="#carousel-1" data-slide-to="5"></li>
<li data-target="#carousel-1" data-slide-to="6"></li>
<li data-target="#carousel-1" data-slide-to="7"></li>
<li data-target="#carousel-1" data-slide-to="8"></li>
<li data-target="#carousel-1" data-slide-to="9"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active" data-interval="1000">
<img src="http://neelnetworks.org/stangelos/images/pictures_carousel/1.jpg" alt="...">
<div class="carousel-caption wow animated fadeInUp animated">
Wi-Fi for everybody, <br> benefits for you
</div>
</div>
<div class="item" data-interval="5000">
<img src="http://neelnetworks.org/stangelos/images/pictures_carousel/3.jpg" alt="...">
<div class="carousel-caption animated fadeInRight">
Let the good times begin, make your Social Wi-Fi profitable!
</div>
</div>
<div class="item" data-interval="5000">
<img src="http://neelnetworks.org/stangelos/images/pictures_carousel/4.jpg" alt="...">
<div class="carousel-caption animated fadeInDown" style="color: #4e0054; text-shadow: 0 0 2px #fff;">
Your patients enjoy high quality Wi-Fi while waiting for your assistance
</div>
</div>
<div class="item" data-interval="5000">
<img src="http://neelnetworks.org/stangelos/images/pictures_carousel/6.jpg" alt="...">
<div class="carousel-caption animated fadeInLeft" style="color: #006b24;">
Controlled Wi-Fi avoids intruders and prevents abuses
</div>
</div>
<div class="item" data-interval="5000">
<img src="http://neelnetworks.org/stangelos/images/pictures_carousel/5.jpg" alt="...">
<div class="carousel-caption animated fadeInUp" style="color: #006b24;">
Social Wi-Fi gets closer to your customers, even if they are out of your shop …
</div>
</div>
<div class="item" data-interval="5000">
<img src="http://neelnetworks.org/stangelos/images/pictures_carousel/9.jpg" alt="...">
<div class="carousel-caption animated fadeInUp">
With Optimized Wi-Fi you get good coverage and fast browsing
</div>
</div>
<div class="item" data-interval="5000">
<img src="http://neelnetworks.org/stangelos/images/pictures_carousel/8.jpg" alt="...">
<div class="carousel-caption animated fadeInDown" style="color: #006b24;">
To better know your clients… Get closer them with Social Wi-Fi!
</div>
</div>
<div class="item" data-interval="5000">
<img src="http://neelnetworks.org/stangelos/images/pictures_carousel/7.jpg" alt="...">
<div class="carousel-caption animated fadeInRight" style="color: #4e0054; text-shadow: 0 0 2px #fff;">
Be always connected to your customer thanks to Social Wi-Fi
</div>
</div>
<div class="item" data-interval="5000">
<img src="http://neelnetworks.org/stangelos/images/pictures_carousel/2.jpg" alt="...">
<div class="carousel-caption animated fadeInLeft">
Optimized Wi-Fi, your patients connected as if the network is only for them
</div>
</div>
<div class="item" data-interval="5000">
<img src="http://neelnetworks.org/stangelos/images/pictures_carousel/10.jpg" alt="...">
<div class="carousel-caption animated fadeInLeft" style="color: #4e0054; text-shadow: 0 0 2px #fff;">
Let the good times begin, make your Social Wi-Fi profitable!
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-1" role="button" data-slide="prev">
<span class="fa fa-angle-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-1" role="button" data-slide="next">
<span class="fa fa-angle-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
I think you should change the value of first child from 1000 to 5000.
From
<div class="carousel-inner" role="listbox">
<div class="item active" data-interval="1000">
To
<div class="carousel-inner" role="listbox">
<div class="item active" data-interval="5000">