pexichdu pexichdu - 1 year ago 117
HTML Question

remove the clickable area near arrows carousel bootstrap

I use Carousel bootstrap to make slideshow, I only want to click on the exact arrows icon to move slide, but the thing is that it lets you to click everywhere near the arrows (above and below), is there any way that I can adjust it can only be clicked on the arrows. I did the code below to remove that dark area looking shadow already. Thanks

.carousel-control.left, .carousel-control.right {
filter: progid: none !important;
filter:none !important;
outline: 0;
opacity: 1;

Answer Source

You'll notice in BootStrap's styling for the anchor element that acts as the control the following:

.carousel-control {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 15%;
    font-size: 20px;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
    background-color: rgba(0,0,0,0);
    filter: alpha(opacity=50);
    opacity: .5;

The key thing here is top: 0 and bottom: 0. Basically, the anchor element stretches from the top of its parent all the way to the bottom (it's positioned absolutely).

In addition, it has width: 15%.

I would override BS's styling by using a .parent .child {} selector, as follows:

.yourparentclass .carousel-control {
    top: 100px;
    bottom: 100px;
    width: 5%;

This is an example of course - you'll need to do a bit of experimenting but it should lead you down the right track.

You can also target both arrows individually with the following:

.yourparentclass .carousel-control.right {}
.yourparentclass .carousel-control.left {}