cursore carosello frecce personalizzati bootstrap

Question

Va bene

sto usando bootstrap cursore giostra, ma con immagini personalizzate al posto delle glyphicons di cui è dotata.

Il problema tuttavia è che sono posizionati verso i bordi del cursore. In alto a sinistra per la freccia sinistra e in alto a destra per l'immagine giusta.

Ho provato a modificare la posizione, che funziona, ma non rimane nella loro posizione quando la finestra viene ridimensionata. E non so dove indirizzare il codice in modo che il codice ignori quell'ombra che appare quando passa il mouse sopra la freccia.

Questo è l'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> 

Stavo utilizzando gli strumenti di sviluppo per un rapido sguardo e tester per diverse opzioni. La posizione assoluta non funziona. C'è un altro modo per farlo, quindi appaiono nella stessa posizione dei glyphicon originali e rispondono anche loro?

Immagine con la correzione suggerita su di esso ...

Le modifiche apportate nel codice finora è l'aggiunta di CSS e img-reattiva nella classe della giostra si controlla.

------------- bandiera ---------------- */

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

}

L'altro il codice che ho provato tutti ha dato un buon risultato ma solo nella visualizzazione desktop.

Answer 1

aggiungere questo nel vostro file CSS:

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

Answer 2

Basandosi sulle risposta di stylesenberg, si dovrebbe aggiungere che il codice, però, invece di chiamare .carousel-controllo, che avrebbe spinto il pulsante di tutto il calo del 50%, chiamata invece sull'elemento img. Inoltre, vorrai spostare l'elemento img fino al 50% della sua altezza in modo che sia perfettamente centrato.

UPDATE 1: Ho aggiunto translate (-50%, -50%) in modo da spostare i pulsanti a sinistra se non saranno spostati dall'elemento <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; 
} 

Aggiornamento 2: Ho appena realizzato che può essere reso molto più semplice. Poiché si utilizzano frecce di scorrimento personalizzate, l'elemento <span> non è necessario. Quindi, il tuo codice html può essere semplicemente:

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

e rimuovere solo "span" dal css.