Carousel

fdawch Messages postés 51 Date d'inscription Statut Membre Dernière intervention -
fdawch Messages postés 51 Date d'inscription Statut Membre Dernière intervention - 8 févr. 2018 à 13:33

Bonjour

SVP je veux faire deux carousel dans une page.
vous trouverez mon code, merci bien de me guider pour le corrige.

Cordialement

<?php
@session_start();

$cnx = @mysql_connect( "localhost", "root", "" );
$db= @mysql_select_db( "cneree" );
$sql = "SELECT * FROM partners ORDER BY id_partners	";
$requete = @mysql_query( $sql, $cnx ) or die( "ERREUR MYSQL numéro: ".mysql_errno()."<br>Type de cette erreur: ".mysql_error()."<br>\n" );
?>

<!doctype html>
<html>
<head>
        <meta charset="utf-8">
        <!-- Bootstrap core CSS -->
        <link href="public/website/theme-1/css/bootstrap.min.css" rel="stylesheet">
        <!-- Custom styles for this template -->
        <link href="public/website/theme-1/css/main.css"   rel="stylesheet">
    </head>

<body style="background-color: #EBEBEB">
<section id="partners">
	<div class="bloc-slide-annonce bg-7">
           <div class="main text-center">
                <h1 style="font-family: Tungsten-Medium; font-size: 30px;">Nos partenaires</h1>
            </div>
            <br><br>
            <div class="slide-annonce">     
                   <?php
					while( $result = mysql_fetch_array( $requete ) )
					{
					 ?>
                        <a href="<?php echo($result["lien"]."\n" ); ?>"><?php echo '<div align=\"center\"><img src="gestion/upload/partenaires/' .$result["image"].'"></div>';?> </a>
                   <?php } ?>     
            </div>
                  <br><br> 
        </div>
</section> <br><br>

 <section id="partners">
	<div class="bloc-slide-annonce bg-7">
           <div class="main text-center">
                <h1 style="font-family: Tungsten-Medium; font-size: 30px;">Nos partenaires</h1>
            </div>
            <br><br>
            <div class="slide-annonce">     
                   <?php
					while( $result = mysql_fetch_array( $requete ) )
					{
					 ?>
                        <a href="<?php echo($result["lien"]."\n" ); ?>"><?php echo '<div align=\"center\"><img src="gestion/upload/partenaires/' .$result["image"].'"></div>';?> </a>
                   <?php } ?>     
            </div>
                  <br><br> 
        </div>
</section>  
</body>

        <!-- jquery marquee -->
        <script type="text/javascript" src="public/website/theme-1/js/jquery.marquee.js"></script>
        <script>
            /* Slide annonce */
            var $mq = $('.slide-annonce').marquee({
                        duration: 10000,
                        gap: 50,
                        delayBeforeStart: 0,
                        direction: 'left',
                        duplicated: true
                    });
            // Pause
            $('.slide-annonce').mouseover(function(){
              $mq.marquee('pause');
            });
            // Resume
            $('.slide-annonce').mouseout(function(){
              $mq.marquee('resume');
            }); 
        </script> 

</html>

Afficher la suite

A voir également:

Supprimer fond d'écran carousel
Supprimer rond bleu whatsapp - Guide
Double ecran - Guide
Comment mettre une vidéo en fond d'écran - Guide
Supprimer une page word - Guide
Capture d'écran whatsapp - Accueil - Messagerie instantanée

3 réponses

Réponse 1 / 3

totodunet Messages postés 1377 Date d'inscription Statut Membre Dernière intervention 200

salut,

as-tu debuguer pour voir exactement où se situe le problème ? Les liens et nom de tes images sont-ils bien reçues ? probleme de code JS ? probleme dans les boucles d'affichage des resultats SQL ?

Réponse 2 / 3

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

Bonjour,

Avant tout.... Attention, l'extension mysql était obsolète en PHP 5.5.0, et a été supprimée en PHP 7.0.0.
https://www.commentcamarche.net/faq/43261-php-l-extension-mysql-est-obsolete#top

