Faire défiler une div horizontalement en utilisant des flèches au lieu du scroll classique sous wordpress

Version imprimable

11/03/2018, 21h05
Livie

Faire défiler une div horizontalement en utilisant des flèches au lieu du scroll classique sous wordpress

Bonsoir à tous,

je cherche à faire défiler une div horizontale en utilisant des flèches au lieu du scroll classique sous wordpress.

C'est la première fois que je cherche vraiment à faire du jquery, j'ai trouvé un script tout simple à ce lien: http://jsfiddle.net/kevinPHPkevin/8tLdq/

J'ai donc créé un fichier nommé scroll.js, j'ai appelé le script dans mon fichier function.php, j'ai insérer le code HTML pour afficher le bouton là ou je le souhaitai et mis en CSS.
Mais bon, j'ai dû me planter quelque part car ça ne fonctionne pas :/

Est-ce parce que ce script que j'ai trouvé ne peut marcher que pour une div verticale ?

Voici un screenshot du site, je travaille en local donc je n'ai pas lien à partager
https://zupimages.net/up/18/10/wqhx.jpg

Voilà donc juste si quelqu'un peut me dire si je me suis trompée quelque part ou si j'essaye en vain car script pas adapté.

Merci d'avance !

tu y était presque, en jQuery un scroll vertical peut se gérer avex la méthode scrollTop() comme tu l'a découvert.

mais horizontalement, le référentiel se base sur le décalage à gauche, cad par la méthode scrollLeft() => https://api.jquery.com/scrollLeft/

mais le plus pratique (et le plus fiable) que ce soit verticalement ou horizontalement c'est d'en passer par la méthode animate() => https://api.jquery.com/animate/
Code:

1 2 3 4 5 6 7 8 9 10 $("#left").click(function () { $("#cont").animate({ left: '-=50' }, 'slow'); }); $("#right").click(function () { $('#cont').animate({ left: '+=50' }, 'slow'); });
un autre exemple => http://jsfiddle.net/gabrieleromanato/afzVe/

Bonsoir psychadelic !

Merci beaucoup de ta réponse !
Je me suis dit "chouette je peux passer direct mon overflow en hidden ça va être nickel !!" Et puis j'ai vite déchanté lol.
Ca ne marche pas, j'ai dû faire une erreur "basique" de débutant, je me suis relue plusieurs fois, j'ai recommencer de zéro les codes de mes 3 fichiers et toujours le même résultat ...

Si tu as le temps peux-tu jeter un œil à ce que j'ai fait ? Je dois forcément me tromper quelque part ... Je suis sûre que c'est un truc à la con, genre un point virgule ou un mauvais nom ... je vais continuer a re essayer

Mon JS: nom du fichier. scoll.js
Code:

1 2 3 4 5 6 7 8 9 10 $("#left").click(function () { $("#slider").animate({ left: '-=50' }, 'slow'); }); $("#right").click(function () { $('#slider').animate({ left: '+=50' }, 'slow'); });
L'appel dans mon functions.php (dernière position)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 wp_enqueue_script( 'oria-fitvids', get_template_directory_uri() . '/js/jquery.fitvids.js', array('jquery'), true ); wp_enqueue_script( 'oria-slicknav', get_template_directory_uri() . '/js/jquery.slicknav.min.js', array('jquery'), true ); wp_enqueue_script( 'oria-parallax', get_template_directory_uri() . '/js/parallax.min.js', array('jquery'), true ); wp_enqueue_script( 'oria-scripts', get_template_directory_uri() . '/js/scripts.js', array('jquery'), true ); wp_enqueue_script( 'oria-imagesloaded', get_template_directory_uri() . '/js/imagesloaded.pkgd.min.js', array( 'jquery', 'masonry' ), true ); wp_enqueue_script( 'oria-masonry-init', get_template_directory_uri() . '/js/masonry-init.js', array( 'jquery' ), true ); wp_enqueue_script( 'scroll', get_template_directory_uri() . '/js/scroll.js', array('jquery'), true );
Le placement dans mon header, au dessus de la div concernée
Code:

1 2 3 4 <p><button id="left">scrollLeft()</button> <button id="right">scrollLeft()</button></p> <div id="slider" class="slider1"> <?php echo do_shortcode('[supsystic-gallery id=2]') ?> </div>
Pour le CSS je n'ai rien touché de particulier
Code:

1 2 3 4 5 6 7 8 9 #slider { position: relative; width: 100%; height: 200px; display: inline-block; white-space: nowrap; overflow: hidden; }
Encore merci pour ton aide ! Grrrr ça m'énerve de pas comprendre ..

A la limite je me disais, comment mon bouton dans le header sait que je veux agir sur la div #slider. Mais c'est vrai que c'est dans le script lui même qu'on lui dit. Donc bon mis à part me relire et recommencer encore une fois de zéro j'ai plus trop de piste :/
Très bonne soirée !

Screenshot
https://zupimages.net/up/18/11/b9zj.jpg

j'ai pas été dans le détail de ton code, mais il me semble qu'effectivement tu à raté un truc essentiel :
pour qu'il y ait une possibilité de scroll il faut 2 parties : un partie fixe et une partie mobile qui "bouge" à l'intérieur

la partie fixe possède à minima les instructions css suivantes

