bootstrap carrousel curseur personnalisé flèches

Bon

Je suis à l'aide d'amorces carrousel curseur, mais avec des images personnalisées au lieu de les glyphicons fourni avec l'appareil.

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

J'ai essayé de changer la position, qui fonctionne, mais ne restera pas dans leur position lorsque la fenêtre devient re de taille moyenne.
Et je ne sais pas où pour cible le code de sorte que le code ignore que l'ombre qui apparaît lorsque vous passez la souris sur 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'ai été en utilisant les outils de développement pour un rapide coup d'oeil et de test pour les différentes options. Position absolue ne fonctionne pas. Est-il un autre moyen de le faire, de sorte qu'ils apparaissent dans la même position que l'original glyphicons et de répondre trop?

Image avec le correctif proposé sur elle...

Les modifications apportées dans le code jusqu'à présent, c'est l'ajout de css et img-responsive dans la classe du carrousel contrôles eux-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é ont tous fait l'effet d'amende, mais seulement en vue du bureau.

Avez-vous oublié de poster votre code CSS ou vous venez de ne pas le faire?
Il était juste que t'css j'ai été en utilisant le faisais tout de travers.

OriginalL'auteur Reeze Cornelius | 2014-12-02

6

ajouter 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;
}
```
Ce genre de travaux. Le seul problème est que l'image de droite maintenant, ne pas attch lui-même à la droite de la fenêtre du navigateur comme celui de gauche fait... Et que gênant bootstrap de l'ombre est de montrer que la moitié.
pourriez-vous poster une capture d'écran de votre problème nouveau? et le code (si vous l'avez modifiée).

OriginalL'auteur stylesenberg
0

Bâtiment sur stylesenberg réponse, vous devez ajouter ce code, cependant, au lieu de l'appeler .carrousel de contrôle, qui pourrait pousser le bouton entier en baisse de 50%, appel sur l'élément img place. En outre, vous souhaitez déplacer l'élément img jusqu'à 50% de sa hauteur, de sorte qu'il sera parfaitement centre.

Mise à JOUR 1:
J'ai ajouté traduire(-50%, -50%) de manière à déplacer les boutons de gauche, si non ils seront compensés par la <span> élément.
```
.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 réaliser qu'il peut être beaucoup plus simple. Depuis que vous êtes à l'aide des curseurs, la <span> élément est inutile. Ainsi, votre code html peut être simplement:
```
<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 juste enlever le "span" de la css.

OriginalL'auteur Nicholas Ang

Vous devez vous connecter pour publier un commentaire.