Up Remember the OnirismDown Remember the Onirism
Forum d'entraide à la création de projets & de Libre service

Slideshow de l'enfer

" Lyo
le 20.01.18 12:09
Hey :face:

Je suis une bouse en codage, mais je bidouille parce que j'ai pas le choix. Sauf que j'ai voulu installer un slideshow sur la PA de mon forum et que ça ne fait rien du tout, huhu. Et je ne comprends pas pourquoi. Si quelqu'un pouvait m'expliquer comment ça fonctionne, que je puisse à l'avenir ajouter/supprimer des slides sans crier au secours, ce serait ben chouette.
Il se peut que les codes ci-dessous vous trouent vos yeux de codeurs aguerris, mais c'est parce que j'ai farfouillé pour tenter de faire fonctionner la bestiole, sans grand succès. Sorry nééh.

Voici le lien du forum en question : http://caelestesin.forumactif.com/
Le code du slideshow en question :
Code:
<div id="slideshow">
                                                                                                                                                            
 <ul id="sContent">
                                                                                                                                                          
 <!--                                                                              
                                                                               -->                                                                              
 <li>
                                                                              <img alt="new1" src="https://zupimages.net/up/18/03/253r.png" />                                                                              
 </li>
                                                                                                                                                          
 <!--                                                                              
                                                                               -->                                                                              
 <li>
                                                                              <img alt="new2" src="https://zupimages.net/up/18/03/5sv9.png" />                                                                              
 </li>
                
 <!--                                                                              
                                                                               -->                                                                              
 <li>
                                                                              <img alt="new3" src="https://zupimages.net/up/18/03/dxyd.png" />                                                                              
 </li>
                                                                                                                                                            
 </ul>
                                                                                                                                                          
</div>

Le code CSS du slideshow :
Code:
#slideshow {
 position: relative;
 width: 950px;
 height: 100px;
 margin:  0px auto;
 overflow: hidden;
}

#sContent li {
 display: inline;
}

#sContent {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 margin: 0;            
 padding: 0;
 
 /*CSS3 keyframes animation*/
 animation : AutoSlide 14s ease-in-out infinite;
  -webkit-animation :AutoSlide 14s ease-in-out infinite;
  -moz-animation: AutoSlide 14s ease-in-out infinite;
}

keyframes AutoSlide {
    0% {
        left: 0px; /*1ère image*/
    }
    15% {
        left: 0px; /*idem pour attente*/
    }
    30% {
        left: -100%; /*2ème image*/
    }
    45% {
        left: -100%; /*idem pour attente*/
    }
    60% {
        left: -200%; /*3ème image*/
    }
    75% {
        left: -200%; /*idem pour attente*/
    }
      90% {
        left: -300%; /*3ème image*/
    }
    100% {
        left: -300%; /*idem pour attente*/
    }
}

@-moz-keyframes AutoSlide {
    0% {
        left: 0px; /*1ère image*/
    }
    15% {
        left: 0px; /*idem pour attente*/
    }
    30% {
        left: -100%; /*2ème image*/
    }
    45% {
        left: -100%; /*idem pour attente*/
    }
    60% {
        left: -200%; /*3ème image*/
    }
    75% {
        left: -200%; /*idem pour attente*/
    }
      90% {
        left: -300%; /*3ème image*/
    }
    100% {
        left: -300%; /*idem pour attente*/
    }
}


@-webkit-keyframes AutoSlide {
    0% {
        left: 0px; /*1ère image*/
    }
    15% {
        left: 0px; /*idem pour attente*/
    }
    30% {
        left: -100%; /*2ème image*/
    }
    45% {
        left: -100%; /*idem pour attente*/
    }
    60% {
        left: -200%; /*3ème image*/
    }
    75% {
        left: -200%; /*idem pour attente*/
    }
      90% {
        left: -300%; /*3ème image*/
    }
    100% {
        left: -300%; /*idem pour attente*/
    }
}
avatar
Mon projet :

Messages : 33

LS Graphiques : 0

LS Codage : 0

Songes : 135

Membre


