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
Related
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;
}
Is anyone could help me with 2 stuffs or one of then on boostrap 4
I wanna do 2 stuffs just like on this IMG:
https://i.imgur.com/Vh1CDe3.png
1- Dark background below Title/Subtitle carousel's
2- I made the pagination more higher, and circular...
But how to show this right inside of circle?
How it's working now:
i.imgur.com/NT48cqX.png
full code:
<style type="text/css">
/* dark background */
#news img {
width: 1300px;
height: 400px;
}
div.carousel-caption {
background:rgba(0,0,0,0.6);
text-shadow:none;
}
div.carousel-caption:hover {
background:rgba(0,0,0,0.9);
}
/* Carousel Title */
h3, .h3 {
font-size:20px;
color: #063;
font-family:'Buenard', serif;
font-weight:bold;
text-transform:inherit;
margin: 0px auto 0px;
text-shadow: 2px 2px 2px #000;
-webkit-text-shadow: 2px 2px 2px #000;
-moz-text-shadow: 2px 2px 2px #000;
text-align: center;
}
/* Pagination */
.carousel-indicators .active {
background: #666;
}
.carousel-indicators :hover {
background-color: #cccccc;
}
.slider-pagi__elem {
padding: 10px 10px;
color: #083F2C;
text-decoration: none;
outline: none;
-webkit-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
font-family: Arial;
font-size: 16.9px;
position: relative;
bottom: 350px;
left: 480px;
display: inline-block;
vertical-align: top;
width: 2rem;
height: 2rem;
margin: 0 0.5rem;
border-radius: 50%;
border: 2px solid #fff;
cursor: pointer;
}
</style>
<main role="main" class="container_body">
<div class="container" id="news">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<!-- indicators dot nov -->
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="slider-pagi__elem slider-pagi__elem-2"class="active">1</li>
<li data-target="#carouselExampleIndicators" class="slider-pagi__elem slider-pagi__elem-2" data-slide-to="1">2</li>
<li data-target="#carouselExampleIndicators" class="slider-pagi__elem slider-pagi__elem-2" data-slide-to="2">3</li>
<li data-target="#carouselExampleIndicators" class="slider-pagi__elem slider-pagi__elem-2" data-slide-to="3">4</li>
</ol>
<!-- wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="http://placehold.it/900x400" alt="">
<div class="carousel-caption">
<h3>Aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h3>
<p>Bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb. <a class="label label-primary" href="#" target="_blank">Read more:</a></p></p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://placehold.it/900x400" alt="">
<div class="carousel-caption">
<h3>Ccccccccccccccccccccccccccccccccccccccccccccccccccccccccc</h3>
<p>Ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd.: <a class="label label-primary" href="#" target="_blank">Read more:</a></p></p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://placehold.it/900x400" alt="">
<div class="carousel-caption">
<h3>Ccccccccccccccccccccccccccccccccccccccccccccccccccccccccc</h3>
<p>Ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd.: <a class="label label-primary" href="#" target="_blank">Read more:</a></p></p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://placehold.it/900x400" alt="">
<div class="carousel-caption">
<h3>Ccccccccccccccccccccccccccccccccccccccccccccccccccccccccc</h3>
<p>Ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd.: <a class="label label-primary" href="#" target="_blank">Read more:</a></p></p>
</div>
</div>
</div>
<!-- controls or next and prev buttons -->
<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>
</div>
</div>
</div>
</main>
The dark background at the bottom should be a div, not image. You can probably do it on the div that has a class of carousel-caption.
EDIT: The get the carousel-caption full width, change .carousel-caption from right: 15% to right: 0% and left: 15% to left: 0%
This will make the text go all the way. Don't forget to include some padding if you need a bit of space from the edge.
I need my carousel-caption to have a background with opacity of 50%. I have tried the code below, but it does not work in IE11 or older. I have looked at the older posts on here about it, and none of those solutions work in IE.
I tried this:
.carousel-caption {
background: rgba(255, 184, 28, 0.5);}
and even this for gradient:
.carousel-caption {
background: linear-gradient(to bottom, rgba(255, 184, 28, 1), rgba(255, 184, 28, 0.5));}
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="..." class="img-responsive">
<div class="carousel-caption">
Text for caption 1 here.
</div>
</div>
<div class="item">
<img src="../../images/LD/desktop_hero2.png" alt="..." class="img-responsive">
<div class="carousel-caption">
Text for caption 2 here.
</div>
</div>
<div class="item">
<img src="../../images/LD/desktop_hero3.png" alt="..." class="img-responsive">
<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: rgba(255, 184, 28, 0.5);};
left: 0;
bottom: 0;
color:#000000;
}
</style>
ANSWER:
I needed to add this to the CSS:
filter: alpha(opacity=50);
All I needed to do was add the following style update:
filter: alpha(opacity=50);
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.
I had one problem with centering the image in a carousel (fortunately I found the answer here) and now I got into another problem, aligning the text. More precise, I want the image (it a fixed size image 400x400) to be on the left side with text on the right side. Any suggestions ?
HTML:
<!-- Start Carousel -->
<div id="product-detail carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="container">
<div class="carousel-img"></div>
<div class="carousel-text">
<p class="cat-title pull-right">Mercury</p>
<p class="cat-icon pull-right">^^^^^</p>
<p class="caption-text pull-right">Movie buff Tony Chou (Tony Zhou) published in his Vimeo video review with an analysis of the demonstration set of SMS and other text messages in modern cinema.</p>
</div>
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left control-icon" 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 control-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- End Carousel -->
CSS :
/*************************
CAROUSEL
*************************/
.carousel .carousel-inner {
height: 550px;
background: #faf9f9;
}
.carousel-control.right,
.carousel-control.left {
background-image: none;
}
.control-icon {
color: #393939;
text-shadow: none;
}
.item {
position: relative;
height: 100%;
}
.carousel-img {
width: 400px;
height: 400px;
background-image: url('../img/jewelery.jpg');
background-size: cover;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.carousel-text .cat-icon {
text-shadow: none;
margin-left: 0;
}
.carousel-text .caption-text {
color: #b7b7b7;
font-size: 18px;
font-weight: 300;
line-height: 30px;
text-align: left;
}
This should work. I set the carousel text to display inline block and gave it a left of 400px you can study the rest (there's not much else) here;s a fiddle
// invoke the carousel
$('#myCarousel').carousel({
interval: 3000
});
/* SLIDE ON CLICK */
$('.carousel-linked-nav > li > a').click(function () {
// grab href, remove pound sign, convert to number
var item = Number($(this).attr('href').substring(1));
// slide to number -1 (account for zero indexing)
$('#myCarousel').carousel(item - 1);
// remove current active class
$('.carousel-linked-nav .active').removeClass('active');
// add active class to just clicked on item
$(this).parent().addClass('active');
// don't follow the link
return false;
});
/* AUTOPLAY NAV HIGHLIGHT */
// bind 'slide' function
$('#myCarousel').bind('slide', function () {
// remove active class
$('.carousel-linked-nav .active').removeClass('active');
// get index of currently active item
var idx = $('#myCarousel .item.active').index();
// select currently active item and add active class
$('.carousel-linked-nav li:eq(' + idx + ')').addClass('active');
});
.carousel-slide {
width:100%;
height:550px;
background: #faf9f9;
}
.carousel .carousel-inner {
height: 550px;
width:900px;
margin-left:auto;
margin-right:auto;
background: #faf9f9;
}
.carousel-control.right, .carousel-control.left {
background-image: none;
}
.control-icon {
color: #393939;
text-shadow: none;
}
.item {
position: relative;
height: 100%;
}
.carousel-text {
left:400px!important;
display:inline-block;
}
.carousel-img {
width: 400px;
height: 400px;
/* background-image: url('http://rachelgallen.com/images/purpleflowers.jpg');*/
background-size: cover;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.carousel-text p.cat-icon {
text-shadow: none;
left: 407px;
position:relative;
top:30px;
}
.carousel-text p.cat-title {
text-shadow: none;
left:380px;
width:250px;
position:relative;
font-size: 20px;
font-weight: 500;
line-height: 30px;
}
.carousel-text p.caption-text {
top:31px;
left:420px;
width:290px;
position:relative;
color: #b7b7b7;
font-size: 18px;
font-weight: 300;
line-height: 30px;
}
.glyphicon.glyphicon-chevron-right.control-icon {
margin-right:-30px;
width:15px;
position:absolute;
color: #393939;
text-shadow: none;
}
.glyphicon.glyphicon-chevron-left.control-icon {
margin-left:-45px;
width:15px;
position:absolute;
color: #393939;
text-shadow: none;
}
.carousel-linked-nav {
width: 120px;
margin-left:40%!important;
margin-right:40%;
margin-bottom: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="container">
<div class="carousel-img">
<img src="http://rachelgallen.com/images/purpleflowers.jpg" width="400" height="400"></img>
</div>
<div class="carousel-text">
<p class="cat-title pull-right">Mercury</p>
<p class="cat-icon pull-right">^^^^^</p>
<p class="caption-text">Movie buff Tony Chou (Tony Zhou) published in his Vimeo video review with an analysis of the demonstration set of SMS and other text messages in modern cinema.</p>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="carousel-img">
<img src="http://rachelgallen.com/images/daisies.jpg" width="400" height="400"></img>
</div>
<div class="carousel-text">
<p class="cat-title pull-right">Venus</p>
<p class="cat-icon pull-right">^^^^^</p>
<p class="caption-text">Aren't these flowers lovely? Especially in this lovely slider. Lol.</p>
</div>
</div>
</div>
</div>
<!-- Controls --> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left control-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right control-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<ol class="carousel-linked-nav pagination">
<li class="active">•
</li>
<li>•
</li>
<li>•
</li>
</ol>
</div>
I have some modified your html code, I think this code use for you
<!-- Start Carousel -->
<div id="product-detail carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="col-md-6">
<img src="..." alt="...">
</div>
<div class="col-md-6">
<div class="carousel-text">
<p class="cat-title pull-right">Mercury</p>
<p class="cat-icon pull-right">^^^^^</p>
<p class="caption-text pull-right">Movie buff Tony Chou (Tony Zhou) published in his Vimeo video review with an analysis of the demonstration set of SMS and other text messages in modern cinema.</p>
<p class="cat-title pull-right">Mercury</p>
<p class="cat-icon pull-right">^^^^^</p>
<p class="caption-text pull-right">Movie buff Tony Chou (Tony Zhou) published in his Vimeo video review with an analysis of the demonstration set of SMS and other text messages in modern cinema.</p>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="item">
<div class="col-md-6">
<img src="..." alt="...">
</div>
<div class="col-md-6">
<div class="carousel-text">
<p class="cat-title pull-right">Mercury</p>
<p class="cat-icon pull-right">^^^^^</p>
<p class="caption-text pull-right">Movie buff Tony Chou (Tony Zhou) published in his Vimeo video review with an analysis of the demonstration set of SMS and other text messages in modern cinema.</p>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left control-icon" 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 control-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>