I am learning modal carousel to create a image slideshow when the user click on a image thumbnail but I don't know how to create a close button to close the modal after the slideshow has been started.
Here's the code:
<div class="modal fade" id="vnModal">
<div class="modal-body">
<div id="thanhhoa" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#thanhhoa" data-slide-to="0" class="active"></li>
<li data-target="#thanhhoa" data-slide-to="1"></li>
<li data-target="#thanhhoa" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="http://go-ixe.com/img/thanhhoa/thanhhoa1.jpg" class="img-responsive image2" alt="ThanhHoa1" class="img-rounded">
</div>
<div class="carousel-item">
<img src="http://go-ixe.com/img/thanhhoa/thanhhoa2.jpg" class="img-responsive image2" alt="ThanhHoa2" class="img-rounded">
</div>
<div class="carousel-item">
<img src="http://go-ixe.com/img/thanhhoa/thanhhoa3.jpg" class="img-responsive image2" alt="ThanhHoa3" class="img-rounded">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#thanhhoa" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#thanhhoa" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
</div>
Related
The carousel isn't working as it supposed to work. I've checked the code several times but it seems I don't know why there's no transition between the photos
I've tried adding the carousel to my webpage but somehow only the active photo is being displayed. There is no transition in the photo-set.
<div class="container">
<div id="main-slider" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#main-slider" data-slide-to="0" class="active"></li>
<li data-target="#main-slider" data-slide-to="1"></li>
<li data-target="#main-slider" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img src="img/slide_01.jpg" class="d-block img-fluid" alt="">
</div>
<!--carousel item-->
<div class="carousel-item">
<img src="img/slide_02.jpg" class="d-block img-fluid" alt="">
</div>
<div class="carousel-item">
<img src="img/slide_03.jpg" class="d-block img-fluid" alt="">
</div>
</div>
<a href="#main-slider" class="carousel-control-prev" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a href="#main-slider" class="carousel-control-next" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
The three photo set "slide_01.jpg" ,"slide_02.jpg","slide_01.jpg" should change on the click of the "carousel-control-next" button.
Make sure you have included all the necessary libraries for the carousel to work.
If you are using Bootstrap v4.2 then you need the following
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
I copied your HTML code and it works...
See demo below
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<h2>demo</h2>
<div class="container">
<div id="main-slider" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#main-slider" data-slide-to="0" class="active"></li>
<li data-target="#main-slider" data-slide-to="1"></li>
<li data-target="#main-slider" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img src="http://placekitten.com/g/600/400" class="d-block img-fluid" alt="">
</div>
<!--carousel item-->
<div class="carousel-item">
<img src="http://placekitten.com/g/600/400" class="d-block img-fluid" alt="">
</div>
<div class="carousel-item">
<img src="http://placekitten.com/g/600/400" class="d-block img-fluid" alt="">
</div>
</div>
<a href="#main-slider" class="carousel-control-prev" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a href="#main-slider" class="carousel-control-next" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
I am developing a front-end website using bootstrap. I have inserted a slideshow but it doesn't fit the screen. I have inserted the image into the HTML, not into the CSS. Here is my code:
<div class="container-fluid" id="background">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="slideShow">
<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="pics/happiness1.jpg" alt="Happiness" class="slideShow">
</div>
<div class="item">
<img src="pics/happiness2.jpg" alt="Happiness" class="slideShow">
</div>
<div class="item">
<img src="pics/happiness3.jpg" alt="Happiness" class="slideShow">
</div>
<div class="item">
<img src="pics/happiness4.jpg" alt="Happiness" class="slideShow">
</div>
<div class="item">
<img src="pics/happiness5.jpg" alt="Happiness" class="slideShow">
</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>
</div>
</div>
</div>
How to make those images fit to the screen?
Append this last of your css file ..
.carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img{
min-height: 100vh;
}
<div class="container-fluid" >
<div class="row">
<section class="col-12">
<div class="">
<div class="row">
<section class="col-sm-12">
</div>
<div class="carousel slide" id="featured" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#featured" data-slide-to="0" class="active"></li>
<li data-target="#featured" data-slide-to="1"></li>
<li data-target="#featured" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block img-fluid" src="_images/Slider_1.jpg" alt="slider1">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="_images/Slider_2.jpg" alt="slider2">
<div class="carousel-caption d-none d-md-block">
<h3>Jadon Events</h3>
<p>We organize your events like you cannot even imagine</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="_images/Slider_3.jpg" alt="slider3">
</div>
</div>
<a class="carousel-control-prev" href="#featured" role="button" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true">
<span class="sr-only">Previous</span>
</span></a>
<a class="carousel-control-next" href="#featured" role="button" data-slide="prev"><span class="carousel-control-next-icon" aria-hidden="true">
<span class="sr-only">Next</span>
</span></a>
</div>
</section>
</div>
</div>
I have figured out how to make slider in bootstrap, but now I am stuck with full width slider.
how can I make my carousel full width? I removed container classes but it makes some scroll at bottom which is not good for responsiveness
Try the following code and change images with yours.
<div class="carousel slide" id="featured" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#featured" data-slide-to="0" class="active"></li>
<li data-target="#featured" data-slide-to="1"></li>
<li data-target="#featured" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block img-fluid" src="http://placehold.it/2100x300" alt="slider1">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://placehold.it/2100x300" alt="slider2">
<div class="carousel-caption d-none d-md-block">
<h3>Jadon Events</h3>
<p>We organize your events like you cannot even imagine</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://placehold.it/2100x300" alt="slider3">
</div>
</div>
<a class="carousel-control-prev" href="#featured" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true">
<span class="sr-only">Previous</span>
</span>
</a>
<a class="carousel-control-next" href="#featured" role="button" data-slide="prev">
<span class="carousel-control-next-icon" aria-hidden="true">
<span class="sr-only">Next</span>
</span>
</a>
</div>
I have a bootstrap carousel here in jsfiddle and I'm trying to see if I can style the controls/arrows on the left and right side so they don't show a darker area both with and without hovering over the arrows/side area. I just want the arrows to highlight when they get hovered over.
Here is my basic carousel code
.item img {width: 100%; height: auto}
<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="http://placehold.it/450x350" alt="Slide 1">
<div class="carousel-caption">
Caption Slide 1
</div>
</div>
<div class="item">
<img src="http://placehold.it/450x350" alt="Slide 2">
<div class="carousel-caption">
Caption Slide 2
</div>
</div>
<div class="item">
<img src="http://placehold.it/450x350" alt="Slide 3">
<div class="carousel-caption">
Caption Slide 3
</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>
Here is the code of the carousel tutorial that i've got from http://bootstrapbay.com/blog/bootstrap-3-carousel-tutorial/. The carousel next button and the carousel dotted button doesn't work. I don't know what happen. Please help me about this. I put the image and the red button determines the buttons that doesn't work.
<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="http://placehold.it/1200x315" alt="...">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x315" alt="...">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x315" alt="...">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div> <!-- Carousel -->
Carousel ScreenShot
As the step 2 of the tutorial you linked in the question says, you have to add the following tags to add jquery (order matters):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>