le 20.01.18 13:03
Honnêtement j'y connais pas grand chose en slider, mais je peux te refiler le code que j'utilise si tu veux en attendant que quelqu'un de plus calé arrive ?

Slider image + texte

CSS
Code:
/* Slider */

.slideshow, .slide {
  width: 310px;
  height: 140px;
}

.slideshow img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.slideshow h2, .slideshow h3, .slideshow a{
  position: relative;
  z-index: 2;
  text-align: center;
  color: #e4dea1;
  text-transform: capitalize;
}

.slideshow h2 {
  font-family: 'Tangerine', cursive;
  font-size: 24px;
  margin-top: 8%;
}

.slideshow h3 {
  font-size: 12px;
  color: #4a371f;
}

.slideshow a {
  font-family: cambria;
  font-size: 14px;
  text-transform: uppercase;
}

.slideshow {
  margin: 0;
  overflow: hidden;
  background: rgba(0,0,0,0.3);
  position: relative;
}

.slideshow div {
  position: relative;
  top: 0;
  left: 0;
}
 
.slide {
  margin: auto;
  overflow: auto;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  color: white;
}

.slide p {
  margin: 10px;
  text-align: justify;
}

#contenu_slide_pa {
  background: url('https://img4.hostingpics.net/pics/853136FondNews.png');
  width: 310px;
  padding: 10px;
  text-transform: uppercase;
  text-align: center;
  color: #e4dea1;
  font-family: cambria;
  font-size: 15px;
}

HTML
Code:
<!--            Slideshow infini horizontal            -->             
      <div id="slideshow" class="slideshow">
                                                  
         <div id="slideshow-container">
                                                               
            <div class="slide">
                                                                            
               <h2>
                                            Titre de la New                       
               </h2>
                                                    
               <h3>
                                        12.05.2017                   
               </h3><a target="_blank" href="#">En savoir + / Résumé</a>                <img src="https://img4.hostingpics.net/pics/531878imgnew.png" alt="new1" />                           
            </div>
                                                                   
            <div class="slide">
                                                                            
               <h2>
                                            Titre de la New 2                   
               </h2>
                                                    
               <h3>
                                        12.05.2017                   
               </h3><a target="_blank" href="#">En savoir + / Résumé</a>                <img src="https://img4.hostingpics.net/pics/758500imgnew2.png" alt="new2" />                                 
            </div>
                                                                       
            <div class="slide">
                                                                            
               <h2>
                                            Titre de la New 3                     
               </h2>
                                                    
               <h3>
                                        12.05.2017                   
               </h3><a target="_blank" href="#">En savoir + / Résumé</a>                <img src="https://img4.hostingpics.net/pics/531878imgnew.png" alt="new1" />                   
            </div>
                                                                                                 
            <!--           
            Vous pouvez ajouter autant de slides que possible avec le template suivant :
         
            <div class="slide">
                --- votre contenu ici ---
            </div>
                    -->                     
         </div>
                                        
      </div>

