JQuery - Glissement

Question

J'ai vu ce site web Dans ce cas, lorsque l'on clique sur les boutons "suivant" ou "précédent", différentes pages Web s'affichent. Je veux le même effet mais je n'ai pas trouvé le moyen de le faire. Pouvez-vous poster la réponse avec le code HTML, CSS et JQuery ou Javascript.

Answer 1

Ici, une seule approche !

HTML

<div id="item1" class="page"><a href="#item2">1</a></div>
<div id="item2" class="page"><a href="#item3">2</a></div>
<div id="item3" class="page"><a href="#item4">3</a></div>
<div id="item4" class="page"><a href="#item1">4</a></div>

CSS

html, body {height:100%; margin:0; overflow-y:hidden}
.page {position:absolute; width:100%; height:100%}
#item1 {left:0%; background:#222}
#item2 {left:100%; background:#444}
#item3 {left:200%; background:#666}
#item4 {left:300%; background:#888}

JS

$(function() {
    $('a[href*=#]').on('click', function(e) {
        var hash = $(this.hash).position();
        if (hash) {
            $('html, body').stop().animate({
                scrollLeft: hash.left
            }, 600, 'swing');
            e.preventDefault();
        }
    });
});

Answer 2

Il suffit de faire un super large et ensuite utiliser Javascript pour passer à la section suivante.

L'utilisation d'un cadre peut être une solution pour vous. Vérifiez ceci lien