I'm new in HTML, CSS, and Bootstrap and I'm trying to create a carousel for my page.
The carousel is working, but the images are not fitting to the page. The size is too big (height and width) and I'm trying to fit but it's not working properly.
My codes are:
.carousel-inner img{
width:100%;
height: 40%;
}
.carousel-caption {
position: absolute;
top: 60%;
transform: translateY(-60%);
}
.carousel-caption h1{
font-size:470%;
text-transform: uppercase;
text-shadow:3px 3px 15px #000;
}
.carousel-caption h3{
color: #ffc107;
font-size: 200%;
font-weight: 500;
text-shadow: 3px 3px 10px #000;
padding-botton: 1rem;
}
<!-- Image slider -->
<div id="slides" class="carousel slide" data-ride="carousel">
<ul class= "carousel-indicators">
<li data-target= "#slides" data-slide-to= "0" class="active"></li>
<li data-target= "#slides" data-slide-to= "1"></li>
<li data-target= "#slides" data-slide-to= "2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="/home/susy/Desktop/GIT/vegan-/imagens/feijuca6.jpg">
<div class="carousel-caption">
<h1 class="display-2"> Have you ever tried?</h1>
<h3> Discover the authentic flavour</h3>
<br>
<button type="button" class= "btn btn-outline-light btn-lg"> Click Here</button>
</div>
</div>
<div class="carousel-item">
<img src="/home/susy/Desktop/GIT/vegan-/imagens/pudim.jpg">
</div>
<div class="carousel-item">
<img src="/home/susy/Desktop/GIT/vegan-/imagens/meal.jpg">
</div>
</div>
The first is the CSS (I'm using CSS 3) and the second is the HTML. I'm also using Bootstrap 4.
Does anyone know what am I missing or doing wrong? Or how can I change the sizes to fit the carousel? Please.
As per my knowledge use
.carousel-inner img{
max-width:100%;
height: auto;
display: block;
}
instead of using
.carousel-inner img{
width:100%;
height: 40%;
}
if you want absolute height you can specify height : 300px
.carousel-inner img{
max-width:100%;
height: 300px;
object-fit: cover;
object-position: center;
}
What I think you are searching for is adding class="d-block w-100" in your image tag.
Related
I created a carousel with images inside. But one of the images appear to be very big while the other is blur but fits well. I tried resizing with CSS but it's not working. What should I do?
Here is what I mean
This First screenshot shows the image fits wellshows image fits well
while in this screenshot, the image is big and it is cut off from the carousel
shows image is cut off from carousel
Here is what I tried
<style type="text/css">
.wrapper{
font-family: Nunito;
background-repeat: no-repeat;
height: 100%;
background-position: center;
background-size: cover;
overflow: hidden;
position: relative;
}
#carouselExampleIndicators{
max-width: 100%;
position: relative;
margin: auto;
margin-top: 0%;
}
.carousel-item {
padding: 10px;
max-width: 100%; /* Maximum width */
margin: 0 auto;
}
.carousel-inner {
width: auto;
height: 370px;
max-height: 370px !important;
position: relative;
}
.carousel img {
position: relative;
top: 0;
min-width: 100%;
height: auto;
max-width: 100%;
}
</style>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" style="background-color: #eeeeee;">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row" style="width: 100%;margin: 0 auto;">
<div class="col-md-6">
<div class="desc1">
<h4 style="color: #081139;">LET'S GO!</h4>
<p style="color: #081139;">Everyone needs to be on their toes in order to fight and stamp out bad eggs in the world</p>
</div>
</div>
<div class="col-md-6">
<div class="img1" style="margin: 0 auto; padding: 10px;">
<img id="img1" src="Image/Carousel/singlestc.png" alt="First slide" height="30" />
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row" style="width: 100%;margin: 0 auto;">
<div class="col-md-6">
<div class="desc2">
<h4 style="color: #081139;">WE CARE</h4>
<p style="color: #081139;">We are the world, lets make it a better place for the younger generations</p>
</div>
</div>
<div class="col-md-6">
<div class="img2">
<img id="img2" src="Image/Carousel/SNC.png" height="30" alt="Second slide"/>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
You are setting the width of 2 images to be 100% of the parent, and the reason it is being cut off is .wrapper class has a style of overflow: hidden, so your images are sizing properly but the overflow is hidden.
See example: https://imgur.com/a/D5Pfw0S
If you want to retain this fixed height, add styling for the .img1 and .img2 classes (Or create 1 img wrapper class which I world recommend more) and define the height on those, that way you can give the img elements a height of 100%, and set the width to be the variable (auto).
.img1, .img2 {
height: 370px;
max-height: 370px !important;
}
/* Or do this and add the class in place of img1 and img2 */
.img-wrapper {
height: 370px;
max-height: 370px !important;
}
.carousel img {
position: relative;
top: 0;
width: auto;
height: 100%;
}
I would however recommend editing your images to be a uniform size. That way there is no major disparities in the design.
I have been taking a few online classes and tutorials to better understand how to create websites using html/css and bootstrap in particular.
However one problem I have been unable to overcome is - I’m unable to make a carousel caption responsive - it just will not react to the resizing of a window.
HTML:
<div id="slides" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#slides" data-slide-to="0" class="active"></li>
<li data-target="#slides" data-slide-to="0"></li>
<li data-target="#slides" data-slide-to="0"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="IMG/TEAL ORIGAMI.jpeg">
<div class="carousel-caption">
<h1 class="display-2">ICE3DESIGN</h1>
<h3>Bespoke Web Design</h3>
<button type="button" class="btn btn-outline-light btn-lg">VIEW PORTFOLIO</button>
<button type="button" class="btn btn-primary btn-lg">ENQUIRE NOW</button>
</div>
</div>
<div class="carousel-item">
<img src="IMG/background2.png">
</div>
<div class="carousel-item">
<img src="IMG/background3.png">
</div>
</div>
CSS:
.carousel-inner img {
width: 100%;
height: 100%;
}
.carousel-caption {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.carousel-caption h1 {
font-size: 500%;
text-transform: uppercase;
text-shadow: 1px 1px 10px #000;
}
.carousel-caption h3 {
font-size: 200%;
font-weight: 500;
text-shadow: 1px 1px 10px #000;
padding-bottom: 1rem;
}
I expect that the caption resize accordingly and appear in the centre of the carousel image, however what actually happens is when the browser is resized the caption stays the same size and is far too large and not centered.
So far, you haven't provided a link to the live site, which makes things a bit more difficult. However, I did notice a few things for testing your code.
Consider adding a rule for to make carousel items flex containers:
.carousel-item {
display: flex;
flex-direction: column;
justify-content: center;
}
Remove translation for carousel-captions. Because the sibling image is absolutely positioned (not shown), you'll have to leave absolute positioning here as well. Maybe a background-image would make life easier, though.
.carousel-caption {
position: absolute;
/* top: 50%; */
/* transform: translateY(-50%); */
}
With these rules in place, you'll at least achieve vertical centering of the .carousel-caption. Then you could add the appropriate #media queries to deal with the font overflowing the box (because the container is absolutely positioned).
jsFiddle
I have seen a lot of similar questions, but the solutions did not apply.
I am trying to make a Bootstrap carousel such that when the window is resized, the image remains centered while also maintaining the required image height and minimum 100% width properties.
This is a little difficult to explain, but you can see a similar concept on http://www.lyft.com
I have replicated a similar issue on codepen which you can see, that if you shrink the window down to the size of a mobile device the image remains fixed and ultimately you're looking at the top left corner of the image (usually clouds or some unrecognizable blur).
I'm trying to have this image move left and remain centered as the horizontal view shrinks so that the image remains relevant.
My additional carousel styles:
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
height: 500px;
margin-bottom: 60px;
overflow: hidden;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel .item {
height: 500px;
background-color: #777;
}
.carousel-inner > .item > img {
position: relative;
top: 0;
left: 0;
min-width: 100%;
max-width: none;
height: auto;
}
.carousel-inner img{
margin: auto;
}
#mycarousel{
position: relative;
top: 0;
}
And the simple carousel:
<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="https://unsplash.it/2000/1250?image=397" data-color="lightblue" alt="First Image">
</div>
<div class="item">
<img src="https://unsplash.it/2000/1250?image=689" data-color="firebrick" alt="Second Image">
</div>
<div class="item">
<img src="https://unsplash.it/2000/1250?image=675" data-color="violet" alt="Third Image">
</div>
<div class="item">
<img src="https://unsplash.it/2000/1250?image=658" data-color="lightgreen" alt="Fourth Image">
</div>
<div class="item">
<img src="https://unsplash.it/2000/1250?image=638" data-color="tomato" alt="Fifth Image">
</div>
</div>
</div>
I made a solution based on the lyft site you linked in your post. I turned your img into div and used a background image then styled appropriately.
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="item-child" style="background-image: url('https://unsplash.it/2000/1250?image=397');" data-color="lightblue" alt="First Image"></div>
</div>
<div class="item">
<div class="item-child" style="background-image: url('https://unsplash.it/2000/1250?image=689');" data-color="firebrick" alt="Second Image"></div>
</div>
<div class="item">
<div class="item-child" style="background-image: url('https://unsplash.it/2000/1250?image=675');" data-color="violet" alt="Third Image"></div>
</div>
<div class="item">
<div class="item-child" style="background-image: url('https://unsplash.it/2000/1250?image=658');" data-color="lightgreen" alt="Fourth Image"></div>
</div>
<div class="item">
<div class="item-child" style="background-image: url('https://unsplash.it/2000/1250?image=638');" data-color="tomato" alt="Fifth Image"></div>
</div>
Then removed this .carousel-inner > .item > img and added this CSS:
.carousel-inner .item .item-child {
background-position: top center;
background-size: cover;
position: absolute;
bottom:0;
top: 0;
left: 0;
right:0;
width: 100%;
height: auto;
}
You can see the js.fiddle here if you want to play around with it. Hope that helps.
There you go, Easiest fix
instead of min-width use width on images
.carousel-inner > .item > img {
position: relative;
top: 0;
left: 0;
width: 100%;
max-width: none;
height: auto;
}
also throw in a height adjustment for carousel like this
.carousel .item {
height: auto;
background-color: #777;
}
http://codepen.io/Rohithzr/pen/WwEpgp?editors=1100
I want my bootstrap carousel to take up the whole page of the user entering my site. However, with aspect ratios and resolution differences between monitors, I was wondering what is the best way to go about this?
I think I should first choose images of relatively the same size to start off. This is what I have so far.
css:
img {
background-size: cover;
background-position: center center;
background-repeat:no-repeat;
width: 100%;
height: 100%;
object-fit: cover;
}
What if the images I am using have a super high resolution. Will this not fit on the user's page?
I believe this will work , but I can't be sure .
but you can see it here :
http://jsfiddle.net/heyallanmoreno/7tdvu/4/
<section class="block">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="active item">
<img src="http://lorempixel.com/1024/750" alt="Slide1" />
</div>
<div class="item">
<img src="http://lorempixel.com/1024/750" alt="Slide2" />
</div>
<div class="item">
<img src="http://lorempixel.com/1024/750" alt="Slide3" />
</div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</section>
and ,
.carousel .item {
width: 100%; /*slider width*/
max-height: 600px; /*slider height*/
}
.carousel .item img {
width: 100%; /*img width*/
}
/*add some makeup*/
.carousel .carousel-control {
background: none;
border: none;
top: 50%;
}
/*full width container*/
#media (max-width: 767px) {
.block {
margin-left: -20px;
margin-right: -20px;
}
}
Hope this will help you.
I have the following desires for a twitter bootstrap carousel:
When screen is bigger then carousel, I want the image centered.
When the screen is smaller than the carousel, I want to see just PART of the image. This part of the image should be centered.
At no point should the images be resized or scaled
The transitions should work.
My example below fixed problems 1-3.. but it breaks 4. I can easily fix 4 if I am willing to break 3, but that is no good.
Bootply link to example: http://bootply.com/88542
HTML:
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide">
<!-- 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>
<div class="carousel-inner">
<div class="item active">
<img src="http://lorempixel.com/1200/600/abstract/1" height="600px" width="1200px">
<div class="container">
<div class="carousel-caption">
<h1>Bootstrap 3 Carousel Layout</h1>
<pthis is="" an="" example="" layout="" with="" carousel="" that="" uses="" the="" bootstrap="" 3="" styles.<="" small=""><p></p>
<p><a class="btn btn-lg btn-primary" href="http://getbootstrap.com">Learn More</a>
</p></pthis></div>
</div>
</div>
<div class="item">
<img src="http://lorempixel.com/1200/600/abstract/2" height="600px" width="1200px">
<div class="container">
<div class="carousel-caption">
<h1>Changes to the Grid</h1>
<p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
<p><a class="btn btn-large btn-primary" href="#">Learn more</a></p>
</div>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200X600" height="600px" width="1200px">
<div class="container">
<div class="carousel-caption">
<h1>Percentage-based sizing</h1>
<p>With "mobile-first" there is now only one percentage-based grid.</p>
<p><a class="btn btn-large btn-primary" href="#">Browse gallery</a></p>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
<!-- /.carousel -->
CSS
/* BOOTSTRAP 3.x GLOBAL STYLES
-------------------------------------------------- */
body {
padding-bottom: 40px;
color: #5a5a5a;
}
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel .item {
height: 600px;
width: 1200px;
background-color:#bbb;
left: 50%;
margin-left: -600px;
}
.carousel img {
position: absolute;
top: 0;
}
/* RESPONSIVE CSS
-------------------------------------------------- */
#media (min-width: 768px) {
/* Remve the edge padding needed for mobile */
.marketing {
padding-left: 0;
padding-right: 0;
}
/* Navbar positioning foo */
.navbar-wrapper {
margin-top: 20px;
margin-bottom: -90px; /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
}
/* The navbar becomes detached from the top, so we round the corners */
.navbar-wrapper .navbar {
border-radius: 4px;
}
/* Bump up size of carousel content */
.carousel-caption p {
margin-bottom: 20px;
font-size: 21px;
line-height: 1.4;
}
}
This might help if you want the image to be re-sized according to the screen size of the device. The width = "100%" will do the job.
<img src="http://lorempixel.com/1200/600/abstract/2" width = "100%">
just add this to your css:
.carousel-inner > .item > img, .carousel-inner > .item > a > img {
width: 100%;
}
add this
.carousel .item img {
left: -9999px; /*important */
right: -9999px; /*important */
margin: 0 auto; /*important */
max-width: none; /*important */
min-width: 100%;
position: absolute;
}
And of course one of the parent divs needs to have a position:relative, but I believe it does by default.
See it here: http://paginacrestinului.ro/