Javascript
Code:
$(function () {
    //VARIABLES MODIFIABLES
    var delaiSwitch    = 5000;                    // Délai (en ms) d'affichage d'un slide
    var delaiTransition = 1000;                    // Délai (en ms) de l'animation de transition
    var direction      = 'left';                  // Sens (left ou right) du défilement
    var idSlideshow    = '#slideshow';            // ID du slideshow
    var idContainer    = '#slideshow-container';  // ID du container
 
    //VARIABLES SYSTEME
    var slideshowWidth  = parseInt($(idSlideshow).css('width'));
    var slideshowHeight  = parseInt($(idSlideshow).css('height'));
    var nbSlides        = $(idContainer+' > .slide').length;
 
    //ADAPTE LA TAILLE DU CONTENEUR AU NOMBRE DE BLOCS QU'IL CONTIENT
    $(idContainer).css('width', slideshowWidth*nbSlides+'px');

     
    //REDEFINIT LE CONTENU POUR SUPPRIMER LES EVENTUELS ECARTS DUS AUX BORDERS
    if(direction==='right') {
        var decalageLeft = -slideshowWidth*(nbSlides-1);
        $(idContainer).css('left', decalageLeft+'px');
     
        $(idContainer+' > .slide').each(function() {
            var el = $(this).remove();
            $(idContainer).prepend(el);
        }, this);
    } else {
        $(idContainer+' > .slide').each(function() {
            var el = $(this).remove();
            $(idContainer).append(el);
        }, this);
    }
 
    //ADAPTE LA TAILLE DES IMAGES AUX DIMENSIONS DU SLIDESHOW
    $(idSlideshow+' img').css('max-width', slideshowWidth);
    $(idSlideshow+' img').css('max-height', slideshowHeight);
 
    //LANCEMENT DE L'ANIMATION
    setInterval(function() {
        slideshow()
    }, delaiSwitch);
 
    //FONCTION DE DEFILEMENT
    function slideshow() {
        var compteur = 0;      // Compte les slides ayant bougé
     
        if(direction==='right') {
            $(idContainer+' > .slide').animate({left: '+='+slideshowWidth}, delaiTransition, function() {
                compteur++;
             
                // Lorsque le dernier slide à bougé, on crée la boucle
                if(compteur===nbSlides) {
                    var el = $(idContainer+' > .slide:last').remove();
                    $(idContainer).prepend(el);
                    $(idContainer+' > .slide').css('left', '0');
                 
                    compteur = 0;
                }
            });
        } else {
            $(idContainer+' > .slide').animate({left: '-='+slideshowWidth}, delaiTransition, function() {
                compteur++;
             
                // Lorsque le dernier slide à bougé, on crée la boucle
                if(compteur===nbSlides) {
                    var el = $(idContainer+' > .slide:first').remove();
                    $(idContainer).append(el);

                    $(idContainer+' > .slide').css('left', '0');
                 
                    compteur = 0;
                }
            });
        }     
    }
});


Slider image uniquement

HTML
Code:
<div class="slideshow" id="slideshow">
                                                             
      <div id="slideshow-container">
                                                                                                                          
         <div class="slide">
                                                                        <a href="http://www.remember-the-onirism.com/t405-la-version-2-est-la#1793">                                          <img alt="La V2 Remember the Onirism" src="https://i.imgur.com/vXAPT1l.jpg" />                                                                </a>                           
         </div>
                                                                                                                          
         <div class="slide">
                                                                        <a href="http://remember-the-onirism.forumactif.com/t240-recapitulatif-des-animations">                                          <img alt="Noël arrive ! Remember the Onirism" src="https://i.imgur.com/pxW1pzO.jpg" />                                                                </a>                           
         </div>
                                                                                                                                          
         <div class="slide">
                                                                        <a href="http://remember-the-onirism.forumactif.com/t89-recrutement-ouvert-o#184">                                          <img alt="Recrutement ouvert, Remember the Onirism" src="https://i.imgur.com/wpJ7skt.jpg" />                                                                </a>                               
         </div>
                                                                                                
         <div class="slide">
                                                                        <a href="http://remember-the-onirism.forumactif.com/t35-ouverture-du-forum#41">                                          <img alt="Ouverture Remember the Onirism" src="https://i.imgur.com/jJXhuK7.png" />                                                                </a>                             
         </div>
                                                    
      </div>
                                                                                       
   </div>

CSS
Code:
/* SLIDE */

.slideshow, .slide {
  width: 335px;
  height: 146px;
}

.slideshow img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.slideshow {
    margin: 0;
    overflow: hidden;
    position: relative;
    border: 1px solid #352536;
    float: left;
    margin: 0 3.5% 0 8%;
}

.slideshow div {
  position: relative;
  top: 0;
  left: 0;
}
 
.slide {
  margin: auto;
  overflow: auto;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  color: white;
}

/* FIN SLIDE */

