Reduce the area of the Bootstrap carousel chevron (Bootstrap 3)

I have a working Bootstrap 4 carousel and inside some images.

The issue is that the user can slide the carousel NOT ONLY on the chevron itself but on a very large zone (a sort or rectangle). How can I prevent this so that user don't slide when they click outside of the very chevron ?

<div id="list-carousel" class="carousel slide" data-ride="carousel">      
      <div class="carousel-inner" role="listbox">
          <div class="item active">
              <!-- responsive image -->
              <img src="http://placehold.it/350x150">             
            <div class="carousel-caption">
              lorem ipsum
            </div>
          </div>          
          <div class="item ">
              <img src="http://placehold.it/450x200">             
            <div class="carousel-caption">              
                Hotel room in LA
            </div>
          </div>          
      </div>
      <!-- Controls -->
      <a class="left carousel-control" href="#list-carousel" role="button" data-slide="prev">
        <i class="fa chevron fa-chevron-left "></i>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carou[![enter image description here][1]][1]sel-control" href="#prize-list-carousel" role="button" data-slide="next">
        <i class="fa chevron fa-chevron-right "></i>
        <span class="sr-only">Next</span>
      </a>
    </div>

And here is via Chrome Developer tool the whole zones where, when clicked makes the carousel "slide on". (the zone below appears when I select on chrome dev tools the line )

enter image description here

As you see the zone where he can click is much larger than the chevron/arrow itself. That's the issue.

To be sure it was not coming from a tweak or sth specific in my app, I checked here too a online BS carousel: http://codepen.io/SitePoint/pen/pjJGQE, and it's the same.

3 answers

  • answered 2017-01-11 14:18 FelipeAls

    You should override Bootstrap with:

    .carousel-control {
      top: 20%;
      bottom: 20%;
    }
    

    codepen

    Beware that it's a very large zone for a reason: it's way easier for an user to click and interact with the carousel, even on mobile or with images of different heights and widths (not sure BS manages this but it happens in the wild). That may not be what you intend, but it's a given for a lot of users now: they expect to be able to click very far from the chevron and still see the action they expect to happen.

    Also UX SE has something to say about carousels ^^

  • answered 2017-01-11 14:18 seorefbe

    You can add in your css

    .carousel-control {
       width: 25px;
    }
    

    Perhaps you have to add margin too and remove background ?

    .carousel-control {
        width: 25px;
        background: none;
        margin: 0 5%;
    }
    

  • answered 2017-01-11 14:18 Nandakumar

    Not sure if this will work, but you can try it

    Remove the data-slide="prev" in the a tag and add it in the span tag