Bootstrap Carousel Fancy Techniques – How to

Different bootstrap carousel fancy techniques contributed by twoclock. These techniques will enhance your design & user experience for a new animated version of your website.

Remove Bootstrap Carousel Control Shadows:

Next and Previous slide button have shadows which dim the shine of image in slide. Question arises how to remove carousel control background shadows.

.carousel-control.left, .carousel-control.right{ 
    background: none !important;
    filter: progid:none !important;
}

Copy the above code to your stylesheet will remove background shadow image from carousel controls.


Drop Shadow on Bootstrap Carousel Dots:

Usually when working with multiple slides in Bootstrap slider dots are not visible properly.

Instead of giving box-shadow to the dots use border of 1px. Which make dots visible and easy for navigation.

Adding Border to Carousel Dots:

.carousel-indicators li, .carousel-indicators .active{ border: 1px solid black }

To enhanced the Bootstrap Carousel navigation dots grey rings and white background been used.


Video like Zoom Effect for Bootstrap Slide Images:

Once you add slide images to your carousel they just simply slide, it’s default behavior. To add fancy effect to your carousel, which zoom like video then add the below CSS to your style. See the working demo here.

@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(1, 1);
  }
  to {
    -webkit-transform: scale(1.5, 1.5);
  }
}

@keyframes zoom {
  from {
    transform: scale(1, 1);
  }
  to {
    transform: scale(1.5, 1.5);
  }
}

.carousel-inner .item > img {
  -webkit-animation: zoom 20s;
  animation: zoom 20s;
}

Vertically Center Align Carousel Caption:

Carousel caption usually in the bottom of slide. Which shows description and the heading of the slides. May be you need to make vertically center align carousel caption. You can use the translateY function of the CSS property transform to vertically align elements. Browser support is quite decent, including IE9. Therefore just add the following to your .carousel-caption CSS. Working Example here.

.carousel-caption{
top: 50%;
transform: translateY(-50%);
bottom: initial;
}

And last but not least give the parent element, in this case .item, the following CSS to prevent blurry elements when it’s placed on half a pixel.

.item{
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}

Leave a Reply

Your email address will not be published. Required fields are marked *