Javascript
Code:
$(function () {
    //VARIABLES MODIFIABLES
    var delaiSwitch    = 5000;                    // Délai (en ms) d'affichage d'un slide
    var delaiTransition = 1000;                    // Délai (en ms) de l'animation de transition
    var direction      = 'left';                  // Sens (left ou right) du défilement
    var idSlideshow    = '#slideshow';            // ID du slideshow
    var idContainer    = '#slideshow-container';  // ID du container
 
    //VARIABLES SYSTEME
    var slideshowWidth  = parseInt($(idSlideshow).css('width'));
    var slideshowHeight  = parseInt($(idSlideshow).css('height'));
    var nbSlides        = $(idContainer+' > .slide').length;
 
    //ADAPTE LA TAILLE DU CONTENEUR AU NOMBRE DE BLOCS QU'IL CONTIENT
    $(idContainer).css('width', slideshowWidth*nbSlides+'px');

     
    //REDEFINIT LE CONTENU POUR SUPPRIMER LES EVENTUELS ECARTS DUS AUX BORDERS
    if(direction==='right') {
        var decalageLeft = -slideshowWidth*(nbSlides-1);
        $(idContainer).css('left', decalageLeft+'px');
     
        $(idContainer+' > .slide').each(function() {
            var el = $(this).remove();
            $(idContainer).prepend(el);
        }, this);
    } else {
        $(idContainer+' > .slide').each(function() {
            var el = $(this).remove();
            $(idContainer).append(el);
        }, this);
    }
 
    //ADAPTE LA TAILLE DES IMAGES AUX DIMENSIONS DU SLIDESHOW
    $(idSlideshow+' img').css('max-width', slideshowWidth);
    $(idSlideshow+' img').css('max-height', slideshowHeight);
 
    //LANCEMENT DE L'ANIMATION
    setInterval(function() {
        slideshow()
    }, delaiSwitch);
 
    //FONCTION DE DEFILEMENT
    function slideshow() {
        var compteur = 0;      // Compte les slides ayant bougé
     
        if(direction==='right') {
            $(idContainer+' > .slide').animate({left: '+='+slideshowWidth}, delaiTransition, function() {
                compteur++;
             
                // Lorsque le dernier slide à bougé, on crée la boucle
                if(compteur===nbSlides) {
                    var el = $(idContainer+' > .slide:last').remove();
                    $(idContainer).prepend(el);
                    $(idContainer+' > .slide').css('left', '0');
                 
                    compteur = 0;
                }
            });
        } else {
            $(idContainer+' > .slide').animate({left: '-='+slideshowWidth}, delaiTransition, function() {
                compteur++;
             
                // Lorsque le dernier slide à bougé, on crée la boucle
                if(compteur===nbSlides) {
                    var el = $(idContainer+' > .slide:first').remove();
                    $(idContainer).append(el);

                    $(idContainer+' > .slide').css('left', '0');
                 
                    compteur = 0;
                }
            });
        }     
    }
});

Personnellement je préfère le second, beaucoup plus simple d'utilisation.

avatar
Mon projet : Aucun

Messages : 806

LS Graphiques : 0

LS Codage : 75

LS Projets : 4

Songes : 2169

Spécialité : Codage

Fondatrice


" Lyo
le 20.01.18 13:27
Owwh merci beaucoup Halloween, tu viens de sauver mes annonces PA ♥️
Ton code marche du tonnerre de Brest !

Du coup mon petit problème est résolu, thanks. Mais si quelqu'un se dévoue pour m'expliquer la chose, je suis toute yeux-ouïe.
avatar
Mon projet :

Messages : 33

LS Graphiques : 0

LS Codage : 0

Songes : 135

Membre


le 20.01.18 13:44
De rien :)

Je laisse ouvert du coup si jamais \o/

avatar
Mon projet : Aucun

Messages : 806

LS Graphiques : 0

LS Codage : 75

LS Projets : 4

Songes : 2169

Spécialité : Codage

Fondatrice


le 20.01.18 23:39
Yop o/

Je viens pour t'expliquer pourquoi ton code ne fonctionne pas actuellement !
Tu as mis, à juste titre, une animation qui permet de créer se décalage sur la gauche.
Le problème étant que :
• Tu as une div avec un id slideshow qui contient tout le reste
• Tu as une liste non ordonnée avec un id sContent qui contient tes images que tu positionnes en absolute
• Tes list-items en inline pour qu'ils soient tous "les uns à côté des autres"