À la place, tu peux (<gras DOIS </gras> ) utiliser l'extension MySQLi ou l'extension PDO_MySQL
https://www.commentcamarche.net/faq/44117-connexion-a-une-base-avec-pdo-mysqli

Si tu choisis PDO, pense à activer la gestion des erreurs : https://forums.commentcamarche.net/forum/affich-37584941-php-pdo-gerer-les-erreurs

fdawch Messages postés 51 Date d'inscription Statut Membre Dernière intervention 1

Bonjour jordane45

je ne sais pas ou es le problème, je veux quel soit carrousel dynamique comme ce exemple
https://bootsnipp.com/snippets/kE4g

Cordialement

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752 > fdawch Messages postés 51 Date d'inscription Statut Membre Dernière intervention

Oui oui.... mais .... commence donc pas appliquer les changements que je t'ai indiqué ... et si le souci persiste revient nous voir avec ton code corrigé.

fdawch Messages postés 51 Date d'inscription Statut Membre Dernière intervention 1

Je crois que le problème dans la boucle while, et je sais pas comment le corrige

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752 > fdawch Messages postés 51 Date d'inscription Statut Membre Dernière intervention

Comme indiqué dans mon message précédent :

revient nous voir avec ton code corrigé

Autrement-dit .... colles nous ton code (en l'ayant modifié pour tenir compte de nos précédentes remarques avant bien entendu...)

NB : Pour poster du code sur le forum.. merci d'utiliser la coloration syntaxique (les balises de code).
Explications disponibles ici : https://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code

fdawch Messages postés 51 Date d'inscription Statut Membre Dernière intervention 1

Bonjour jordane45
Vous trouverez le code html souhaité et le code php erroné
Merci beaucouq de votre aide

HTML Code

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document sans titre</title>
<style>
/* carousel */
.media-carousel 
{
  margin-bottom: 0;
  padding: 0 40px 30px 40px;
  margin-top: 30px;
}
/* Previous button  */
.media-carousel .carousel-control.left 
{
  left: -12px;
  background-image: none;
  background: none repeat scroll 0 0 #222222;
  border: 4px solid #FFFFFF;
  border-radius: 23px 23px 23px 23px;
  height: 40px;
  width : 40px;
  margin-top: 30px
}
/* Next button  */
.media-carousel .carousel-control.right 
{
  right: -12px !important;
  background-image: none;
  background: none repeat scroll 0 0 #222222;
  border: 4px solid #FFFFFF;
  border-radius: 23px 23px 23px 23px;
  height: 40px;
  width : 40px;
  margin-top: 30px
}
/* Changes the position of the indicators */
.media-carousel .carousel-indicators 
{
  right: 50%;
  top: auto;
  bottom: 0px;
  margin-right: -19px;
}
/* Changes the colour of the indicators */
.media-carousel .carousel-indicators li 
{
  background: #c0c0c0;
}
.media-carousel .carousel-indicators .active 
{
  background: #333333;
}
.media-carousel img
{
  width: 250px;
  height: 100px
}
/* End carousel */	
</style>

<script>
$(document).ready(function() {
  $('#media').carousel({
    pause: true,
    interval: false,
  });
});	
</script>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
<div class="container">
  <div class='row'>
    <div class='col-mda-8'>
      <div class="carousel slide media-carousel" id="media">
        <div class="carousel-inner">
          <div class="item  active">
            <div class="row">
              <div class="col-md-2">
                <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
              </div>          
              <div class="col-md-2">
                <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
              </div>
              <div class="col-md-2">
                <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
              </div>
              <div class="col-md-2">
                <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
              </div>
              <div class="col-md-2">
                <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
              </div>  
              <div class="col-md-2">
                <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
              </div>            
            </div>
          </div>
          <div class="item">
            <div class="row">
              <div class="col-md-2">
                <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
              </div>          
              <div class="col-md-2">
                <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
              </div>
              <div class="col-md-2">
                <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
              </div>
              <div class="col-md-2">
                <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
              </div>
              <div class="col-md-2">
                <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
              </div>  
              <div class="col-md-2">
                <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
              </div>            
            </div>
          </div>
        </div>
        <a data-slide="prev" href="#media" class="left carousel-control">‹</a>
        <a data-slide="next" href="#media" class="right carousel-control">›</a>
      </div>                          
    </div>
  </div>
  
  
</div>
</body>
</html>

PHP Code

<?php
@session_start();
$cnx = @mysql_connect( "localhost", "root", "" );
$db= @mysql_select_db( "name" );
$sql = "SELECT * FROM partners ORDER BY id_partners	";
$requete = @mysql_query( $sql, $cnx ) or die( "ERREUR MYSQL numéro: ".mysql_errno()."<br>Type de cette erreur: ".mysql_error()."<br>\n" );
?>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document sans titre</title>
<style>
/* carousel */
.media-carousel 
{
  margin-bottom: 0;
  padding: 0 40px 30px 40px;
  margin-top: 30px;
}
/* Previous button  */
.media-carousel .carousel-control.left 
{
  left: -12px;
  background-image: none;
  background: none repeat scroll 0 0 #222222;
  border: 4px solid #FFFFFF;
  border-radius: 23px 23px 23px 23px;
  height: 40px;
  width : 40px;
  margin-top: 30px
}
/* Next button  */
.media-carousel .carousel-control.right 
{
  right: -12px !important;
  background-image: none;
  background: none repeat scroll 0 0 #222222;
  border: 4px solid #FFFFFF;
  border-radius: 23px 23px 23px 23px;
  height: 40px;
  width : 40px;
  margin-top: 30px
}
/* Changes the position of the indicators */
.media-carousel .carousel-indicators 
{
  right: 50%;
  top: auto;
  bottom: 0px;
  margin-right: -19px;
}
/* Changes the colour of the indicators */
.media-carousel .carousel-indicators li 
{
  background: #c0c0c0;
}
.media-carousel .carousel-indicators .active 
{
  background: #333333;
}
.media-carousel img
{
  width: 250px;
  height: 100px
}
/* End carousel */	
</style>

<script>
$(document).ready(function() {
  $('#media').carousel({
    pause: true,
    interval: false,
  });
});	
</script>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
<div class="container">
  <div class='row'>
    <div class='col-mda-8'>
      <div class="carousel slide media-carousel" id="media">
        <div class="carousel-inner">
         
          <div class="item active">
            <div class="row">
<?php
while( $result = mysql_fetch_array( $requete ) )
{
	@$i++;
if($i==1){
?>
              <div class="col-md-2">
                <a href="<?php echo($result["lien"]."\n" ); ?>"><?php echo '<div align=\"center\"><img src="gestion/upload/partenaires/' .$result["image"].'"></div>';?> </a>
              </div>  
<?php $i++; }else{ ?>  
              <div class="col-md-2">
                <a href="<?php echo($result["lien"]."\n" ); ?>"><?php echo '<div align=\"center\"><img src="gestion/upload/partenaires/' .$result["image"].'"></div>';?> </a>
              </div>
              
<?php } } ?>              
                 
            </div>
          </div>
        </div>
        <a data-slide="prev" href="#media" class="left carousel-control">‹</a>
        <a data-slide="next" href="#media" class="right carousel-control">›</a>
      </div>                          
    </div>
  </div>
  
  
</div>
</body>
</html>

Réponse 3 / 3

Kuartz Messages postés 852 Date d'inscription Statut Membre Dernière intervention 61

Bonjour,

Tout d'abord, comme jordane45, je te déconseille fortement l'utilisation des fonctions mysqli.

Aujourd'hui, les objets de la classe PDO permettent des requêtes sécurisées, optimisées et des traitements incroyables par la suite grâce aux méthodes proposées.

Si je relis ton code et ton erreur, elle vient du fait que la variable qui initie ta base de données ($bdd) n'existe pas. Du coup, je te conseille dans un premier temps de ne laisser que le code jusqu'au echo de l'erreur de bdd et de supprimer tout le reste. Cela te permettra de voir si déjà la connexion à la bdd est OK.

Cordialement.

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

Hello
Il a déjà corrigé cette erreur : https://forums.commentcamarche.net/forum/affich-35098976-carousel#2

fdawch Messages postés 51 Date d'inscription Statut Membre Dernière intervention 1

Bonjour

SVP je veux un code pour ce carousel, j'ai déjà fait des corrections mais sans résultats.

Cordialement

Kuartz Messages postés 852 Date d'inscription Statut Membre Dernière intervention 61 > fdawch Messages postés 51 Date d'inscription Statut Membre Dernière intervention

Bonjour,

J'ai gardé ton code qui pour moi est parfaitement illisible. Mais voilà ce que ça peut donner, à tester :

<?php

ini_set('display_errors', 1);

try
{
    $bdd = new PDO('mysql:host=localhost;dbname=cneree;charset=utf8', 'root', '');
    array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION);
}
catch(Exception $e)
{
    die('Erreur: ' . $e->getMessage());
}

