I'm still very new to bootstrap/programming html in general as this is a new hobby. I have difficulty using the carousel properly and the next questions should take seconds to anybody I guess but I've been messing with codes for an hour and I can't still find why...
I copy/pasted the given code on bootstrap's site and filled the fields with proper items (used .svg for bg img, named the id differently but changed all the other ids too.). Maybe someone could tell me why the indicators/img are not fitted properly. i.e.: indicators are at the top left corner just like any other ordered list bullets and img show underneath them.
in head there is
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
---
<div class="container">
<!-- CAROUSEL -->
<div id="mon-carousel" class="carousel slide" data-ride="carousel" style="width: 450; height: 250; margin-left: auto; margin-right: auto;>
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#mon-carousel" data-slide-to="0" class="active"></li>
<li data-target="#mon-carousel" data-slide-to="1"></li>
<li data-target="#mon-carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/solid-black.svg" alt="fond-gris" style="width: 450; height: 250;">
<div class="carousel-caption">
<h3>TEST CAPTION 1</h3>
<p>test</p>
</div>
</div>
<div class="item">
<img src="img/solid-black.svg" alt="fond-gris" style="width: 450; height: 250;">
<div class="carousel-caption">
<h3>TEST CAPTION 2</h3>
<p>test</p>
</div>
</div>
<div class="item">
<img src="img/solid-black.svg" alt="fond-gris" style="width: 450; height: 250;">
<div class="carousel-caption">
<h3>TEST CAPTION 2</h3>
<p>test</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#mon-carousel" 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="#mon-carousel" 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>
Your webpage is most probably missing the required bootstrap files.
Add this line to your <head>....</head> section:
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
And this line below your jQuery script line:
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
I realized that when I used style in the carousel's div it was the source of the problem... I guess I'll have to find an other way around to size the carousel.
Related
About the issue that currently facing is that for Bootstrap Carousel (from w3school) , there is a problem for carousel-control.
Problem that i am facing is that when i have enter hyperlink for the image , the carousel-control are larger then the image itself (screenshot below).
Screenshot: https://prnt.sc/r4wh2f
Codes for my bootstrap carousel
<div class="row">
<div class="col-12 col-md-12 banner-section">
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<a href="facebook.com"><picture>
<source media="(max-width: 900px)" srcset="image/banner01small.jpg">
<img src="image/banner01" alt="banner" style="z-index:1" class="img-fluid">
</picture></a>
</div>
<div class="item">
<a href="instagram.com"><picture>
<source media="(max-width: 900px)" srcset="image/banner02small.jpg">
<img src="image/banner02" alt="banner" style="z-index:1" class="img-fluid">
</picture></a>
</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>
</div>
</div>
Hope this help you. Demo
Just Added CSS below mentioned code
a.carousel-control {
width: 30px;
height: 30px;
top: 47%;
}
This is because the controls are also using the anchor tag and is conflicting with the same.you can add additional css to control anchor tags of the carousal and it will work fine.
All the best :)
<!-- START OF FIRST LITTER GALLERY-->
<div class="col-lg-6 col-xs-12">
<div class="thumbnail">
<img src="https://animatedanatomy.com/images/16-9-dummy-image6.jpg" data-toggle="modal" data-target="#firstModal">
<!-- Modal -->
<div class="modal fade" id="firstModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div id="ffl" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="ffl" data-slide-to="0" class="active"></li>
<li data-target="ffl" data-slide-to="1"></li>
<li data-target="ffl" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://www.oneperiodic.com/products/photobatch/tutorials/img/scale_original.png">
</div>
<div class="item">
<img src="https://animatedanatomy.com/images/16-9-dummy-image6.jpg">
</div>
<div class="item">
<img src="https://www.oneperiodic.com/products/photobatch/tutorials/img/scale_original.png">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#ffl" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#ffl" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
<div class="caption">
<p>THUMBNAIL TEXT</p>
</div>
</div>
</div>
<!-- END OF FIRST LITTER GALLERY-->
<!-- START OF SECOND LITTER GALLERY-->
<div class="col-lg-6 col-xs-12">
<div class="thumbnail flexbox">
<img src="https://www.oneperiodic.com/products/photobatch/tutorials/img/scale_original.png" data-toggle="modal" data-target="#secondModal">
<!-- Modal -->
<div class="modal fade" id="secondModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div id="sfl" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="sfl" data-slide-to="0" class="active"></li>
<li data-target="sfl" data-slide-to="1"></li>
<li data-target="sfl" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://animatedanatomy.com/images/16-9-dummy-image6.jpg">
</div>
<div class="item">
<img src="https://www.oneperiodic.com/products/photobatch/tutorials/img/scale_original.png">
</div>
<div class="item">
<img src="https://animatedanatomy.com/images/16-9-dummy-image6.jpg">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#sfl" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#sfl" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
<div class="caption">
<p>THUMBNAIL TEXT</p>
</div>
</div>
</div>
<!-- END OF SECOND LITTER GALLERY-->
Here is an example that I have created.
I have created my first website with bootstrap and I want to make it look as good as possible so now I hit something that cannot make without help.
The trouble is that I would like to have my images inside thumbnail same size even if they are different resolution. I used max/min-width/height but this does not solve the problem. Tried overflow but in that case my caption was under image.
What I am looking for:
In case if the image is not the right size I would like to have this image centred and rest of the image overflowed under the caption and thumbnail.
Also how to make my images in modal window original size.
This is the page that I have created so it may help to understand my problem.
There are several ways to do this.
The fastest way would be to change in css
.thumbnail img {
display: flex; /*remove this*/
float: left; /*remove this*/
margin-left: 50%; /*added this*/
transform: translateX(-50%); /*added this*/
}
Soo... if anyone has a few minutes to spare and can take a look at my code and help me out here... I have a problem that I can't solve and have been busting my head for hours now...
So I'm making a page for a local intermunicipal Football Association using Bootstrap and I'm trying to achieve this: the carousel overlaying the background image, dont mind the blue and yellow thing...
and this is what I get:
Here is my code:
HTML:
<!--Background image-->
<div class="bg">
<img src="img/football-field.jpg" class="img-responsive" alt="ozadje">
</div>
<!--Main content of page-->
<section id="main-content">
<div class="container">
<div class="col-md-2 col-sm-2 navigation">
content content
content content
content content
content content
content content
content content
</div>
<!--Beginning of carousel-->
<div class="col-md-10 col-md-10 galery">
<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">
<div class="item active">
<img src="img/example.jpg" alt="desc">
</div>
<div class="item">
<img src="img/example.jpg" alt="desc">
</div>
<div class="item">
<img src="img/example.jpg" alt="desc">
</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>
</div>
</section>
and my CSS:
.bg{
height: 420px;
z-index: -999;
}
#main-content{
z-index: 100;
background-color: white;
}
I'd realy apreciate some help :)
P.S. I hope you understand what I mean and am trying to acomplish... English is not my native language so there may be some poor choice of words and bad exlenation and a lot of typos :)
Using z-index only to display your content over your background image won't work.
In fact, z-index only works on an element with an absolute or fixed position.
The most easy and i believe most clean way to achieve what you want is to put your image as your page's background (with the css 'background' proprety).
#main-content{
background-image: url('img/football-field.jpg');
background-color: white;
}
An other way would be to make your section overlap the backgroung div.
#main-content{
position: absolute;
top: 0;
left: 0;
background: none;
}
You can set position value to your element so that the z-index works. It's either you use position fixed, absolute, or relative. Note that they are not the same and you need to add some css to it. Please see explanation here .
Sample:
header {
height: 100px;
position: relative;
}
header img {
width: 100%;
height: 100%;
}
.start {
position: absolute;
z-index: 100;
top: 0;
}
.navigation {
background: #F7F7F7;
}
#main-content{
position: relative;
background-color: white;
margin-top:-1.5em;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
</div>
</nav>
<!--Main content of page-->
<section id="main-content">
<header>
<img src="https://image.shutterstock.com/z/stock-photo-american-football-players-in-the-action-grand-arena-345202907.jpg" alt="ozadje">
</header>
<div class="container start">
<div class="col-md-2 col-xs-2 navigation">
content content
content content
content content
content content
content content
content content
</div>
<!--Beginning of carousel-->
<div class="col-md-10 col-xs-10 galery">
<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">
<div class="item active">
<img src="http://via.placeholder.com/950x250" alt="desc">
</div>
<div class="item">
<img src="http://via.placeholder.com/950x250" alt="desc">
</div>
<div class="item">
<img src="http://via.placeholder.com/950x250" alt="desc">
</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>
</div>
</section>
It does not look very nice if you run it, but you can maybe get an idea from this code. Instead of using a div and insert an image (which pushes your div down) you could set a background image in css:
#main-content{
background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/b/b9/Football_iu_1996.jpg/1200px-Football_iu_1996.jpg");
background-color: white;
}
.item img {
min-width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!--Main content of page-->
<section id="main-content">
<div class="container">
<div class="col-md-2 col-sm-2 navigation">
content content
content content
content content
content content
content content
content content
</div>
<!--Beginning of carousel-->
<div class="col-md-10 col-md-10 galery">
<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">
<div class="item active">
<img src="http://lorempixel.com/400/200/sports/" alt="desc">
</div>
<div class="item">
<img src="http://lorempixel.com/400/200/sports/" alt="desc">
</div>
<div class="item">
<img src="http://lorempixel.com/400/200/sports/" alt="desc">
</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>
</div>
</section>
It is probably not exactly as you want it but it may be helps you to get on track.
Hope it helps a bit.
This is my first carousel project and I have a question on the proper/preferred way of adding hyperlinks to the images. Here is my item format (using w3school's example):
<div class="item"><a href="videos/Reports.mp4" target="_blank">
<img src="graphics/reportsCarousel.png" /></a>
<a href="videos/Reports.mp4" target="_blank"><div class="carousel-caption">
<p>Reports</p>
</div></a>
</div>
Notice I have both the image and the caption linked, because the caption div caused a dead spot so that only the top and bottom of the image was active, i.e., clickable. I tried putting the caption in the image, but didn't like the results. I also tried moving the caption above and below the image, but the caption didn't display. I really like the way this looks, but wonder if there's a better way to set up the link?
Extra Credit: Also, I wonder if there is a way to have two or three images display side-by-side using the current div setup? When I put the second image into the item div the images display vertically instead of horizontally, even using an inline ul. I can do it using a more complicated method, but if I can easily tweak this one it would save me a lot of time.
I had some time today and put this together. It seems to work.
However, I am not sure it addresses your issues since, lacking a [mcve], I cannot reproduce your issues.
I added the JS to log the click event to console - you may or may not need it in your final version (again I am unsure of what you need since the code you provided is not complete/verifiable)
Please note
that the runnable snippet below is inside a frame and the x-frame-options is set to SAMEORIGIN so the link will not actually work here (you will need to copy/paste into your own page to see the links work)
$(function() {
$('.item').on('click', function() {
console.log('clicked! going to: ' + $(this).find('a').attr('href'));
window.location = $(this).find('a').attr('href');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<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" role="listbox">
<div class="item active">
<a href="http://google.com" target="_blank">
<img src="http://lorempixel.com/1024/480/" />
<div class="carousel-caption">
<h3>caption 1</h3>
</div>
</a>
</div>
<div class="item">
<a href="http://google.com" target="_blank">
<img src="http://lorempixel.com/1024/480/" />
<div class="carousel-caption">
<h3>caption 2</h3>
</div>
</a>
</div>
<div class="item">
<a href="http://google.com" target="_blank">
<img src="http://lorempixel.com/1024/480/" />
<div class="carousel-caption">
<h3>caption 3</h3>
</div>
</a>
</div>
<div class="item">
<a href="http://google.com" target="_blank">
<img src="http://lorempixel.com/1024/480/" />
<div class="carousel-caption">
<h3>caption 4</h3>
</div>
</a>
</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>
Doesnt't work. With that code you find the first href ever.
Try this one:
$(function() {
$( ".item" ).each(function(index) {
$(this).on("click", function() {
console.log('clicked! going to: ' + $(this).find('a').attr('href'));
});
});
});
I am using Bootstrap and I am using Carousel to display a few pictures. I have it all in place and the first picture shows, however when you click the right and left Chevron's it doesn't take you to the next picture.
I am a little new to HTML / CSSl and definitely Bootstrap. Any help is appreciated.
Thanks. My Carousel code is below.
<div class="container-fluid">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/type.jpg" alt="typewriter">
<div class="carousel-caption">
<h3>The Header</h3>
<p>Header Text</p>
</div>
</div>
<div class="item">
<img src="img/pad.jpg" alt="scratchpad">
<div class="carousel-caption">
<h3>Second Header</h3>
<p>Second Text</p>
</div>
</div>
<div class="item">
<img src="img/screen.jpg" alt="monitor">
<div class="carousel-caption">
<h3>Third Header</h3>
<p>Third Text</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
You probably forgot the bootstrap js file. can you include your header as well?
Make sure you have a link to bootstrap js (as well as css) in the html header
From the bootstrap site:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>