Partagez
Voir le sujet précédentAller en basVoir le sujet suivant
avatar
PNJ - Merci de ne pas m'envoyer de MP
Féminin
Messages : 27
Date d'inscription : 04/05/2012

Ma fiche de suivi
Expérience:
100/100  (100/100)
Prestige:
60/60  (60/60)
Destinée:
20/20  (20/20)
Voir le profil de l'utilisateurhttp://antartica-rpg.actifforum.com/

SLIDESHOW HORIZONTAL INFINI de CSSActif par Espeon

le 24.04.18 18:58
Code HTML :

Code:
<!-- Slideshow infini horizontal -->
<div id="slideshow" class="slideshow">
    <div id="slideshow-container">
        <div class="slide">
            <h1>Slide 1 - Avec une image</h1>
            <img src="http://theme3.cssactif.com/logo.png" alt="CSSActif" />
        </div>
    
        <div class="slide">
            <h1>Slide 2 - Avec du texte</h1>
            <p>Cupcake ipsum dolor. Sit amet carrot cake. Pie wypas muffin I love oat cake. Gummi bears I love chocolate bar. Topping faworki I love I love dragée. I love icing tiramisu halvah fruitcake. Sweet roll danish lollipop carrot cake toffee lemon drops chocolate. I love carrot cake soufflé cookie cake tootsie roll I love. Topping I love oat cake bear claw chupa chups wypas gummies pastry toffee.</p>
        </div>
        
        <div class="slide">
            <h1>Slide 3 - Avec un texte long...</h1>
            <p>Cupcake ipsum dolor sit amet. Ice cream bonbon cookie wypas tart carrot cake. Jujubes jelly-o chocolate I love candy canes cheesecake lemon drops cake. Dessert wafer bonbon jelly-o chocolate bar gummies oat cake I love applicake. Sweet oat cake I love I love sesame snaps caramels jelly brownie I love. Cupcake halvah cheesecake cookie pastry gummi bears I love jelly beans powder. Cheesecake ice cream icing sweet I love pie macaroon tootsie roll sugar plum. Ice cream jujubes wypas apple pie sweet roll sweet roll applicake tiramisu. Cake I love pie. Powder sesame snaps toffee croissant cotton candy I love candy canes jujubes.</p>
            <p>I love jelly I love I love carrot cake halvah I love lemon drops jelly-o. Powder tootsie roll candy canes tootsie roll bear claw ice cream sweet roll toffee. Cupcake I love lemon drops sugar plum halvah topping I love chocolate marshmallow. Jelly marshmallow muffin sesame snaps apple pie cotton candy sweet roll. Marshmallow danish marshmallow tart soufflé liquorice liquorice I love. Liquorice cheesecake icing chupa chups sugar plum powder cake sweet soufflé. Jelly-o pastry chupa chups gummi bears.</p>
            <p>Brownie toffee I love sweet roll muffin I love. Wafer sweet roll bear claw dragée dragée sesame snaps sweet roll I love chocolate bar. Muffin I love dragée muffin gingerbread topping lemon drops toffee. Jelly beans cupcake toffee bear claw candy toffee I love cake.</p>
        </div>
        
        <div class="slide">
            <h1>Slide 4 - Autant que vous voulez...</h1>
            <img src="http://theme3.cssactif.com/logo.png" alt="CSSActif" />
            <p>Cupcake ipsum dolor. Sit amet bonbon. Pastry gummi bears wafer I love jujubes marzipan dragée tiramisu.</p>
        </div>
        
        <!--
            Vous pouvez ajouter autant de slides que possible avec le template suivant :
            
            <div class="slide">
                --- votre contenu ici ---
            </div>
        -->
    </div>
</div>

Code CSS:
Code:
.slideshow,
.slide {
    width: 500px;
    height: 400px;
}

.slideshow {
    margin: 0;
    overflow: hidden;
    
    background-color: black;
    
    border: 4px double white;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

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

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

Code Javascript :
Choisir l'option "sur toutes les pages du forum"
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;
                }
            });
        }        
    }
});
Voir le sujet précédentRevenir en hautVoir le sujet suivant
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum