entfernen Sie den anklickbaren Bereich in der Nähe von Pfeilen Karussell Bootstrap

Question

Ich benutze Carousel Bootstrap, um Diashow zu machen, ich möchte nur auf die genaue Pfeile Symbol klicken, um Folie zu bewegen, aber die Sache ist, dass Sie überall in der Nähe der Pfeile (oben und unten), gibt es irgendeine Möglichkeit, die ich einstellen kann, kann nur auf die Pfeile geklickt werden. Ich habe den Code unten gemacht, um diesen dunklen Bereich zu entfernen, der bereits Schatten sieht. Dank

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

Answer 1

Sie werden für das Ankerelement in BootStrap Styling bemerken, dass die folgenden Optionen als Kontrolle wirkt:

.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; 
} 

Das Wichtigste hier ist top: 0 und bottom: 0. Grundsätzlich erstreckt sich das Ankerelement von oben nach unten bis zum Ende (es ist position ed absolute).

Zusätzlich hat es width: 15%.

Ich würde außer Kraft setzen BS Styling durch einen .parent .child {} Selektor, wie folgt:

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

Dies ist ein Beispiel natürlich ist - Sie werden ein bisschen experimentieren tun müssen, aber es sollte Ihnen auf der rechten Seite führen Spur.

Sie können auch beide Pfeile zielen einzeln mit den folgenden:

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

Answer 2

Nur müssen Sie setzen top: 50%; und unten: 50%; und das Problem wird gelöst. :)

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