Sauf que tu mets ton animation sur la liste non-ordonnée (#sContent). Ce qui fait que TOUT ce qui contient tes images est déplacé vers la gauche à chaque fois. Je pense que tu es parti sur le mauvais modèle avec ce position: absolute et ce position relative.

Voici un fixe que j'ai fait et que je t'explique :

Code:

      #slideshow{
         width: 950px;
         height: 100px;
         margin:  0px auto;
         overflow: hidden;
      }


      #sContent {
         display: flex;
         height: 100px;
         margin: 0;
         padding: 0;

         /*CSS3 keyframes animation*/
         animation : AutoSlide 14s ease-in-out infinite;
         -webkit-animation :AutoSlide 14s ease-in-out infinite;
         -moz-animation: AutoSlide 14s ease-in-out infinite;
      }


      keyframes AutoSlide {
          0% {
              margin-left: 0px; /*1ère image*/
          }
          15% {
              margin-left: 0px; /*idem pour attente*/
          }
          30% {
              margin-left: -100%; /*2ème image*/
          }
          45% {
              margin-left: -100%; /*idem pour attente*/
          }
          60% {
              margin-left: -200%; /*3ème image*/
          }
          75% {
              margin-left: -200%; /*idem pour attente*/
          }
          80% {
              margin-left: -100%; /*2ème image*/
          }
          85% {
              margin-left: -100%; /*2ème image*/
          }
          90% {
              margin-left: 0%; /*2ème image*/
          }
          100% {
              margin-left: 0%; /*2ème image*/
          }
         
      }

      @-moz-keyframes AutoSlide {
          0% {
              margin-left: 0px; /*1ère image*/
          }
          15% {
              margin-left: 0px; /*idem pour attente*/
          }
          30% {
              margin-left: -100%; /*2ème image*/
          }
          45% {
              margin-left: -100%; /*idem pour attente*/
          }
          60% {
              margin-left: -200%; /*3ème image*/
          }
          75% {
              margin-left: -200%; /*idem pour attente*/
          }
          80% {
              margin-left: -100%; /*2ème image*/
          }
          85% {
              margin-left: -100%; /*2ème image*/
          }
          90% {
              margin-left: 0%; /*2ème image*/
          }
          100% {
              margin-left: 0%; /*2ème image*/
          }
      }


      @-webkit-keyframes AutoSlide {
          0% {
              margin-left: 0px; /*1ère image*/
          }
          15% {
              margin-left: 0px; /*idem pour attente*/
          }
          30% {
              margin-left: -100%; /*2ème image*/
          }
          45% {
              margin-left: -100%; /*idem pour attente*/
          }
          60% {
              margin-left: -200%; /*3ème image*/
          }
          75% {
              margin-left: -200%; /*idem pour attente*/
          }
          80% {
              margin-left: -100%; /*2ème image*/
          }
          85% {
              margin-left: -100%; /*2ème image*/
          }
          90% {
              margin-left: 0%; /*2ème image*/
          }
          100% {
              margin-left: 0%; /*2ème image*/
          }
      }

Le display: flex permet d'aligner tous les éléments de la liste les uns à côté des autres. A partir de là, il ne suffit que de remplacer les left par des margin-left dans tes animations. Je me suis permis de modifier l'animation mais tu peux en faire à ta guise, le modèle est là !

Si tu as d'autres questions, n'hésites pas =)
Taktiik.
avatar
Mon projet : [URL=ADRESSE][/URL]

Messages : 35

LS Graphiques : 0

LS Codage : 0

Songes : 41

TicTac


" Lyo
le 30.01.18 7:56
Merci beaucoup pour cette explication !
Je la garde sous le coude comme j'ai une cervelle de moineau niark https://imgfast.net/
avatar
Mon projet :

Messages : 33

LS Graphiques : 0

LS Codage : 0

Songes : 135

Membre


le 30.01.18 12:56
Merci Tictac, j'archive donc \o/

avatar
Mon projet : Aucun

Messages : 806

LS Graphiques : 0

LS Codage : 75

LS Projets : 4

Songes : 2169

Spécialité : Codage

Fondatrice



Vous ne pouvez pas répondre aux sujets dans ce forum

Partenaires