How to remove the white background from Bootstrap carousal?


Tags: javascript,jquery,css,twitter-bootstrap,carousel

Problem :

I am using Bootstrap v3.0. I changed the transition of carousal slides from horizontal to vertical. But whenever the slide changes there is white background which appears during transition. How to remove it? Here is the Fiddle: https://jsfiddle.net/amanturate/a9gcmg1r/

I want the height of my carousal to be 520px, if I use 100% then it does not fit and i have to scroll to see the whole carousel.

CSS code:

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
 height: 520px;
 }

.carousel h1{
 color: white;
}

/* Since positioning the image, we need to help out the caption */
.carousel-caption {
 z-index: 10;
 background-image: linear-gradient(90deg,rgba(57,55,67,0.5),rgba(12,11,17,0.5));
 width: 100%;
 left: 0;
 padding-right: 90px;
}

/* Declare heights because of positioning of img element */
.carousel.vertical .item {
 height: 520px;
 background-color: #777;
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
}
.carousel-inner > .item > img {
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 min-width: 100%;
 height: 520px;
}

.carousel-caption h1{font-size: 4em;}
.carousel-caption p{font-size: 2em;}

.carousel-control{
 z-index: 15;
}

.carousel-indicators{
 top: 40%;
 left: 100%;
 margin-left: -5%;
 z-index: 20;
 width: auto;
 padding-right: 10px;
}

.carousel-indicators li {
 display: block;
 margin-bottom: 5px;
}

.carousel-indicators .active {
 margin-bottom: 5px;
}


/* vertical carousel*/
.vertical .carousel-inner {
 height: 100%;
}

.carousel.vertical .item {
 -webkit-transition: 0.6s ease-in-out top;
 -moz-transition: 0.6s ease-in-out top;
 -ms-transition: 0.6s ease-in-out top;
 -o-transition: 0.6s ease-in-out top;
 transition: 0.6s ease-in-out top;
}

.carousel.vertical .active {
 top: 0;
}

.carousel.vertical .next {
 top: 100%;
}

.carousel.vertical .prev {
 top: -100%;
}

.carousel.vertical .next.left,
.carousel.vertical .prev.right {
 top: 0%;
}

.carousel.vertical .active.left {
 top: -100%;
}

.carousel.vertical .active.right {
 top: 100%;
}
/*vertical carousel setting ends*/
/* carousel customization ends */


Solution :

Repair Bootstrap vertical carousel

I've simplified your code, fix bugs, improved vertical transition and indicators.

Please check the result: https://jsfiddle.net/glebkema/pok6mf12/

$('.carousel').carousel({
  interval: 3000
})
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css');

/* customize */
.carousel,
.carousel-inner .item,
.carousel-inner img {
  height: 520px;
  width: 100%;
}
.carousel .item {
  background-color: #777;
}
.carousel-caption {
  background-image: linear-gradient(90deg, rgba(57, 55, 67, 0.5), rgba(12, 11, 17, 0.5));
  color: white;
  left: 0;
  padding-right: 90px;
  right: 0;
  text-align: right;
  text-transform: uppercase;
}
.carousel-caption h1 { font-size: 4em; }
.carousel-caption p  { font-size: 2em; }

/* vertical indicators */
.carousel-indicators {
  top: 50%;
  left: auto;
  right: 3%;
  bottom: auto;
  transform: translateY(-50%);
  width: auto;
}
.carousel-indicators li {
  display: block;
  height: 12px;
  margin: 9px 1px;
  width: 12px;
}
.carousel-indicators .active {
  height: 14px;
  margin: 8px 0;
  width: 14px;
}

/* vertical transition */
@media all and (transform-3d), (-webkit-transform-3d) {
  .vertical> .carousel-inner > .item {
    -webkit-transition: -webkit-transform .6s ease-in-out top;
       -moz-transition:    -moz-transform .6s ease-in-out top;
        -ms-transition:     -mz-transform .6s ease-in-out top;
         -o-transition:      -o-transform .6s ease-in-out top;
            transition:         transform .6s ease-in-out top;

    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    -webkit-perspective: 1000px;
            perspective: 1000px;
  }
  .vertical> .carousel-inner > .item.next,
  .vertical> .carousel-inner > .item.active.right {
    left: 0;
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
  .vertical> .carousel-inner > .item.prev,
  .vertical> .carousel-inner > .item.active.left {
    left: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
  .vertical> .carousel-inner > .item.next.left,
  .vertical> .carousel-inner > .item.prev.right,
  .vertical> .carousel-inner > .item.active {
    left: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
<div id="carousel-example-generic" class="carousel slide vertical" 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 first">
      <div class="carousel-caption">
        <h1>Check our video</h1>
        <p>Learning in 6 weeks</p>
        <a class="btn btn-lg btn-primary" href="#" role="button"><i class="fa fa-play-circle-o" aria-hidden="true"></i></a>
      </div>
    </div>

    <div class="item second">
      <div class="carousel-caption">
        <h1>Check our video</h1>
        <p>Learning in 6 weeks</p>
        <a class="btn btn-lg btn-primary" href="#" role="button"><i class="fa fa-play-circle-o" aria-hidden="true"></i></a>
      </div>
    </div>

    <div class="item third">
      <div class="carousel-caption">
        <h1>Check our video</h1>
        <p>Learning in 6 weeks</p>
        <a class="btn btn-lg btn-primary" href="#" role="button"><i class="fa fa-play-circle-o" aria-hidden="true"></i></a>
      </div>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


    CSS Howto..

    How could I use the html a tag to change div width and height?

    How to make this Header/Content/Footer/Menu layout using CSS?

    How to create class in a custom CSS file by JavaScript?

    How to echo individual css classes for li's?

    How to temporarily modify the CSS of an element

    How to put inline circles made in CSS under each other when screen scales?

    How avoid zurb founction styles from overriding jqgrid/jquery ui styles?

    How to ignore css property by override (bootstrap 3)?

    How to redirect using css? [duplicate]

    How to use css value for javascript in IF-THEN construction? [closed]

    How to make the width property to work as auto in css

    How to modify a general css using javascript and jquery and return the result as a new id

    How do I add a special CSS class to run only on IE for a div component?

    How do you use HTML5 tags while supporting Progressive Enhancement for no-script clients that don't natively recognize unknown elements?

    How to style 2 vertical jQuery UI Slider handles?

    How to move an image up and down smoothly with CSS?

    How to move a div horizontal then vertical using css animation?

    How to find all elements with a particular CSS style, without a JS library?

    How to hyperlink a css box [closed]

    How to stop the latter part of javascript from being called?

    How to create a progress dialog when switching the webpages?

    How to add own icons in bootstrap navbar

    How to indent multiple levels of select optgroup with CSS?

    How to create an HTML/CSS table with double border? [duplicate]

    How to make an external HTML file not appear in the home page?

    How do i shrink my link menu

    Wordpress how to tell my css version

    How can I apply a custom material design theme to a Bootstrap component

    Is it possible to have a web browser scroll to show CSS fixed position items that are outside the viewport of the web browser?

    how to style the html contents inside a php include file?