web-dev-qa-db-fra.com

flèches personnalisées slider bootstrap carrousel

D'accord

J'utilise le curseur du carrousel de bootstraps, mais avec des images personnalisées à la place des glyphicons fournis.

Le problème, c’est qu’ils sont positionnés vers les bords du curseur. En haut à gauche pour la flèche gauche et en haut à droite pour l'image de droite.

J'ai essayé de changer la position, ce qui fonctionne, mais ne reste pas dans leur position lorsque la fenêtre est redimensionnée. Et je ne sais pas où cibler le code pour que le code ignore cette ombre qui apparaît lorsque vous survolez la flèche.

C'est le 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>

J'utilisais les outils de développement pour un aperçu rapide et un testeur pour différentes options. La position absolue ne fonctionne pas. Y a-t-il un autre moyen de le faire, afin qu'ils apparaissent dans la même position que les glyphicons d'origine et répondent aussi?

Image avec le correctif suggéré dessus ...The right seems to be only problem though.

Les modifications apportées jusqu'à présent au code consistent en l'ajout des commandes css et img-responsive dans la classe des commandes de carrousel elles-mêmes.

------------- bannière ---------------- * /

 .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’autre code que j’ai essayé a tous donné l’effet correct, mais uniquement en mode Bureau. 

htmlcsstwitter-bootstrap
7
Reeze Cornelius

ajoutez ceci dans votre fichier CSS:

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

En vous basant sur la réponse de stylesenberg, vous devriez ajouter ce code, cependant, au lieu d'appeler .carousel-control, qui enfonce le bouton au complet à 50%, appelez l'élément img. De plus, vous voudriez décaler l'élément img de 50% de sa hauteur afin qu'il soit parfaitement centré.

UPDATE 1: J'ai ajouté translate (-50%, -50%) afin de décaler les boutons à gauche sinon ils seront compensés par l'élément <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;
}

Mise à jour 2: Je viens de me rendre compte que cela peut être beaucoup plus simple. Puisque vous utilisez des flèches de curseur personnalisées, l'élément <span> est inutile. Donc, votre code HTML peut simplement être:

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

et supprimez simplement "span" du fichier css.

0
Nicholas Ang