I'm using the following code to create carousel,
<section id="slider">
<div id="landing-page-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active carsi">
<img class="landing-pg-image" src="image/1.png" alt="profile">
</div>
<div class="carousel-item carsi">
<img class="landing-pg-image" src="image/2.png" alt="profile">
</div>
<div class="carousel-item carsi">
<img class="landing-pg-image" src="image/3.png" alt="profile">
</div>
<a class="carousel-control-prev" href="#landing-page-carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#landing-page-carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
</section>
I would like to have the carousel to occupy only 70% of the screen hence I use the following rule,
.carsi{
width: 100%;
height: 70%;
}
Unfortunately, this has no effect on the carousel item. what am I missing?
you can try it.when you use it in this way, you can change the image height proportionally with the carousel item.
.carousel .item {
width:100%;
height: 70%;
}
.item img {
position: absolute;
top: 0;
left: 0;
min-height: 70%;
object-fit: cover;
}
Related
I am trying to implement a carousel with Bootstrap, where the images are centered and auto-resized. For example, in the JSFiddle, as you can see the first image (the vertical one) stretches the whole div, while the third image remains at the top. I would like to reproduce the behavior of the Facebook or Twitter carousel, where the images are positioned in the center and resized according to the Div where they are included. Can you help me?
<div id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active">One</li>
<li data-target="#myCarousel" data-slide-to="1">Two</li>
<li data-target="#myCarousel" data-slide-to="2">Three</li>
</ul>
<!-- Inner -->
<div class="carousel-inner">
<div class="item active">
<img src="https://scontent.ffco3-1.fna.fbcdn.net/v/t1.6435-9/171147625_1208393786271117_8898528403586821491_n.jpg?_nc_cat=111&ccb=1-3&_nc_sid=730e14&_nc_ohc=dDKFCCAYB-oAX_m2xtu&_nc_ht=scontent.ffco3-1.fna&oh=aa418a1e5facad55e6e4781237602778&oe=609A1892"
class="img-responsive" />
<div class="container">
<div class="carousel-caption">
<h1>Photo 1 - Vertical</h1>
<p>Hello!</p>
</div>
</div>
</div>
<div class="item">
<img src="https://scontent.ffco3-1.fna.fbcdn.net/v/t1.6435-9/173646266_1210629629380866_4626783539462302067_n.jpg?_nc_cat=111&ccb=1-3&_nc_sid=730e14&_nc_ohc=QelU_ZVtqAcAX9wHI-l&_nc_ht=scontent.ffco3-1.fna&oh=272c997f1febf514a031aefe9cb712cb&oe=609BBCA2"
class="img-responsive" />
<div class="container">
<div class="carousel-caption">
<h1>Photo 2 - Square</h1>
<p>Hello again!</p>
</div>
</div>
</div>
<div class="item">
<img src="https://scontent.ffco3-1.fna.fbcdn.net/v/t1.6435-9/167432599_1203101340133695_8518788973824059736_n.png?_nc_cat=107&ccb=1-3&_nc_sid=730e14&_nc_ohc=CItpIApuYmgAX_zHj8t&_nc_ht=scontent.ffco3-1.fna&oh=83145492bb38c8c2148df70086382459&oe=609A928F"
class="img-responsive" />
<div class="container">
<div class="carousel-caption">
<h1>Photo 3 - Horizontal</h1>
<p>Hello again and again!</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>
CSS
.carousel-indicators > li, .carousel-indicators > li.active {
width: 100px;
height: 25px;
border-radius: 0;
border: solid 1px grey;
background: lightgrey;
text-indent: 0;
}
.carousel-indicators > li.active {
background: white;
}
#myCarousel {
width: 500px;
height: 500px;
}
Add this
$('#myCarousel').owlCarousel({
autoHeight:true
});
Remove Height on CSS
#myCarousel {
width: 400px;
/*height: 400px;*/ /*remove This*/
}
Updated Code
#myCarousel .img-responsive{
margin:0 auto;
max-height:400px;
}
https://jsfiddle.net/lalji1051/qnrzuhm2/
Updeted :- https://jsfiddle.net/lalji1051/xmy46z3L/1/
I want to include three carousels on my website, which should be full height and should have a parallax effect. I have a code snippet I found some time ago, and it just doesn't work. The parallax effect is not working, and the pictures don't display in full height.
Here is my html code:
<div id="carousel" class="carousel slide carousel-fade" data-ride="carousel" data-interval="6000">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<a href="learnmore.html">
<div class="jumbotron paral paralsec">
<h1 class="display-3">Customer orientation</h1>
<p class="lead">Every product is individually customized to your needs</p>
</div>
</a>
</div>
<!-- /.carousel-item -->
<div class="carousel-item">
<a href="lenses.html">
<!-- Second Parallax Section -->
<div class="jumbotron paral paralsec1">
<h1 class="display-3">Customer orientation</h1>
<p class="lead">Your project is at the center of our process chains</p>
</div>
</a>
</div>
<!-- /.carousel-item -->
<div class="carousel-item">
<a href="lmkposition.html">
<!-- Third Parallax Section -->
<div class="jumbotron paral paralsec2">
<h1 class="display-3">Customer orientation</h1>
<p class="lead">All our services are supported by our support team which is always there for you</p>
</div>
</a>
</div>
<!-- /.carousel-item -->
</div>
<!-- /.carousel-inner -->
<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>
And here is my CSS code:
.carousel, .slide,
.carousel .carousel-inner,
.carousel .carousel-item,
.carousel .carousel-item img,
.carousel .carousel-control {
border-radius: 0px;
overflow: hidden;
}
/ Header Parallax Element Style/
.paral {
min-height: 900px;
background-attachment: fixed;
background-size: cover;
background-position: 50% 50%;
}
/ Paragraph for Parallax Section /
.paral p {
font-size: 24px;
color:#f5f5f5;
text-align: center;
line-height: 60px;
}
/ Heading for Parallax Section /
.paral h1 {
color: rgba(255, 255, 255, 0.8);
font-size: 60px;
text-align: center;
padding-top: 60px;
line-height: 100px;
}
/ Image for Parallax Section /
.paralsec {
background-image: url(img/customer.jpg);
background-size: 100% !important;
}
.paralsec1 {
background-image: url(img/customer.jpg);
height: 100%;}
.paralsec2 {
background-image: url(img/customer.jpg);
height: 100%;}
.paralsec3 {
background-image: url(img/process.jpg);
}
.paralsec4 {
background-image: url(img/process.jpg);}
.paralsec5 {
background-image: url(img/process.jpg);}
.paralsec6 {
background-image: url(img/quality.jpg);}
.paralsec7 {
background-image: url(img/quality.jpg);}
.paralsec8 {
background-image: url(img/quality.jpg);}
/ Add more images for more sections /
/ Remove Bottom Margin from Jumbotron /
.jumbotron{margin-bottom: 0;}
.values {
text-align: center;
display: block;
margin-left: auto;
margin-right: auto;
}
As you can see, I tried to change some values of the image size, but to no avail. Also, only the first image of my carousel is showing, and the carousel has border even though I tried to erase them.
The CSS is for all three carousels, but I only included the html code of one since they are the same, and the first is the one making the most problems.
I changed the bootstrap carousel default settings from the default chevron-left to menu-left and right. and I added image links. i changed the default height to 270px and change it to container.
My issue is that the arrows float to the top as well as the image links, also when they scroll through the links the links scroll past the arrows when changing.
#carousel-wrap {
background-color: #0b0b0b;
height: 270px;
}
.carousel-control.left, .carousel-control.right{
background: none !important;
filter: progid:none !important;
}
<section id="carousel-wrap">
<div id="carousel1" class="carousel slide container" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="resources/media/referrals/hub-logo.png" alt="First slide image" class="center-block">
</div>
<div class="item">
<img src="resources/media/referrals/hub-logo.png" alt="Second slide image" class="center-block">
</div>
<div class="item">
<img src="resources/media/referrals/hub-logo.png" alt="Third slide image" class="center-block">
</div>
<div class="item">
<img src="resources/media/referrals/hub-logo.png" alt="Third slide image" class="center-block">
</div>
</div>
<a class="left carousel-control" href="#carousel1" role="button" data-slide="prev"><span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span></a>
<a class="right carousel-control" href="#carousel1" role="button" data-slide="next"><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span></a>
</div>
</section>
To center arrows vertically you can use line-height property (height of your carousel):
.carousel-control.left,
.carousel-control.right {
background: none !important;
line-height: 270px;
}
For image you can use this technique:
.item {
height: 270px;
}
.item img {
max-height: 100%;
max-width: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
I'm not very good with CSS :(
So I have a bootstrap carousel, which obviously has images in it. I've added a div below the image, that contains a link, which opens up a modal with more info. The images resize according the size of the window, currently, my modal link is a fixed position from the bottom, so if the window is small enough, the modal link is way to high up. I need to make it a variable/percentage amount from the bottom or top of the image. Code is below.
<div id="our-story-carousel" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="/img/bg/history-2007.jpg">
<div class="more-link">
<div class="more-modal-link">
<a class="" href="#" data-toggle="modal" data-target="#our-story-modal-1">More</a>
</div>
</div>
</div>
<div class="item">
<img src="/img/bg/history-2008.jpg">
<div class="more-link">
<div class="more-modal-link">
<a class="" href="#" data-toggle="modal" data-target="#our-story-modal-1">More</a>
</div>
</div>
</div>
<div class="item">
<img src="/img/bg/history-2009.jpg">
<div class="more-link">
<div class="more-modal-link">
<a class="" href="#" data-toggle="modal" data-target="#our-story-modal-1">More</a>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#our-story-carousel" 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="#our-story-carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
.our-story-item-image img {
margin: 0 auto;
}
.more-link {
margin: 0 auto;
text-align: center;
z-index: 10;
position: relative;
top: -255px;
background: #a29061;
height: 72px;
width: 72px;
-moz-border-radius: 41px;
border-radius: 41px;
}
.more-modal-link {
padding-top: 27px;
text-transform: uppercase;
}
.more-modal-link a {
border-top: 1px solid #331a00;
border-bottom: 1px solid #331a00;
text-decoration: none;
color: #331a00;
font-weight: bold;
}
Any help greatly appreciated.
so if it's caused of window size, try to use #media screen and (min-width: px) then set the element
I have a carousel that's the full width of the page. Now I need to make the carousel-caption the full width of the page as well with a yellow background. The background should be the full width of the page, but the actual caption text should be centered.
This is what it should look like:
This is what it looks like now:
HTML:
<!--START CAROUSEL-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="../../images/LD/desktop_hero1.png" alt="...">
<div class="carousel-caption">
Text for caption 1 here.
</div>
</div>
<div class="item">
<img src="../../images/LD/desktop_hero2.png" alt="...">
<div class="carousel-caption">
Text for caption 2 here.
</div>
</div>
<div class="item">
<img src="../../images/LD/desktop_hero3.png" alt="...">
<div class="carousel-caption">
Text for caption 3 here.
</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>
<!--END CAROUSEL-->
CSS:
<style type="text/css">
.carousel-caption {
max-width: 100%;
width:100%;
background-color: #ffb81c;
}
</style>
carousel-caption class declares the div to have an absolute positioning with its position to be 15 % from left.
So you can try to override that. Here is the css:
.carousel-caption {
max-width: 100%;
width:100%;
background-color: #ffb81c;
left: 0;
}
you only need to add text-align: center becaus actually it uses the full width already
if something is floating u can use a clearfix to solve it, check this jsfidlle
title example
<div class="carousel-caption">
<h1>
Text for caption 1 here.
</h1>
</div>
.carousel-caption h1 {
max-width: 100%;
background-color: #ffb81c;
text-align:center;
}
pd. i added the h1 tag to have a better semantic structure.