CODEWITHSUNDEEP
htmlcsstwitter-bootstrapcarouselarrows
pexichdu
pexichdu

Reputation: 899

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;
   background-image:none;
   outline: 0;
   opacity: 1;
 }

Upvotes: 1

Views: 2790

Answers (2)

Vijay Dhanvai
Vijay Dhanvai

Reputation: 1116

Only You have to put top:50%; and bottom:50%; and the issue will be solved. :)

For Bootstrap 3:

#myCarousel .carousel-control{
    top: 50%;
    bottom: 50%;
}

For Bootstrap 4: 

#myCarousel  .carousel-control-prev, 
#myCarousel  .carousel-control-next{
    top: 50%;
    bottom: 50%;
}

and don't forgot to change #myCarousel id to your carousal ID or class selector.

Upvotes: 7

David Wilkinson
David Wilkinson

Reputation: 5118

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 {}

Upvotes: 1

Related Questions