Partage
  • Partager sur Facebook
  • Partager sur Twitter

Fixer les boutons control du carousel bootstrap

20 juillet 2017 à 21:38:45

Bonsoir, alors voilà le soucie, dans mon carousel j'affiche des images qui n'ont pas toute les mêmes dimensions, de ce fait, j'ai mes boutons de navigation (flèche droite et gauche) qui change de place à chaque changement d'image et j'aurai voulu savoir si il était possible de les fixer afin d'avoir un affichage plus homogène et éviter la sensation de saut d'image à chaque changement.  

Voici le code

<div class="row">
	<div id="my_carousel" class="carousel slide col-md-offset-1 col-md-10" data-ride="carousel" >
		<!-- Bulles -->
		<ol class="carousel-indicators">
		
<?php
$donnees=mysql::query('SELECT * FROM accueil');
 while ($donne = $donnees->fetch())
        {
			if($e==0)
			{
				?>
					<li data-target="#my_carousel" data-slide-to="<?=$e; ?>" class="active"></li>
				<?php	
				$e++;
			}
			else 
			{			
	        	
	        	?>
	        	<li data-target="#my_carousel" data-slide-to="<?=$e; ?>"></li>
				<?php	
				$e++;
			}	
		
		}
		?>
		<!-- Slides -->
		</ol>
		<div class="carousel-inner">
		<?php
		$t=0;
		$img=mysql::query('SELECT * FROM accueil');
while ($donnes = $img->fetch())
        {
        	
			
        	if ($t==0) 
        	{
        		
        		?>
        		<div class="item active">  
        		<div class="carousel-page col-md-offset-3">
				<img src="images/accueil/<?=$donnes['image']; ?>" class="img-responsive" style="margin:0px auto;" />
				</div> 
				<div class="carousel-caption"></div>
				</div>   
			
        		<?php
				$t++;
			} 
			else 
			{
				
				?>
        		<div class="item">
        		<div class="carousel-page col-md-offset-3">
				<img src="images/accueil/<?=$donnes['image']; ?>" class="img-responsive" style="margin:0px auto;" />
				</div> 
				<div class="carousel-caption"></div>
				</div>   			
        		<?php
			}
		}
?>
</div>
<!-- Contrôles -->
 		<div>
			<a class="left carousel-control" href="#my_carousel" data-slide="prev">
			<span class="glyphicon glyphicon-chevron-left"></span>
			</a>
			<a class="right carousel-control" href="#my_carousel" data-slide="next">
			<span class="glyphicon glyphicon-chevron-right"></span>
			</a>
		</div>
		</div>
</div>


j'ai bien pensé à mettre une image de fond transparente au format max mais j'aurai voulu savoir avant si il y avais pas moins lourd et mettre toute les images au même format n'est pas envisageable (déformation, pixellisation ect...)

Merci d'avance pour vos réponses.

PS : Merci de pas prendre compte de l'optimisation du code, je m'y attellerai quand celui-ci fonctionnera parfaitement.

  • Partager sur Facebook
  • Partager sur Twitter
21 juillet 2017 à 9:09:18

Salut,

Pourquoi ne pas redimensionner tes images en imposant une taille fixe dans ton css ?

  • Partager sur Facebook
  • Partager sur Twitter
21 juillet 2017 à 17:13:10

Tout simplement parce qu'il pourrais y avoir des images en format paysage, d'autre en portrait, plus ou moins grande, et définir une taille standard serai néfaste pour les images
  • Partager sur Facebook
  • Partager sur Twitter