Customize Bootstrap 3 carousel

by Sam  


Bootstrap Carousel is one of Bootstrap’s features which is commonly seen at the front page of a website. It is very useful to allow viewers to see your featured products, services or even the thoughts about your websites. Unfortunately, it is not easy to modify the carousel especially for new designers. To help them to do it, I have added the list of codes below.

1. How to remove the gradient of carousel


<style>
.carousel-control.left, .carousel-control.right {
background: none !important;
filter:none !important;
filter: progid: none !important;
outline: 0;
opacity: 1;
}
</style>

2. How to create a rounded background of arrows


<style>
.carousel-control .glyphicon:before{
background:orange;
border-radius:50%;
padding: 15px 17px;
}
</style>

3. How to change the color of background arrows


<style>
.carousel-control:hover .glyphicon:before {
background:red;
}
</style>

4. Remove the left and right arrows


<style>
.carousel-control.right, .carousel-control.left {
display: none;
}
</style>

5. Change the arrows to your own image

a. First, remove the arrows as coded in #4, by adding the code below into your css.


<style>
.carousel-control.right, .carousel-control.left {
display: none;
}
</style>

(Option), go to your carousel and remove this line:

<a class="left carousel-control" href="#myCarousel" data-slide="prev">

<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">

<span class="sr-only">Next</span>
</a>

b. Next, replace this code below into


<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<img src="images/arrow-left.png">
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<img src="images/arrow-right.png">
</a>

c. Add the code below into your css carousel.


<style>
.carousel-control img{
position: absolute;
top: 50%;
}
</style>

6. How to Stop Carousel Slide

From your carousel html code, just simply remove data-ride="carousel" or simply set it to data-ride="false"


Important Notice

Take note that if style doesn’t take effect, you have to add !important on the attribute.



Leave a Reply

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


Need of a Website?

Maybe you're planning to build a landing page for your website. You might also have a plan to create a web application. I can offer you with an affordable but with good quality services. Don't hesitate to submit your specifications by clicking the button below.

Get Quote