$req = $bdd->query("SELECT * FROM partners ORDER BY id_partners");

?>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document sans titre</title>
<style>
/* carousel */
.media-carousel 
{
  margin-bottom: 0;
  padding: 0 40px 30px 40px;
  margin-top: 30px;
}
/* Previous button  */
.media-carousel .carousel-control.left 
{
  left: -12px;
  background-image: none;
  background: none repeat scroll 0 0 #222222;
  border: 4px solid #FFFFFF;
  border-radius: 23px 23px 23px 23px;
  height: 40px;
  width : 40px;
  margin-top: 30px
}
/* Next button  */
.media-carousel .carousel-control.right 
{
  right: -12px !important;
  background-image: none;
  background: none repeat scroll 0 0 #222222;
  border: 4px solid #FFFFFF;
  border-radius: 23px 23px 23px 23px;
  height: 40px;
  width : 40px;
  margin-top: 30px
}
/* Changes the position of the indicators */
.media-carousel .carousel-indicators 
{
  right: 50%;
  top: auto;
  bottom: 0px;
  margin-right: -19px;
}
/* Changes the colour of the indicators */
.media-carousel .carousel-indicators li 
{
  background: #c0c0c0;
}
.media-carousel .carousel-indicators .active 
{
  background: #333333;
}
.media-carousel img
{
  width: 250px;
  height: 100px
}
/* End carousel */ 
</style>
 
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
<div class="container">
  <div class='row'>
    <div class='col-mda-8'>
      <div class="carousel slide media-carousel" id="media">
        <div class="carousel-inner">
         
          <div class="item active">
            <div class="row">

