Image caption not showing on slider - html

I'm trying to make a slider (imported from bootstrap) with captions on the bottom of the images using HTML and CSS, it does work on two images but not the third one.
Here's the code for the slider and the style.css portion that is used for the slider and caption.
HTML:
<!-------Slider------>
<div id="slider">
<div id="headerSlider" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#headerSlider" data-slide-to="0" class="active"></li>
<li data-target="#headerSlider" data-slide-to="1"></li>
<li data-target="#headerSlider" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/slider1.jpg" class="d-block w-100" alt="Portfolio">
<div class="carosuel-caption">
<h5>A random caption</h5>
</div>
</div>
<div class="carousel-item">
<img src="img/slider2.jpg" class="d-block w-100" alt="Portfolio">
<div class="carosuel-caption">
<h5>A random caption 1</h5>
</div>
</div>
<div class="carousel-item">
<img src="img/slider3.jpg" class="d-block img-fluid" alt="Portfolio">
<div class="carosuel-caption">
<h5>A random caption 2</h5>
</div>
</div>
<a class="carousel-control-prev" href="#headerSlider" 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="#headerSlider" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
CSS:
#slider
{
margin: 0 auto;
width: 800px;
}
.carosuel-caption
{
top: 100%;
transform: translateY(-50%);
bottom: initial!important;
}
.carosuel-caption h5
{
color: #fff;
font-size: 42px;
}
.carousel-item
{
width: 80%;
height: 50%;
background-color: black;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 5%;
margin-top: 5%;
}
Picture of the slider:
Working slider image with caption
The slide in which it has no caption
I apologize if I missed something in the post.

Related

Custom carousel size in Bootstrap but responsive

Is this carousel style possible for Bootstrap?
I've been trying this for days, I need help :(
First picture is the wireframe, ...
and the second picture is the actual look in the browser I'm working on...
...but it seems like it's not responsive when moved into larger screens
Here's the HTML-code:
<section id="wow_h>
<div class="container-fluid">
<div class="row">
<div id="carouselExampleIndicators" class="carousel slide carousel-style " data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="/assets/Untitled-1.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/assets/Untitled-2.jpg" alt="Third slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/assets/Untitled-3.jpg" alt="Third slide">
</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>
<div id ="hero-title" class="">
<h1>Headline
</br>
goes here</h1>
<p>Hero subtitle goes here
</br>
lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
</section>
And here's the CSS-code:
// HOME
.carousel{
z-index: 1000;
margin: -5% 0 0 0;
}
#carouselExampleIndicators{
img{
background: cover;
}
}
.carousel-indicators > li {
border-radius: 50%;
}
.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
display: block;
}
#wow_home{
position: relative;
#hero-title{
border-radius: 25px;
background: #f2efef;
color: #000;
z-index: 1080;
padding: 5%;
margin: 0 0 0 60%;
position: absolute;
h1{
text-transform: none;
}
}
}

Unable to position carousel next to aside

I am currently trying to create side bar next to my carousel, However for some reason, I can't get the carousel to center on the page while the aside is next to it. I tried using margin:auto auto but had no luck. I also tried using Justify-content:center. Anyone know why it won't move?
html:
<section id="carouselSlides" class="carousel slide container" data-ride="carousel" style="background:#979BAF; ">
<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="#carouselSlides" data-slide-to="0" class="active"></li>
<li data-target="#carouselSlides" data-slide-to="1"></li>
</ol>
<!--The slideshow-->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="slideshow/sunglasses.jpg" alt="sunglasses">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="slideshow/lady.jpeg" alt="women">
</div>
<!--<div class="carousel-item">
<img src="" alt>
</div>-->
<!--Left and right controls-->
<a class="carousel-control-prev" href="#carouselSlides" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#carouselSlides" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</section>
<aside class="rightSideSection container clearfix">
<header style="background: #2A2A36;"><h1 class="bold">Whats popular</h1></header><br>
<ul class="popularList">
<li>example1</li>
<li>example2</li>
<li>example3</li>
</ul>
</aside>
CSS:
#carouselSlides{
display: inline-block;
width: 700px;
justify-content: center;
}
.carousel-inner img{
}
/*right side bar*/
.rightSideSection{
background: #ffffff;
width: 280px;
float: right;
margin-top: 40px;
}
.rightSideSection h1{
font-size: 30px;
}
.popularList li{
margin-left: 20px;
}
maybe this can work for you, to align the carousel to center:
<div style="text-align: center; text-align: -webkit-center;">
<section id="carouselSlides" class="carousel slide container" data-ride="carousel" style="background:#979BAF; ">
<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="#carouselSlides" data-slide-to="0" class="active"></li>
<li data-target="#carouselSlides" data-slide-to="1"></li>
</ol>
<!--The slideshow-->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="slideshow/sunglasses.jpg" alt="sunglasses">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="slideshow/lady.jpeg" alt="women">
</div>
<!--<div class="carousel-item">
<img src="" alt>
</div>-->
<!--Left and right controls-->
<a class="carousel-control-prev" href="#carouselSlides" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#carouselSlides" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</section>
<div>
Here basically the "carouselSlides" is contained in a div
providing the div styles as:
div{
text-align: center;
text-align: -webkit-center;
}

how to increase my slider width on mobile screen

i have a problem that my slider on mobile screen is very small i tried to use media query to make it bigger on mobile screen but did not work
here is my code for slider
<section id="watch-app">
<h2 class="watch-head">watch app</h2>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="imgs/watch-app.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="imgs/watch-app1.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="imgs/watch-app.jpg" alt="Third slide">
</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>
</a>
</div>
</section>
and here is my css code for that section
#watch-app{
padding: 7rem;
text-align: center;
}
.img-fluid{
margin: 0 auto;
max-width: 650px;
padding-top: 6rem;
}
.carousel-indicators li{
width: 20px;
height: 20px;
background-color:white;
border-radius: 50%;
border: 1px solid #f16054;
}
.carousel-indicators {
bottom: -5rem;
}
.carousel-indicators .active{
background-color:#ef473a;
}
.carousel-control-next-icon{
width: 90px;
height: 80px;
background-image: url(../imgs/right-arrow.jpg);
margin-top: 5rem;
}
.carousel-control-prev-icon{
width: 90px;
height: 80px;
background-image: url(../imgs/left-arrow.png);
margin-top: 5rem;
}
and here is my media query
#media (max-width: 768px) {
.img-fluid{
max-width: 900px;
margin: 0 auto;
}
}
this how my slider look like in the normal screen
normal screen
and that how it look like on mobile screen
mobile screen
You have to add a width: 100%; with your max-width

How to use translateX to center images in Bootstrap 3 carousel with fixed height and responsive width?

I've got a carousel that has a width:100% and a height:831px on a fluid layout. I am having problems centering the images that are 3600px wide by 831px high. I need the images to be centered on all viewport widths and resolutions.
I've tried to use transform:translateX, but the images always end up at left:0.
This is what I have:
<div class="mainTopVisual clearfix">
<div id="m_top-visual" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#m_top-visual" data-slide-to="0" class="active"></li>
<li data-target="#m_top-visual" data-slide-to="1"></li>
<li data-target="#m_top-visual" data-slide-to="2"></li>
<li data-target="#m_top-visual" data-slide-to="3"></li>
<li data-target="#m_top-visual" data-slide-to="4"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="images/main/j1.jpg" alt="First slide">
</div>
<div class="item">
<img class="second-slide" src="images/main/j2.jpg" alt="Second slide">
</div>
<div class="item">
<img class="third-slide" src="images/main/j3.jpg" alt="Third slide">
</div>
<div class="item">
<img class="forth-slide" src="images/main/j4.jpg" alt="Forth slide">
</div>
<div class="item">
<img class="fifth-slide" src="images/main/j5.jpg" alt="Fifth slide">
</div>
</div>
<a class="left carousel-control" href="#m_top-visual" role="button" data-slide="prev">
<span class="main_top-visual flaticon-left-arrow" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#m_top-visual" role="button" data-slide="next">
<span class="main_top-visual flaticon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<div id="carouselButtons">
<button id="playButton" type="button" class="btn btn-default">
<span class="flaticon-arrows-3"></span>
</button>
<button id="pauseButton" type="button" class="btn btn-default">
<span class="flaticon-pause-bars"></span>
</button>
</div>
</div><!-- /.carousel -->
</div>
and this is the CSS:
<style>
div.mainTopVisual{
margin-top:0;
padding-top:0;
padding-bottom:0;
}
.m_top-visual_inner{
width:100%;
margin:0;
position:relative;
}
.carousel {
height: 831px;
margin-bottom:0;
}
.carousel-inner {
position: relative;
overflow: hidden;
width: 100%;}
.carousel .item {
height: 831px;
width:3600px;
background-color: #000;
}
.carousel-inner > .item > img {
position: absolute;
width:3600px;
height:831px;
top:0;
left:50%;
transform:translate(-50%, 0);
max-width:none;
}
</style>
Thank you very much in advance for your help.
For those having the same problem, I found the answer here http://parkhurstdesign.com/improved-carousels-twitter-bootstrap/

Bootstrap carousel with fixed height: center image horizontally or vertically based on image dimensions

I have a bootstrap carousel with a fixed height. Here is the CSS:
.carousel-custom .carousel-outer {
position: relative;
}
#media(min-width: 992px){
.carousel-custom {
margin-top: 20px;
.carousel-inner {
height: auto;
.item {
height:500px;
line-height:300px;
}
}
}
}
#media(max-width: 991px){
.carousel-custom {
margin-top: 20px;
.carousel-inner {
height: auto;
.item {
height:300px;
line-height:300px;
text-align:center;
}
}
}
}
And here is my markup:
<div id="carousel-custom-1188" class="carousel slide carousel-custom" data-ride="carousel">
<div class="carousel-outer">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="img-responsive" src="http://res.cloudinary.com/dltbqhact/image/upload/v1459261752/w8edcuvz1yl3uc4g4o34.jpg" alt="Jinallzupvfazqqr67nd">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img class="img-responsive" src="http://res.cloudinary.com/dltbqhact/image/upload/v1459175684/w4ueot8o49dh2fyulv0x.jpg" alt="K1yov5hpur8mgsb9r15p">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img class="img-responsive" src="http://res.cloudinary.com/dltbqhact/image/upload/v1459178926/fwlmuroj2wlz7czrsha0.jpg" alt="Lqfandhmutdkppjrl932">
<div class="carousel-caption"></div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-custom-1188" 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-custom-1188" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!-- Indicators -->
<ol class="carousel-indicators mCustomScrollbar">
<li data-target="#carousel-custom-1188" data-slide-to="0" class="active">
<img style="height:50px; width: 50px;" class="img-responsive" src="http://res.cloudinary.com/dltbqhact/image/upload/v1459268139/jinallzupvfazqqr67nd.png" alt="Jinallzupvfazqqr67nd">
</li>
<li data-target="#carousel-custom-1188" data-slide-to="1" class="">
<img style="height:50px; width: 50px;" class="img-responsive" src="http://res.cloudinary.com/dltbqhact/image/upload/v1459268146/k1yov5hpur8mgsb9r15p.png" alt="K1yov5hpur8mgsb9r15p">
</li>
<li data-target="#carousel-custom-1188" data-slide-to="2" class="">
<img style="height:50px; width: 50px;" class="img-responsive" src="http://res.cloudinary.com/dltbqhact/image/upload/v1459268157/lqfandhmutdkppjrl932.png" alt="Lqfandhmutdkppjrl932">
</li>
</ol>
</div>
</div>
The issue is that I have images that are very wide, others very narrow and high, and others with a good ration height/width in the same carousel.
I'd like to have the wide images centered vertically (with a width of a 100%), high images centered horizontally (with a height of 100%) and "normal" images (with a decent ratio height/width) filling all the carousel.
Here is what I'm trying to do (first image is an example with a very wide image, second image with a very high one, and last one has a "decent" ratio).
How could I achieve this ? I've tried Make Bootstrap's Carousel both center AND responsive? and other tricks found on Google but none did this.
Since the .item elements are relative positioned you could just position the img elements absolutely. Giving the .item elements a fixed height, will help to vertically and horizontally align the images inside.
I'm sure there are lots of different ways to do this, here is one example. Hope it helps.
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
body {
background-color: black;
}
.carousel-inner > .item {
height: 100vh;
}
.carousel-inner > .item > img {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
max-height: 800px;
width: auto;
}
.carousel-control.left,
.carousel-control.right {
background-image: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- inner -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placehold.it/1200x600/2c3e50/000" alt="">
</div>
<div class="item">
<img src="http://placehold.it/600x1200/d35400/000" alt="">
</div>
<div class="item">
<img src="http://placehold.it/600x600/c0392b/000" alt="">
</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>
</div>
Alright, I've been fiddling around for a while now. Ended up with the result below. Hope it helps and answers your question (at least for a small part).
<head>
<title>Bootstrap Carousel</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
html,
body {
height: 100%;
}
.carousel,
.item,
.active {
height: 100%;
}
.carousel-inner {
height: 100%;
}
/* Background images are set within the HTML using inline CSS, not here */
.fill {
width: 100%;
height: 100%;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
footer {
margin: 50px 0;
}
.tester {
height: 100%;
}
</style>
</head>
<body>
<div class="tester">
<!-- Full Page Image Background Carousel Header -->
<header 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>
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url('http://res.cloudinary.com/dltbqhact/image/upload/v1459268139/jinallzupvfazqqr67nd.png');"></div>
<div class="carousel-caption">
<h2>Caption 1</h2>
</div>
</div>
<div class="item">
<!-- Set the second background image using inline CSS below. -->
<div class="fill" style="background-image:url('http://res.cloudinary.com/dltbqhact/image/upload/v1459268146/k1yov5hpur8mgsb9r15p.png');"></div>
<div class="carousel-caption">
<h2>Caption 2</h2>
</div>
</div>
<div class="item">
<!-- Set the third background image using inline CSS below. -->
<div class="fill" style="background-image:url('http://res.cloudinary.com/dltbqhact/image/upload/v1459268157/lqfandhmutdkppjrl932.png');"></div>
<div class="carousel-caption">
<h2>Caption 3</h2>
</div>
</div>
</div>
<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>
</header>
<script>
$('.carousel').carousel({
interval: 5000 //changes the speed
})
</script>
</div>
</body>
Again, hope it helps!
simply use image on absolute if your slider height is fixed
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="middle">
<img src="http://placehold.it/1920x500">
</div>
</div>
<div class="item">
<div class="middle">
<img src="http://placehold.it/1920x300">
</div>
</div>
<div class="item">
<div class="middle">
<img src="http://placehold.it/600x900">
</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>
css
.carousel {
width: 500px; /*test width*/
height: 300px; /*what ever height */
}
.middle {
position: relative;
height: 300px; /*what ever height */
}
.middle img {
max-width: 100%;
max-height: 100%; /*what ever height */
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
see fiddle
If you try to achieve this in bootstrap carousel, you will end up with black bars in top and bottom...I was stuck with similar problem and ended up using "flickity" js library..it works lot better than tryig to achieve this on something not meant for this....