Code:

1
2
      position: relative;
      overflow: hidden;

et la partie mobile :

Code:

1
2
3
      position: absolute;
      top:0;
      left:0;

Donner une position relative au conteneur permet de l'établir comme référentiel pour les éléments qu'il contient
et l'élément mobile avec l'instruction position: absolute; top et left à zéro y est bien calé dedans.

ce qui au final donne quelque chose comme ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!doctype html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>test scroll horizontal</title>
  <style>
    div { margin: 0; padding: 0; border: 0 }
    #sliderBox {
      position: relative;
      width:100%;
      height: 200px;
      overflow: hidden;
      display: block;
    }
    #slideMov {
      position: absolute;
      top:0;
      left:0;
      white-space: nowrap;
    }
    .trucs { display: inline-block; height: 200px; width: 300px }
  </style>
</head>
<body>
  <h3>test scroll horizontal</h3>
 
  <p>
    <button id="Bt_left"> move Left</button>
    <button id="Bt_right">move Right</button>
  </p>
 
  <div id="sliderBox" >
    <div id="slideMov">
      <div class="trucs" style="background-color: yellowgreen">
      </div><div class="trucs" style="background-color: teal">
      </div><div class="trucs" style="background-color: tomato">
      </div><div class="trucs" style="background-color: slateblue">
      </div><div class="trucs" style="background-color: sandybrown">
      </div><div class="trucs" style="background-color: plum ">
      </div>
  </div>
 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript">
 
    $("#Bt_left").on('click', function () {
        $("#slideMov").animate({
            left: '-=50'
        }, 'slow');
    });
    $("#Bt_right").on('click', function () {
        $('#slideMov').animate({
            left: '+=50'
        }, 'slow');
    });
  </script>
</body>
</html>

Merci infiniment, j'ai réussi grâce à toi !!

Juste une petite question avant de passer en résolu si possible. J'ai compris que mes appels Jquery dans mon function.php ne marchaient pas. Du coup le script est appelé comme celui que tu m'a donné, directement dans mon header:
Est ce que je dois le déplacer dans functiun.php ? Ou est-ce-que je peux le laisser comme ça ?
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <button id="left">«</button> <button id="right">»</button> <div class="block"> <div id="slider" class="slider1"> <?php echo do_shortcode('[supsystic-gallery id=2]') ?> </div></div> <script> $( "#right" ).click(function() { $( ".block" ).animate({ "left": "-=100px" }, "slow" ); }); $( "#left" ).click(function(){ $( ".block" ).animate({ "left": "+=100px" }, "slow" ); }); </script>

Je vois pas trop ce que fait ton php, mais j'imagine qu'il produit la liste de tes images... (?)

sinon dans tes boutons se serait plutôt :
Code:

1 2 3 4 5 6 7 8 $( "#right" ).click(function() { $( "#slider" ).animate({ "left": "-=100px" }, "slow" ); }); $( "#left" ).click(function(){ $( "#slider" ).animate({ "left": "+=100px" }, "slow" ); });
dans ton code
Code:

1 2 <div class="block"> <div id="slider" ....
l'élément mobile est à l'intérieur d 'une classe "block" qui elle est fixe...

Citation:

Envoyé par Livie

Juste une petite question avant de passer en résolu si possible. J'ai compris que mes appels Jquery dans mon function.php ne marchaient pas. Du coup le script est appelé comme celui que tu m'a donné, directement dans mon header:
Est ce que je dois le déplacer dans functiun.php ? Ou est-ce-que je peux le laisser comme ça ?

le code JavaScript appartient à la partie client, (comme le code css et le code html), cad au navigateur (FireFox, Chromium, Vivaldi, etc...)
la partie php appartient à la partie serveur.

Une fois la page composée par le serveur en utilisant tes instructions php, elle devient "la chose" du navigateur, qui lui "se débrouillera" avec le code JavaScript, et le css et le HTML.

le mieux pour le code Javascript, c'est de le placer juste avant la derniere balise du body (</body>) comme je l'ai fait dans mon exemple.
mettre du code javascript dans la header ou autre part sur ta page revient à demander qu navigateur se s'arretter d'afficher la page pour éventuellement faire des calculs en JavaScript, ce qui ralentit inévitablement l'affichage et fait attendre inutilement les internautes qui visitent ton site, si en plus leur connexion est lente en plaçant ton javascript dans le header, cela leur fait une page blanche en attendant

d'ailleurs comme tu utilise du jQuery tu devrai encadrer ton code avec le traditionnels document ready surtout si ta page affiche des images.
Code:

1 2 3 4 5 6 7 8 9 10 11 <script type="text/javascript"> $( document ).ready(function() { $("#right").click(function() { $( "#slider" ).animate({ "left": "-=100px" }, "slow" ); }); $( "#left" ).click(function(){ $( "#slider" ).animate({ "left": "+=100px" }, "slow" ); }); }); </script>
cela indique au navigateur de ne rien faire tant que la page n'est pas entièrement chargée.
pour les images par exemple, le navigateur lance un process à part pour chacune d'entre elles et continue à composer le reste de la page. les images les plus lourdes peuvent mettre "un certain temps" avant d'être entièrement affichées sur la page

25/03/2018, 15h33
Livie

Super encore merci à toi !!