We're going to take Bootstrap's default carousel styles and apply some significant customization. Let's create a copy of Bootstrap's carousel.less file and make it our own.
Copy
bootstrap/carousel.lessand save it in thelessdirectory as_carousel.less..
Update the relevant import line in
__main.lessto import our custom file in place of Bootstrap's:@import "_carousel.less";Customize the opening comment in
_feature-carousel.less:// // Customized Carousel // --------------------------------------------------
Now to begin customizing!
If you unhooked Glyphicons as I did in the preceding section, you'll find that the next and previous carousel controls have disappeared. This is because they relied on Glyphicons. We can fix this using Font Awesome icons instead.
First, update the icons markup in
index.html. Look for the links with the classesleftorrightandcarousel-control:<a class="left carousel-control" ...
Update the
spantags...