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>
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 :)
PFB is the example, Here I am using for Bootstrap Carousel control.
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel2&stacked=h
This example is working fine but when i am using tab key from the keyboard, control is not going on to anchor tag inside the div with class "carousel-caption".
I tried "tab-index" attribute for anchor tag to set the tabbing but tabbing is not working properly.
I want tabbing to work like below:
Left Arrow -> 1st anchor tag("LA is always so much fun!") -> 2nd anchor tag("Thank you, Chicago!") -> 3rd anchor tag("We love the Big Apple!") -> Right arrow
Could anyone please let me know how to implement tabbing for
<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="C:\Users\user1\Desktop\Sample\video-bg-static1.png" alt="Los Angeles" style="width:100%;">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<a>LA is always so much fun!</a>
</div>
</div>
<div class="item">
<img src="C:\Users\user1\Desktop\Sample\video-bg-static2.png" alt="Chicago" style="width:100%;">
<div class="carousel-caption">
<h3>Chicago</h3>
<a>Thank you, Chicago!</a>
</div>
</div>
<div class="item">
<img src="C:\Users\user1\Desktop\Sample\video-bg-static3.png" alt="New york" style="width:100%;">
<div class="carousel-caption">
<h3>New York</h3>
<a>We love the Big Apple!</a>
</div>
</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>
You can't have tab index defined on an <li>, so we had to wrap our ul.carousel-indicators>li inside an anchor tag (which does work with tab index)...
Check the code which works with the same example and implements tabIndex as you wanted...
update: in light of questioner's comment, tab index now goes to the <p> under the heading on each slide instead of the carousel indicators; the href for these <a> tags to be updated by the user...
.carousel-indicators .active {
border-radius: 50%;
}
<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>
<div class="container">
<h2>Carousel Example</h2>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://www.w3schools.com/bootstrap/la.jpg" alt="Los Angeles" style="width:100%;">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<a class="active" tabindex="2" href="#myCarousel" data-slide-to="0">
<p>LA is always so much fun!</p>
</a>
</div>
</div>
<div class="item">
<img src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="Chicago" style="width:100%;">
<div class="carousel-caption">
<h3>Chicago</h3>
<a class="" tabindex="3" href="#myCarousel" data-slide-to="1">
<p>Thank you, Chicago!</p>
</a>
</div>
</div>
<div class="item">
<img src="https://www.w3schools.com/bootstrap/ny.jpg" alt="New York" style="width:100%;">
<div class="carousel-caption">
<h3>New York</h3>
<a class="" tabindex="4" href="#myCarousel" data-slide-to="2">
<p>We love the Big Apple!</p>
</a>
</div>
</div>
</div>
<!-- Indicators -->
<ol class="carousel-indicators">
<li class="" data-target="#myCarousel" data-slide-to="0">
</li>
<li class="" data-target="#myCarousel" data-slide-to="1">
</li>
<li class="" data-target="#myCarousel" data-slide-to="2">
</li>
</ol>
<!-- Left and right controls -->
<a class="left carousel-control" tabindex="1" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" tabindex="5" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
According to your comment:
...Here I want to navigate between the carousel controls using the keyboard.
You can use keydown event. As reported in the documentation:
Keyboard events are only generated by , and anything with the contentEditable attribute or with tabindex="-1".
It's required to add tabindex="-1" to your carousel div plus the event handler.
$('#myCarousel').on('keydown', function(e) {
if (e.keyCode == 37) { // left arrow
$('#myCarousel').carousel('prev')
} else {
if (e.keyCode == 39) { // right arrow
$('#myCarousel').carousel('next')
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel" tabindex="-1">
<!-- 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="https://dummyimage.com/300x200/000/fff&text=1" alt="Los Angeles" style="width:100%;">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<a>LA is always so much fun!</a>
</div>
</div>
<div class="item">
<img src="https://dummyimage.com/300x200/000/fff&text=2" alt="Chicago" style="width:100%;">
<div class="carousel-caption">
<h3>Chicago</h3>
<a>Thank you, Chicago!</a>
</div>
</div>
<div class="item">
<img src="https://dummyimage.com/300x200/000/fff&text=3" alt="New york" style="width:100%;">
<div class="carousel-caption">
<h3>New York</h3>
<a>We love the Big Apple!</a>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- 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*/
}
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.
I am trying to implement carousel in bootstrap CSS but the carousel is not rotating,I am using HTML images in the carousel,
Here is the code:
<!--Indicators-->
<ol class="carousel-indicators">
<li class="active" data-target="#myCarousel" data-slide-to="0"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2" ></li>
</ol><!--End ordered list-->
<!--Wrapper for slides-->
<div class="carousel-inner">
<div class="item active" id="slide1">
<img src="http://placehold.it/1200x500">
<div class="carousel-caption">
<h4>Bootstrap 3</h4>
<p>Learn how to build your first responsive website with the brand new Twiter Bootstrap3!</p>
</div><!--End carousel caption-->
</div><!--End item-->
<div class="item" id="slide2">
<img src="http://placehold.it/1200x500">
<div class="carousel-caption">
<h4>Learn to code a website in 4 hours!</h4>
<p>PSD to HTML & CSS3 is a popular Udemy course that has helped thousands of aspiring web designers launch their web design career.</p>
</div><!--End carousel caption-->
</div><!--End item-->
<div class="item" id="slide3">
<img src="http://placehold.it/1200x500">
<div class="carousel-caption">
<h4>Web Hosting 101</h4>
<p>Learn how to buy a perfect domain name and hosting package, and get your website live on the web with ease.</p>
</div><!--End carousel caption-->
</div><!--End item-->
</div><!--End carousel inner-->
<!--carousal controls-->
<a class="left carousel-control" data-slide="prev" href="#myCarousel"><span class="icon-prev"></span></a>
<a class="right carousel-control" data-slide="next" href="#myCarousel"><span class="icon-next"></span></a>
</div><!--End myCrousel-->'
Where am i doing wrong??Please suggest...
Thanks,
Pranay
Link to Bootply
The problem was that you had targeted myCarousel but hadn't set that anywhere. You needed to give a div the id of myCarousel and wrap it around your code.
Wrap this code around yours:
<div id="myCarousel" class="carousel slide">
<!-- Your code -->
</div>
You need to add above indicators
<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">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
You can get for details at http://getbootstrap.com/javascript/#carousel
Thanks
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- 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>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<h2>Slide 1</h2>
<div class="carousel-caption">
<h3>First slide label</h3>
<p>Lorem ipsum dolor sit amet consectetur…</p>
</div>
</div>
<div class="item">
<h2>Slide 2</h2>
<div class="carousel-caption">
<h3>Second slide label</h3>
<p>Aliquam sit amet gravida nibh, facilisis gravida…</p>
</div>
</div>
<div class="item">
<h2>Slide 3</h2>
<div class="carousel-caption">
<h3>Third slide label</h3>
<p>Praesent commodo cursus magna vel…</p>
</div>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
It is worth noting for me, I was failing to link to the bootstrap.js files properly. If you are simply using the examples in the 4.0 beta files from GetBootstrap.com you can likely use the following at the end of your file.
<script src="assets/js/vendor/popper.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
If you are projecting low traffic and don't want to include the files directly in your project you can use the CDN.
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>