Setting the width of a carousel using html - html

I have tried to reduce the width of my carousel so that it doesn't take up the whole width of the page but it doesn't seem to be working. I would like the width to only span over 8 columns and to be centred. I have tried changing the CSS code so that the width was 50% and not 100% but this did not work.
.item {
height: 300px;
}
.item,
img {
height: 500px !important;
width: 100% !important;
}
.item h3 {
font-family: 'Anton', sans-serif;
font-size: 48px;
color: cornsilk;
}
.item p {
font-family: 'Anton', sans-serif;
font-size: 18px;
color: cornsilk;
}
<!--Start of carousel-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<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>
<div class="carousel-inner">
<div class="item active">
<img src="images/c1.jpg" alt="First slide" />
<div class="carousel-caption">
<h3>Welcome to my amazing website</h3>
<p3>Hope you enjoy!</p3>
</div>
</div>
<div class="item">
<img src="images/c2.jpg" alt="Second slide" />
</div>
<div class="item">
<img src="images/c3.jpg" alt="Third slide" />
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>

Why wouldn't you work with the upper level, i.e. with the outer div element (id="carousel-example-generic" class="carousel slide")?
E.g.
.carousel{
width: 50%;
margin: 0 auto;
}
With bootstrap you could also use the bootstrap-grid including offsets: https://getbootstrap.com/docs/4.0/layout/grid/

Related

Bootstrap 4 Carousel Indicators are not appearing

I'm trying to create a carousel slider with carousel indicators at the bottom using Bootstrap-4.1.3. The problem is that the carousel indicators are invisible, but they do work when you click them.
I've already tried z-index, and background colors on the indicators, but they don't seem to work.
Here is my code:
.carousel-indicators {
z-index: 3;
#slide-buttons {
background-color: #999 !important;
background-color: rgba(70, 70, 70, .25) !important;
}
.active {
background-color: #444 !important;
}
}
<div class="carousel slide col-9 mx-auto pt-5 position-relative" data-ride="carousel" id="slides">
<!--Carousel Content-->
<div class="carousel-content carousel-inner" role="listbox">
<div class="slide-1 col-12 carousel-item active" id="slide1">
<h5>Example</h5>
</div>
<div class="slide-2 col-12 carousel-item" id="slide2">
<h5>Example</h5>
</div>
<div class="slide-3 col-12 carousel-item" id="slide3">
<h5>Example</h5>
</div>
</div>
<!-- Carousel Indicators -->
<ul class="carousel-indicators mt-5 pt-5 ">
<li data-target="#slides" id="slides-buttons" data-slide-to="0" class="active"></li>
<li data-target="#slides" id="slides-buttons" data-slide-to="1" class=" "></li>
<li data-target="#slides" id="slides-buttons" data-slide-to="2" class=" "></li>
</ul>
</div>
You should not use the same id multiple times on your page. Try using this solution instead:
.carousel .carousel-indicators li {
background-color: red;
}
.carousel .carousel-indicators li.active {
background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<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">
<div class="carousel-item active">
<img class="d-block w-100" src="https://cdn.pixabay.com/photo/2016/06/18/17/42/image-1465348_1280.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://cdn.pixabay.com/photo/2016/06/18/17/42/image-1465348_1280.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://cdn.pixabay.com/photo/2016/06/18/17/42/image-1465348_1280.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>
There is a typepo error in your code css id.
'slides-buttons' and '#slide-buttons
Based on Cristiano Soares solution, I have also added some further suggestions.
To ensure that the main carousel component wrapper has indicators set to active;
<Carousel indicators={true} .... <Item><ProjectImg><Caption> ... >
I also added further styling, as I still couldn't see the indicators once they where enabled;
.carousel-indicators li {
background-color: red;
height: 5px;
width: 20px;
z-index: 5 !important;
margin: 0 5px;
cursor: pointer;
}
.carousel-indicators li.active {
background-color: blue;
height: 5px;
width: 20px;
z-index: 5 !important;
padding: 0 5px;
cursor: pointer;
}
I had the same problem with bootstrap 4. Then i figured display of indicators is none.
so this fixed my problem:
.carousel-indicators{
display: block !important;}

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;
}

Image won't fill complete width of container

My image slider isn't quite the way I want it.
The image won't fill the full width of the container unless my browser window is small. When my window is larger the right side of the image has a white space instead of the image filling the whole width.
Here is my code:
<div class="bs-example">
<div id="myCarousel" class="carousel slide" data-interval="6500" data-ride="carousel">
<!-- 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>
</ol>
<div class="fill">
<div class="carousel-inner">
<div class="active item carousel-fade">
<img src="EvanHeathYellowGreen.jpg" alt="Evan&MEKiss" >
</div>
<div class="item carousel-fade">
<img src="EvanCrossStreet.jpg" alt="Evan&MEKiss" >
</div>
<div class="item carousel-fade">
<img src="EvanMeLook.jpg" alt="Evan&MEKiss" >
</div>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
and the CSS:
.fill {
overflow: hidden;
background-size: cover;
background-position: center;
background-image:"path/to/image.jpg";
}
.carousel-inner{
margin-left: auto;
}
.carousel{
margin-top: 20px;
border-top: 2px solid black;
border-bottom: 2px solid black;
}
Which is the image you are trying to fill?
If they are the ones with alt="Evan&MEKiss" then you can try Alberto Rubio's answer:
.item img {
width: 100%;
}
If you are trying to fill the background-image, you can try tweaking background-image to use url:
background-image:url("path/to/image.jpg");
Here's a codepen example with placeholder images: http://codepen.io/fawyna/pen/VaOmqX

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....

Centering button over Bootstrap 3 carousel

I'm trying to center a button over a bootstrap 3 carousel, this button is hovering above the carousel.
I tried to wrap the button in a div class and center it with either text-align: center; or margin: 0 auto; without succes.
I can manually set margin-left of the .hover-class; this will work, but it's not perfectly centered. How to center my button?
This is my code:
HTML:
<!--The slider-->
<section>
<div class="hover-slide">
Let's go
</div>
<div id="slider-top" class="carousel slide" data-ride="carousel">
<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="#slider-top" data-slide-to="0" class="active"></li>
<li data-target="#slider-top" data-slide-to="1"></li>
<!--<li data-target="#slider-top" data-slide-to="2"></li>-->
</ol>
<!--Wrapper for the the slide-->
<div class="carousel-inner">
<!--specify first slide-->
<div class="item active">
<img src="img/01.jpg" alt="Foto1">
<div class="carousel-caption">
<h3>TEST</h3>
</div>
</div>
<!--specify second slide-->
<div class="item">
<img src="img/02.jpg" alt="Foto2">
<div class="carousel-caption">
<!--Let's go-->
<h3>TEST SLIDE 2</h3>
</div>
</div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
My CSS:
.hover-slide {
position: absolute;
/*margin-left: 30%;*/
z-index: 10;
}
.carousel .item {
width: 100%;
height: 100%;
}
.carousel .item img {
width: 100%;
height: 100%;
}
.btn.start-me {margin: 0 auto;}
You need to wrap in column and add text-center class :
Fiddle : http://bootply.com/112692
Extract :
<section>
<div class="col-md-12 hover-slide text-center"> // <------ HERE
Let's go
</div>
<div id="slider-top" class="carousel slide col-md-12" data-ride="carousel"> // <------ HERE
<ol class="carousel-indicators">
<li data-target="#slider-top" data-slide-to="0" class="active"></li>
<li data-target="#slider-top" data-slide-to="1"></li>
<!--<li data-target="#slider-top" data-slide-to="2"></li>-->
</ol>