<?php
   
while($results = $req->fetch())
{ 
 @$i++;
if($i==1){
?>
              <div class="col-md-2">
                <a href="<?php echo($results["lien"]."\n" ); ?>"><?php echo '<div align=\"center\"><img src="gestion/upload/partenaires/' .$results["image"].'"></div>';?> </a>
              </div>  
<?php $i++; }else{ ?>  
              <div class="col-md-2">
                <a href="<?php echo($results["lien"]."\n" ); ?>"><?php echo '<div align=\"center\"><img src="gestion/upload/partenaires/' .$results["image"].'"></div>';?> </a>
              </div>
<?php } } ?>              
            </div>
          </div>
        </div>
        <a data-slide="prev" href="#media" class="left carousel-control">‹</a>
        <a data-slide="next" href="#media" class="right carousel-control">›</a>
      </div>                          
    </div>
  </div>
</div>

 
 <script>
$(document).ready(function() {
  $('#media').carousel({
    pause: true,
    interval: false,
  });
}); 
</script>
</body>
</html>

fdawch Messages postés 51 Date d'inscription Statut Membre Dernière intervention 1

merci Kuartz, le carrousel n'est pas dynamique :(

Discussions similaires

Fond d'écran carousel xiaomi

Enlever les fond d'ecran carousel auto du tel XIAMI 14

Impossible de changer mon fond d'écran Redmi Note 9

Problème fond d'ecran de verrouillage sur Xiaomi mi 8 lite

Votre réponse

Discussions similaires