I have used bootstrap 3 carousel and the images inside it were not getting resized accordingly.
After making this chage:
.carousel-inner > .item > img {
min-width: 100%;
width: 100%;
}
As shown in:
Make bootstrap carousel responsive on height
It worked perfectly.
Would it be a bug or after making this change I will suffer some side effect?
This is not a "BUG".
Bootstrap carousel doesn't handle correctly pictures that have not the same size.
Here is a good tutorial that give a solution to the problem.
Related
I have a customized carrousel. What i want to achieve is shown below as image. I want to pull up images a bit top on the carousel.
I set up .carousel-inner css to overflow: visible;and img css to margin-top: -33px in order to achieve what i want but that way when carousel sliding content is mixing up (because of the overflow-x:visible and if i set overflow-x: hidden; my pull up on top is became not visible).
GOAL
ISSUE
So whats the correct way of pull up image in carousel items out of whole carousel element?
Update:
Added codepen link to issue:
https://codepen.io/meowornever/pen/gOwGxGy
using themeforest 'TheGem' theme and Visual composer elements.
The image carousel is not responsive, on small screen its overlap each other, but on big screen its shows 3.
I trying to fix it trough CSS, but not working,
any solution?
.vc_carousel-slideline {
max-width: 100%;
}
.vc_images_carousel {
max-width: 100%;
}
TIA
Try the following:
.vc_images_carousel{max-width: 100%;}
No need for:
.vc_carousel-slideline{max-width: 100%;}
This is my friends website that I am helping her with redlady.al, I am using http://thevoux.fuelthemes.net/ theme,
My problem is the top post carousel, images display in different sizes and they should display like in the theme demo.
I have contacted the theme developer and it seems he doesnt have an answer for it. Can anyone help?
Solution 1 (CSS)
Set .slick.slick-initialized .post to fixed height, I'm using 280px here:
Downsides: if there's more text 300px might not be enough.
Solution 2 (Photshop/Gimp)
Simply crop the images in Photoshop before uploading them so their height is always the same.
Downside: you have to do that for every image.
Solution 3 (CSS)
Set .slick-slide img height to so it equals the height of the tallest image in your slider.
Downside: as these are images and you can't use background-size proportions might get weird in some cases. You need to use images with the same proportions to avoid that.
I'd personally go with 1 or 2.
.slick.slick-initialized .post{
visibility: visible;
height: 369px;
}
.slick-slide img {
display: inline-block;
width: auto;
height: 100%;
min-width: 100%;
max-width: none;
}
Setting height to exactly the size of Voux page + some quick image tweaks fixed the issue for me. Keep in mind this will stretch images that are not wide enough.
This will get you starting, I came up with this in like 30sec, if you want perfect solution you should hire some one.
I'm learning bootstrap and using a carousel below two navbars.
Here is the fiddle:
https://jsfiddle.net/xneym8zq/
The problem is that there is a gap between the top of the carousel and the carousel-inner. I can see that the carousel is touching the navbar due to the carousel-control shadow but what I don't get is why is there a gap between the top and the image.
I've tried
.carousel-inner .item img {
position: relative;
top: -20px;
}
It works but what I want to know is why is there a gap? and which element is causing it? Is there some default css in bootstrap.css that I'm missing?
Thanks in advance.
I've tried many answers I've found on here regarding this topic.
I'm using bootstrap v3 carousel. I'm using the default html and css. ( the html is taken from the carousel example template provided by twitter bootstrap )
I have a full width carousel on my home page. It works great. It resizes as any browser width as it should. What I would like;
- is for the carousel to do is to stay at the height I specify.
- For the image to stay centred.
- For the width of the carousel to be responsive but for the images/slides to crop left and right.
A lot of the solutions I've found have suggested displaying the images in as css backgrounds.
But I know what i require is possible with out using this option.
I've spent a lot of time experimenting with this trying to get it work. More than a few days! Any help would be greatly appreciated. From searching on various sites it seems other people would appreciate some help on this subject.
Please let me know if you would like me to post more details.
Here's the code I got working :)
So after many more trials I got exactly what I described above. I hope people find this question and find it helpful. If you can't get it to work, maybe I can help?
Here is the code I used. (This is the css from twitter boostrap v3)
.carousel {
position: relative;
height: 685px;
}
.carousel .item {
height: 685px;
}
.carousel-inner > .item > img {
position:absolute;
right:0;
left:50%;
margin-left:-800px; /* Half the width of the image */
height:685px;
max-width:none;
}
.carousel-inner {
position: relative;
overflow: hidden;
}