I would like to use card-image-top section as a slider, especially on mobile. I will use that part as product card and i want my customers to see several images on this part. Is there an easy way to do this?
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<p class="card-text">Example Text</p>
</div>
</div>
I solved it.
<div class="card">
<div id="carouselExampleIndicators2" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="w-100" src="https://picsum.photos/1920/1080?random=4" alt="image">
</div>
<div class="carousel-item">
<img class="w-100" src="https://picsum.photos/1920/1080?random=5" alt="image">
</div>
<div class="carousel-item">
<img class="w-100" src="https://picsum.photos/1920/1080?random=6" alt="image">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators2" 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="#carouselExampleIndicators2" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Related
I am using below code to make carousel having vertical images. It is not responsive i.e. it works completely fine on desktop but on reducing screen size, images are not fully visible (i.e half portion of image is not visible in carousel).
How can I remove this bug?
<div class="container ">
<div class="col-md-offset-1 col-md-11 col-sm-2 col-xs-12">
<div id="carousel-pager" class="carousel slide " data-ride="carousel" data-interval="1000">
<div class="carousel-inner vertical">
<div class="active item" style="object-fit: fill;">
<img style="object-fit: fill;" src="..." class="img-responsive" data-target="#carousel-main" data-slide-to="0" width:100>
</div>
<div class="item" style="object-fit: fill;">
<img src="..." class="img-responsive" data-target="#carousel-main" data-slide-to="1">
</div>
<div class="item" style="object-fit: fill;">
<img src="..." class="img-responsive" data-target="#carousel-main" data-slide-to="2">
</div>
</div>
<a class="left carousel-control" href="#carousel-pager" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-pager" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
You are using bootstrap, you should add the classes: d-block and mx-auto for responsiveness to all the img tags.
like so:
<img src="..." class="d-block mx-auto" data-target="#carousel-main" data-slide-to="2">
It will make them responsive.
Source: https://getbootstrap.com/docs/4.0/components/carousel/
also change all the div class="item" to div class="carousel-item"
OR use this:
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" 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 try this :
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
I have added min-width: 100%; to make image take full container.
I figured out that bootstrap carousel with captions has zoom effect. I need captions but i do not need zoom. Can someone help? I googled the issue but was not able to find the answer.
<div id="carouselExampleCaptions" class="carousel slide"
data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/aloyan.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Dr. Hayk Aloyan</h5>
<p>President and Non-Executive Director of Mineral Investment Group</p>
</div>
</div>
<div class="carousel-item">
<div class="carousel-caption d-none d-md-block">
<h5>Mr. Hovhannes Karapetyan</h5>
<p>COO, founder of Mountain Jaguar Team</p>
</div>
<img src="img/karapetyan.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/megrelidze.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Mr. Giorgi Megrelidze</h5>
<p> Managing Director, founder of Mountain Jaguar Team</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
Just check on which class is the css command "transform: scale" or eq an erase it in the css file. For more help we need to get an working example.
I created a carousel modal for Bootstrap and can't figure out how to properly center it regardless of screensize or if for example a mobilescreen is tilted vertically.
The CSS Code I have right now properly spaces the modal on a normal pc screen, but it doesnt work on mobile screen and the MOdal appears on the top of the screen instead of appearing in the middle as it should. neither
position
nor
vertical-alignment
worked for me.
.modal {
vertical-align: middle;
padding-left: 5%;
padding-left: 5%;
padding-top: 1%;
text-align: middle;
max-height: 90vh;
max-width: 95vw;
}
.modal .carousel-inner {
max-height: 100% ! important;
position: center;
text-align: middle;
vertical-align: middle;
}
.modal .carousel .item #media (max-width: 991px) {
.modal {
padding-top: 55%;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Page Content -->
<div class="container">
<h1 class="my-4 text-center text-lg-left" style="padding-bottom:3%;padding-left:0%">Gallerie</h1>
<div class="row text-center text-lg-left">
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="" data-toggle="modal" data-target="#Gallerie">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="">
</a>
</div>
</div>
<div class="modal" id="Gallerie">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="http://placehold.it/400x300" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://placehold.it/400x300" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://placehold.it/400x300" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" 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>
<!--/Gallerie-->
The modal needs the proper structure as detailed the Bootstrap 4 docs. Just use modal-dialog-centered and you don't need the extra CSS...
https://www.codeply.com/go/BDNba719xE
<div class="modal" id="Gallerie">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="http://placehold.it/400x300" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://placehold.it/400x300" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://placehold.it/400x300" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" 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>
I am having trouble down scaling a responsive image in bootstrap using the example carousel on their website.
<div class="container">
<div class="other-div">
....
</div>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner img-fluid">
<div class="carousel-item active">
<img class="img-fluid" src="/path/1.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="img-fluid" src="/path/2.jpg" alt="Second slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
The images appears as follows:
How the images should appear
The image is quite large around 3000x1500 px. I was hoping to scale it down to be the width of the container and an appropriate height to keep aspect ratio. ex 900/450.
The problem was that had to remove the class definitions for carousel-item and the animation elements because they were treating the imgs as flex elements. Added the following to my style.css:
.carousel-item{}
.carousel-item-next, .carousel-item-prev, .carousel-item.active
{
display:block;
}
<div class="carousel slide ">
<div class="carousel-inner " data-ride="carousel" id="featured">
<div class="item active">
<img src="images/carousel-lifestyle.jpg" alt="Lifestyle Photo">
</div>
<div class="item">
<img src="images/carousel-mission.jpg" alt="Mission">
</div>
<div class="item">
<img src="images/carousel-vaccinations.jpg" alt="Vaccinations">
</div>
<div class="item">
<img src="images/carousel-fish.jpg" alt="Fish">
</div>
<div class="item">
<img src="images/carousel-exoticanimals.jpg" alt="Exotic Animals">
</div>
<a href="#featured" class="left carousel-control" data-slide="prev" role="button">
<span class="glyphicon glyphicon-chevron-left"></span> <!--Previous button-->
</a>
<a href="#featured" class="right carousel-control" data-slide="next" role="button">
<span class="glyphicon glyphicon-chevron-right"></span> <!-- Next button-->
</a>
</div>
</div>
The next and previous navigation buttons are not working, though they are evident on the screen
I can't figure out why the navigation of my carousel is not working.
You are missing id for your carousel.
<a href="#featured" class="left carousel-control" data-slide="prev" role="button">
Your navigation links are referencing to an element having id="featured" but it is not anywhere in your markup.
Add featured as id to make your slider work:
<div id="featured" class="carousel slide">
//-------^^^^^^^^ this missing id causing your slider to not work properly.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div id="featured" class="carousel slide">
<div class="carousel-inner " data-ride="carousel" id="featured">
<div class="item active">
<img src="images/carousel-lifestyle.jpg" alt="Lifestyle Photo">
</div>
<div class="item">
<img src="images/carousel-mission.jpg" alt="Mission">
</div>
<div class="item">
<img src="images/carousel-vaccinations.jpg" alt="Vaccinations">
</div>
<div class="item">
<img src="images/carousel-fish.jpg" alt="Fish">
</div>
<div class="item">
<img src="images/carousel-exoticanimals.jpg" alt="Exotic Animals">
</div>
<a href="#featured" class="left carousel-control" data-slide="prev" role="button">
<span class="glyphicon glyphicon-chevron-left"></span> <!--Previous button-->
</a>
<a href="#featured" class="right carousel-control" data-slide="next" role="button">
<span class="glyphicon glyphicon-chevron-right"></span> <!-- Next button-->
</a>
</div>
</div>