bootstrap suwak karuzela niestandardowe strzałki

Question

Ok

Używam siłach suwak karuzela, ale z niestandardowych obrazów zamiast glyphicons dostarczonych z nim.

Problem polega jednak na tym, że są one ustawione w kierunku krawędzi suwaka. Lewy górny przycisk dla lewej strzałki i prawego górnego dla prawego obrazu.

Próbowałem zmienić pozycję, która działa, ale nie pozostaje w swojej pozycji, gdy okno ma ponownie rozmiar. Nie wiem, gdzie kierować kod, aby kod ignorował ten cień, który pojawia się po najechaniu kursorem myszy na strzałkę.

To jest html.

<div class="container-fluid banner_fluid"> 
    <div class="carousel slide" data-ride="carousel" id="carousel_slider"> 
     <div class="carousel-inner"> 
      <div class="item active"> 
       <img src="images/home_banner_1.jpg" alt="home slide 1" /> 
      </div> 
      <div class="item"> 
       <img src="images/home_banner_2.jpg" alt="home slide 1" /> 
      </div> 
      <div class="item"> 
       <img src="images/home_banner_3.jpg" alt="home slide 1" /> 
      </div> 
     </div> 
     <div href="#carousel_slider" class="left carousel-control" data-slide="prev"> 
      <span> 
       <img src="images/chevron_left.jpg" /> 
      </span> 
     </div> 
     <div href="#carousel_slider" class="right carousel-control" data-slide="next"> 
      <span> 
       <img src="images/chevron_right.jpg" /> 
      </span> 
     </div> 
    </div> 
</div> 

Korzystałem z narzędzi dla programistów, aby szybko sprawdzić i przetestować różne opcje. Pozycja absolutna nie działa. Czy jest jakikolwiek inny sposób na zrobienie tego, więc pojawiają się one w tej samej pozycji co oryginalne glifety i też odpowiadają?

Obraz z proponowanej poprawki na nim ...

Zmiany dokonane w kodzie jakim jest dodanie css i img reagujący w klasie karuzeli kontroluje siebie.

------------- transparent ---------------- */

.banner_fluid { 
    padding-left:0; 
    padding-right:0; 
} 

.carousel-control { 
    position: absolute; 
    top: 50%; /* pushes the icon in the middle of the height */ 
    z-index: 5; 
    display: inline-block; 

}

Inny Kod, który wypróbowałem dał efekt dobrze, ale tylko w widoku pulpitu.

Answer 1

dodać to do pliku CSS:

.carousel-control { 
position: absolute; 
top: 50%; /* pushes the icon in the middle of the height */ 
z-index: 5; 
display: inline-block; 
} 

Answer 2

Opierając odpowiedź stylesenberg użytkownika, należy dodać, że kod, jednak zamiast dzwonić .carousel-control, która doprowadziłaby całą przycisk w dół 50%, zadzwoń na elemencie img. Co więcej, chciałbyś przesunąć element img w górę o 50% jego wysokości, aby był idealnie centralny.

UPDATE 1: Dodałem tłumaczyć (-50%, -50%), aby przesunąć przyciski w lewo, jeśli nie, zostaną one przesunięte o element <span>.

.carousel-control > span > img{   
    position: absolute; 
    /*set position of image from top to be 50%...*/ 
    top: 50%; 
    /*and then shift it down to make it perfectly center.*/ 
    transform: translate(-50%, -50%); 

    z-index: 5; 
    display: inline-block; 
} 

Aktualizacja 2: Właśnie zdałem sobie sprawę, że może to być znacznie prostsze. Ponieważ używasz niestandardowych strzałek suwaka, element <span> jest niepotrzebny. Tak, kod html może być po prostu:

<a class="left carousel-control" href="https://getbootstrap.com/examples/carousel/#myCarousel" role="button" data-slide="prev"> 
    <img src="chevron-left.png" /> 
</a> 

<a class="right carousel-control" href="https://getbootstrap.com/examples/carousel/#myCarousel" role="button" data-slide="next"> 
    <img src="chevron-right.png" /> 
</a> 

i po prostu usunąć „rozpiętość” z css.