aide slider jquery

vanesssa
Javascript

Bonjour,

Voila je rencontre un petit problème avec mon code.

Ce que je fais

Ce que je veux

je voudrais que lorsque l'ont clique sur les flèches à gauche ou à droite, les images changent de position en fonction ( vers la gauche ou vers la droite ) pour faire un slider un peu du même style que les slider apple mais sans fire bouger les div , juste interchanger les images

Je ne parviens pas à trouver la solution :/
Quelqu'un pour m'aider ? :(

5 réponses

Benjamin Derepas

Donnes nous déjà ton code peut être ?
L'idée pour faire ce que tu fais est de lancer la fonction de slider non pas au clique mais au keyup

vanesssa
Auteur

bonjour benjamin
voici mon code : 

<div id="content">
            <div class="player-top-1">
                <div class="content-player border">
                    <div class="arrow-left-1 border" id="prev">                        <!-- flèche de gauche -->
                        <i class="fa fa-angle-left" aria-hidden="true"></i>
                    </div>
                    <div class="player-zone border">

                        <div class="clear"></div>
                        <div class="previous-song" id="previous-song-div">     <!-- image de gauche -->

                        </div>
                        <div class="next-song" id="next-song-div">                     <!-- image de droite  -->

                        </div>
                        <div class="actual-song" id="actual-song-div">              <!-- grande div centrale  -->
                        </div>
                    </div>
                    <div class="arrow-left-1 border" id="next">                         <!-- flèche de droite -->
                        <i class="fa fa-angle-right" aria-hidden="true"></i>
                    </div>
                </div>
            </div>

        </div>
Benjamin Derepas

Bon ton code html n'aide pas trop, mais en gros il s'agit un slider / caroussel.
Tu peux utiliser des plugin tout fait (comme celui là ) ou construire le tiens à la main, en jouant sur le positionnement des élements (margin, translate etc).

nico41

Une base de travail ( peut et doit être amélioré ! ) :

voir : https://jsfiddle.net/nicolas_canfrere/xjc2yq4g/6/

nico41

Bonjour, est-ce que mon dernier commentaire t'as été utile ?