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.
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 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>
I'm using Bootstrap 4 carousel and trying to make it full width. And at first glance, it looks like full width, but then when you take a look at it at larger screens, the rest of the sliders after the first one show up as well. Just try zooming out the window.
How can I fix this?
Here's my code:
.first-slide {
background: url("https://image.ibb.co/kvhXGH/jetty_1373173_1920.jpg");
}
.carousel-item {
height: 800px;
width: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="container-fluid p-0">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active first-slide">
<div class="row">
<div class="col-md-6 offset-md-1">
<h1>Title</h1>
<p>Text goes here</p>
</div>
<div class="col-md-5"></div>
</div>
</div>
<div class="carousel-item first-slide">
<div class="row">
<div class="col-md-6 offset-md-1">
<h1>Title</h1>
<p>Text goes here</p>
</div>
<div class="col-md-5"></div>
</div>
</div>
<div class="carousel-item first-slide">
<div class="row">
<div class="col-md-6 offset-md-1">
<h1>Title</h1>
<p>Text goeshere</p>
</div>
<div class="col-md-5"></div>
</div>
</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>
</div>
</div>
Have you considered checking the markup on Bootstrap's website?
.carousel-item img {
max-height: 100vh;
object-fit: cover;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<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="https://image.ibb.co/kvhXGH/jetty_1373173_1920.jpg" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h5>Title</h5>
<p>Text goes here</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://image.ibb.co/kvhXGH/jetty_1373173_1920.jpg" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h5>Title</h5>
<p>Text goes here</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://image.ibb.co/kvhXGH/jetty_1373173_1920.jpg" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h5>Title</h5>
<p>Text goes here</p>
</div>
</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>
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 added the bootstrap carousel and changed to display multiple items, although I have a problems
When I click on the next logo everything is ok, but when I click on the previous logo, appear multiple logos all together before to fix itself, What happens? How can I fix that problem?
Here a link to the project, live page and complete repo
https://sebalaini.github.io/portfolio_test/
https://github.com/sebalaini/portfolio_test
Here the Codepen https://codepen.io/sebalaini/pen/wpRVYL and the code:
<div id="carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="4"></li>
<li data-target="#carousel" data-slide-to="8"></li>
<li data-target="#carousel" data-slide-to="10"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block" src="https://wallpapercave.com/wp/ci1BoK6.jpg" alt="First slide">
<div class="carousel-caption d-block">
<h4>HTML</h4>
</div>
</div>
<div class="carousel-item">
<img class="d-block" src="https://wallpapercave.com/wp/ci1BoK6.jpg" alt="Second slide">
<div class="carousel-caption d-block">
<h4>CSS</h4>
</div>
</div>
<div class="carousel-item">
<img class="d-block" src="https://wallpapercave.com/wp/ci1BoK6.jpg" alt="Third slide">
<div class="carousel-caption d-block">
<h4>SASS</h4>
</div>
</div>
<div class="carousel-item">
<img class="d-block" src="https://wallpapercave.com/wp/ci1BoK6.jpg" alt="Third slide">
<div class="carousel-caption d-block">
<h4>Javascript</h4>
</div>
</div>
<div class="carousel-item">
<img class="d-block" src="https://wallpapercave.com/wp/ci1BoK6.jpg" alt="First slide">
<div class="carousel-caption d-block">
<h4>Jquery</h4>
</div>
</div>
<div class="carousel-item">
<img class="d-block" src="https://wallpapercave.com/wp/ci1BoK6.jpg" alt="Second slide">
<div class="carousel-caption d-block">
<h4>React</h4>
</div>
</div>
<div class="carousel-item">
<img class="d-block" src="https://wallpapercave.com/wp/ci1BoK6.jpg" alt="First slide">
<div class="carousel-caption d-block">
<h4>webpack</h4>
</div>
</div>
<div class="carousel-item">
<img class="d-block" src="https://wallpapercave.com/wp/ci1BoK6.jpg" alt="Third slide">
<div class="carousel-caption d-block">
<h4>NPM</h4>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carousel" 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="#carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
It seems that the numbering of your indicators was a bit messed up. Also, you have a bit much of custom css for my taste. So, I ripped it out and used native Bootstrap classes instead such as mx-auto (margin horizontal auto).
Check out this snippet and then start adding your own custom code bit by bit until you see where it breaks:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
body {
background: black;
}
.carousel-inner {
height: 300px;
}
.carousel-item {
height: 300px;
}
.carousel-item img {
max-width: 250px;
max-height: 250px;
}
</style>
<div class="container">
<div class="row">
<div class="col mt-4">
<div id="carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="3"></li>
<li data-target="#carousel" data-slide-to="7"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block mx-auto" src="https://wallpapercave.com/wp/ci1BoK6.jpg" alt="First slide">
<div class="carousel-caption d-block mx-auto">
<h4>01 HTML</h4>
</div>
</div>
<div class="carousel-item">
<img class="d-block mx-auto" src="https://wallpapercave.com/wp/ci1BoK6.jpg" alt="Second slide">
<div class="carousel-caption d-block mx-auto">
<h4>02 CSS</h4>
</div>
</div>
<div class="carousel-item">
<img class="d-block mx-auto" src="https://wallpapercave.com/wp/ci1BoK6.jpg" alt="Third slide">
<div class="carousel-caption d-block mx-auto">
<h4>03 SASS</h4>
</div>
</div>
<div class="carousel-item">
<img class="d-block mx-auto" src="https://wallpapercave.com/wp/ci1BoK6.jpg" alt="Third slide">
<div class="carousel-caption d-block mx-auto">
<h4>04 Javascript</h4>
</div>
</div>
<div class="carousel-item">
<img class="d-block mx-auto" src="https://wallpapercave.com/wp/ci1BoK6.jpg" alt="First slide">
<div class="carousel-caption d-block mx-auto">
<h4>05 Jquery</h4>
</div>
</div>
<div class="carousel-item">
<img class="d-block mx-auto" src="https://wallpapercave.com/wp/ci1BoK6.jpg" alt="Second slide">
<div class="carousel-caption d-block mx-auto">
<h4>06 React</h4>
</div>
</div>
<div class="carousel-item">
<img class="d-block mx-auto" src="https://wallpapercave.com/wp/ci1BoK6.jpg" alt="First slide">
<div class="carousel-caption d-block mx-auto">
<h4>07 webpack</h4>
</div>
</div>
<div class="carousel-item">
<img class="d-block mx-auto" src="https://wallpapercave.com/wp/ci1BoK6.jpg" alt="Third slide">
<div class="carousel-caption d-block mx-auto">
<h4>08 NPM</h4>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carousel" 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="#carousel" 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>
<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>