I need to Change the height of the carousel slider bootstarp, I have tired to put a fixed height to the images in pixel but it doesn't work and i have tired to put a fixed height as well to the ID bs-carousel but it doesn't work and as well the the item slides.
.btn.btn-lg {
padding: 10px 40px;
}
.btn.btn-hero,
.btn.btn-hero:hover,
.btn.btn-hero:focus {
color: #f5f5f5;
background-color: #46c3ff;
border-color: #46c3ff;
outline: none;
margin: 20px auto;
}
.fade-carousel .slides .slide-1,
.fade-carousel .slides .slide-2,
.fade-carousel .slides .slide-3 {
height: 100vh;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.fade-carousel .slides .slide-1 {
background-image: url(http://evisax.com/img/dubai.png);
}
.fade-carousel .slides .slide-2 {
background-image: url(http://evisax.com/img/free_singapore_tour_900.jpg);
}
.fade-carousel .slides .slide-3 {
background-image: url(http://evisax.com/img/Taj_Mahal.png);
}
#media screen and (min-width: 980px) {
.hero {
width: 980px;
}
}
#media screen and (max-width: 640px) {
.hero h1 {
font-size: 4em;
}
}
<div class="carousel fade-carousel slide" data-ride="carousel" data-interval="4000" id="bs-carousel">
<!-- Overlay -->
<div class="overlay"></div>
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#bs-carousel" data-slide-to="0" class="active"></li>
<li data-target="#bs-carousel" data-slide-to="1"></li>
<li data-target="#bs-carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item slides active">
<div class="slide-1"></div>
<div class="hero">
</div>
</div>
<div class="item slides">
<div class="slide-2"></div>
<div class="hero">
</div>
</div>
<div class="item slides">
<div class="slide-3"></div>
<div class="hero">
</div>
</div>
</div>
</div>
Try this, use px instead of Vh for the following
.fade-carousel .slides .slide-1,
.fade-carousel .slides .slide-2,
.fade-carousel .slides .slide-3 {
height: 100px;
}
FIDDLE-DEMO
use !important to change height
.carousel-inner{
width:100%;
max-height: 200px !important;
}
Related
Is there any way to display a full image in a bootstrap carousel. I want the container to take the full size of the image but it cuts it short at the bottom.
.carousel-indicators li{
width: 10px !important;
height: 10px !important;
border-radius: 100% !important;
}
#hero {
position: relative;
}
#course-form{
}
#carousel {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.carousel-inner,
.carousel-item {
height: 100%;
}
.carousel-item {
background: no-repeat center/cover;
background-size: cover;
}
.logo {
height: 30vh;
width: 15vw;
position: relative;
bottom: 100px;
right: 50px;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="jumbotron jumbotron-fluid hero" id="hero">
<div class="container">
<div class="row">
<div class="col-6 mb-4">
<img src="./images/logo.png" class="logo">
<button id="signup"><span id="signup-icon"></span>Sign Up</button>
<button id="signin"><span id="signin-icon"></span>Sign In</button>
<div class="box">
<div class="container-1">
<span class="icon"><i class="fa fa-search"></i></span>
<input type="search" id="search" placeholder="Search..." />
</div>
</div>
</div>
</div><!--row for logo,search, and form -->
<!-- Here is the carousel, `position:absolute` -->
<div id="carousel" class="carousel slide" data-ride="carousel">
<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">
<div class="carousel-item active" style="background-image:url('https://media.istockphoto.com/photos/plant-growing-picture-id510222832?k=6&m=510222832&s=612x612&w=0&h=Pzjkj2hf9IZiLAiXcgVE1FbCNFVmKzhdcT98dcHSdSk=')"></div>
<div class="carousel-item" style="background-image:url('http://www.electran.org/publication/transactiontrends/wp-content/uploads/intelligence-growth-1050x700.jpg')">
</div>
<div class="carousel-item" style="background-image:url('http://www.globoforce.com/gfblog/wp-content/uploads/2017/02/sprouting-seed.jpg')">
</div>
</div>
</div>
</div><!-- container for top image carousel -->
</div>
I tried tweaking the .carousel-inner css to take the full size of the image but I have not had any luck. I have tried background-contain and cover but not luck as of yet
updated with images
Try this inside your
.carosel-item {
background-attachment: fixed;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I believe that is what you are looking for!
Cheers
UPDATE:
After reviewing your question what you are after is a parent wrapper to be of image size. As far as my knowledge goes you can't size the wrapper (parent container) based on background image size.
What you can do instead is set your parent wrapper size with width: and height: attributes, and css for carosel-item will do the rest.
Best of luck with your development.
I am using Bootstrap version 4.0.0-beta and I am using the carousel function. I have configured it perfectly as to how I need it when I view it on my monitor. (1920 x 1200) but would like to change it's height depending on the users monitor, for example 1920 x 1080. I have given my Carousel a height of 32rem but would like to decrease that size if a user is on a smaller screen like I said. I believe a media query is what I need but I have tried and can't figure it out. Can anyone shine some light on this please?
Thanks.
Managed to solve it on my own. Just used this.
#media screen and (max-height: 1000px) {
.carousel-item {
height: 24rem;
}}
Please try the sample below and let me know if its worked.
.img-responsive,
.thumbnail>img,
.thumbnail a>img,
.carousel-inner>.item>img,
.carousel-inner>.item>a>img {
display: block;
width: 100%;
height: auto;
}
.carousel-inner {
border-radius: 15px;
}
.carousel-caption {
background-color: rgba(0, 0, 0, .5);
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
padding: 0 0 10px 25px;
color: #fff;
text-align: left;
}
.carousel-indicators {
position: absolute;
bottom: 0;
right: 0;
left: 0;
width: 100%;
z-index: 15;
margin: 0;
padding: 0 25px 25px 0;
text-align: right;
}
.carousel-control.left,
.carousel-control.right {
background-image: none;
}
.carousel-containers {
padding: 10px 0;
}
.carousel-containers {
background-color: #fff;
color: #555;
}
#media screen and (min-width: 768px) {
.carousel-containers {
padding: 1.5em 0;
}
}
#media screen and (min-width: 992px) {
.container {
max-width: 930px;
}
}
<div class="carousel-containers">
<div class="container">
<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="http://placehold.it/800x400" alt="...">
<div class="carousel-caption">
<h2>Heading</h2>
</div>
</div>
<div class="item">
<img src="http://placehold.it/800x400" alt="...">
<div class="carousel-caption">
<h2>Heading</h2>
</div>
</div>
<div class="item">
<img src="http://placehold.it/800x400" alt="...">
<div class="carousel-caption">
<h2>Heading</h2>
</div>
</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>
</div>
</div>
I'm trying to get get some padding to sides of Twitter Bootstrap slider.
I'm using plain example codes from bootstrap sides with little modifications.
In bellow image you can see what I try to mean. Slider is right now 100% of page width , but I try get some darker are to show on sides (60% of page width.) So it should be left 20% middle 60% and right side 20%.
HTML:
<header id="karuselli" class="carousel slide row" >
<ol class="carousel-indicators">
<li data-target="#karuselli" data-slide-to="0" class="active"></li>
<li data-target="#karuselli" data-slide-to="1"></li>
<li data-target="#karuselli" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="fill" style="background-image:url('https://placehold.it/1900x1080&text=Slide One');"></div>
<div class="carousel-caption">
<h2>Caption 1</h2>
</div>
</div>
<div class="item">
<div class="fill" style="background-image:url('https://placehold.it/1900x1080&text=Slide Two');"></div>
<div class="carousel-caption">
<h2>Caption 2</h2>
</div>
</div>
<div class="item">
<div class="fill" style="background-image:url('https://placehold.it/1900x1080&text=Slide Three');"></div>
<div class="carousel-caption">
<h2>Caption 3</h2>
</div>
</div>
</div>
<a class="left carousel-control" href="#karuselli" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#karuselli" data-slide="next">
<span class="icon-next"></span>
</a>
</header>
SCSS:
$karusellikorkeus : 50%;
$paneelikorkeus : 25px;
$menuValikkoYksi : 50%;
.menuValikkoYksi {
margin-right: 20%;
}
html,
body {
height: 100%;
background-color: #8c8c8c;
}
.carousel {
height: $karusellikorkeus;
}
.carousel-control.left, .carousel-control.right {
background-image: none
}
.item,
.active,
.carousel-inner {
height: 100%;
}
.body-top-padding {
padding-top: $paneelikorkeus + 90px;
}
.marginaali {
margin-top: $paneelikorkeus;
#include vp-background-size(cover);
}
.fill {
width: 100%;
height: 100%;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
hr {
color: red;
background-color: red;
padding: 2px 2px 2px 2px ;
}
footer {
margin: 50px 0;
}
Try this code
.carousel {
height: 50%;
width: 60%;
margin: 0 auto;
}
DEMO
I have created a Bootstrap carousel and clicking the indicators changes the current slide but doesn't change the class of the the slide to active meaning the indicator never changes.
<body>
<div class="container">
<div class="row">
<div class="#">
<div id="my-slider" class="carousel slide container" data-ride="carousel">
<!--indicators dot nav-->
<ol class="carousel-indicators">
<li data-target="#my-slider" data-slide-to="0" class="active"></li>
<li data-target="#my-slider" data-slide-to="1"></li>
<li data-target="#my-slider" data-slide-to="2"></li>
</ol>
<!--wrapper for slides-->
<div class="carousel-inner" role="listbox">
<div class="item one active">
<img src="images/IMG_6737.png" alt="The Shard" />
</div>
<div class="item two">
<img src="images/IMG_6630.png" alt="A London Barbers" />
</div>
<div class="item three">
<img src="images/IMG_6659.png" alt="A London Bar"/>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
And the CSS:
*{
margin: 0;
padding: 0;
}
.carousel {z-index: -99;}
.carousel .item{
position: fixed;
width: 100%; height: 100%;
}
.carousel .one {
background: url(images/IMG_6737.png);
background-size: cover;
background-repeat: no-repeat;
}
.carousel .two {
background: url(images/IMG_6630.png);
background-size: cover;
background-repeat: no-repeat;
}
.carousel .three {
background: url(images/IMG_6630.png);
background-size: cover;
background-repeat: no-repeat;
}
.carousel .active .left{
left:0;
opacity: 1;
}
.carousel-indicators {
position: fixed;
top:0;
float: left;
padding-bottom: 50px;
z-index: 30;
margin-top: 40px;
}
.carousel-indicators li{
width: 30px;
height: 30px;
border-radius: 1;
margin: 0 10px;
border-radius: 100%;
}
.carousel-indicators .active{
width: 30px;
height: 30px;
margin: 0 10px;
}
The active indicator should be the only indicator that is filled and the rest should be hollow this does not happen because the list items class of active doesn't changed after being clicked on.
Remove div with class="#"
Don't forget to include jQuery before bootstrap.js file.
This is pen I made with your code.
pen examplehttp://codepen.io/stojko/pen/NpJOEZ
You can check below given link for Bootstrap carousel:
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel&stacked=h
I am trying to remove white space between Navigation bar and the carousel in Bootstrap. I've found a lots of answer but none worked for me. Please take a look at the my code if I am doing anything wrong.
jsp for carousel
<div class="carousel fade-carousel slide" data-ride="carousel" data-interval="3000" id="bs-carousel">
<div class="overlay"></div>
<div class="carousel-inner">
<div class="item slides active">
<div class="slide-1"></div>
</div>
<div class="item slides">
<div class="slide-2"></div>
</div>
<div class="item slides">
<div class="slide-3"></div>
</div>
</div>
css file
.fade-carousel {
position: relative;
height: 100vh;
padding-top: 0px;
}
.fade-carousel .carousel-inner .item {
height: 100vh;
}
.fade-carousel .carousel-indicators > li.active {
width: 10px;
height: 10px;
opacity: 1;
}
.navbar {
margin-bottom: 0px;
}
/* Responsiveness of the link bar */
#media ( min-width : 767px) {
.navbar-default .navbar-nav>li>a {
color: #4e0300;
}
.navbar-nav>li.dropdown.open>a {
color: #ffffff;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.dropdown-menu {
min-width: 100%;
}
}
Have you tried applying negative padding/margin?
padding: -5px;