28172 sujets

CSS et mise en forme, CSS3

[Résolu] Slider responsive passant de deux images a chaque slide à une

Bonjour,

je suis graphiste spécialisé dans le print et la typographie, et je suis actuellement en train de bricoler un site internet.
Je dis "bricoler" car mes connaissances en code sont limitées, ainsi mon site se construit entre visionnage de tutoriels et petits bouts de code glanés à droite à gauche.
Bref beaucoup de choses ne vont pas dans la structure même, mais ce sujet concerne un point précis que je n'arrive pas à saisir et solutionner; en voici les caractéristiques:

Je veux créer un carousel d'images pour présenter mes projets, avec des flèches "prev" et "next" pour passer d'une slide à l'autre.
Pour la version bureau avec affichage navigateur de grande taille, j'ai disposé deux images côte à côte pour chaque slide. Chaque slide affiche donc un binôme d'images.

Lorsque la largeur du navigateur se réduit, j'aimerai que chaque slide n'affiche plus qu'une seule image.
J'ai plus ou moins réussi à le faire, mais le problème est le suivant:
Dans sa version "image unique", lorsque je navigue avec les flèches "prev" et "next", le carousel n'affiche plus qu'une image sur deux.

J'ai mis le "template" de mon site en ligne afin de pouvoir le tester sur plusieurs navigateurs, il est donc accessible. En voici le lien ici
(Attention les yeux j'ai mis des couleurs pour bien repérer tout mes éléments...)

Voici maintenant le code, je ne vais mettre que la partie correspondant au carousel pour essayer de limiter:

<div class="carousel-container">

                    <!--<div class="prev nav-btn">?</div>-->
                    <div class="prev nav-btn"></div>
                       
                <div class="carousel">
                
                    <div class="item main">
                    <img src="assets/Image1.jpg"/>
                    <img src="assets/Image2.jpg"/>

                        <div class="caption">
            <ul class="cap">
                <li>template template template template template template template template template template template template</li>
                <li>template template template template template template template template template template template template</li>
                <li>template template template template template template template template template template template template</li>
            </ul>
                        </div>
                    </div>

                    <div class="item">
                    <img src="assets/Image3.jpg"/>
                    <img src="assets/Image4.jpg"/>

                        <div class="caption">
            <ul class="cap">
                <li>template2 template template template template template template template template template template template</li>
                <li>template template template template template template template template template template template template</li>
                <li>template template template template template template template template template template template template</li>
            </ul>
                        </div>
                    </div>

                    <div class="item">
                    <img src="assets/Image5.jpg"/>
                    <img src="assets/Image6.jpg"/>

                        <div class="caption">
            <ul class="cap">
                <li>template3 template template template template template template template template template template template</li>
                <li>template template template template template template template template template template template template</li>
                <li>template template template template template template template template template template template template</li>
            </ul>
                        </div>
                    </div>
                      
                </div>

                <!--<div class="next nav-btn ">?</div>-->
                <div class="next nav-btn "></div>

<script src="app.js"></script>

                </div>


Css pour deux images par slide

.carousel-container {
    position: absolute;
    display: inline-block;
    text-align: center;
    margin: 40px 0 0 0;
    padding: 0;
    width: 100%;
    height: 95%;
    background-color: orangered;
    }

.carousel {
    position: relative;
    display: inline-block;
    text-align: center;
    padding: 0;
    width: 80%;
    height: 90%;
    transition: all 0.3s ease;
    background-color: blue;
    }

.prev {
    position: relative;
    display: inline-block;
    top: -45%;
    width: 5%;
    height: 10%;
    }

.next {
    position: relative;
    display: inline-block;
    top: -45%;
    width: 5%;
    height: 10%;
    }

.nav-btn {
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    background-color: grey;
    }

.item {
    display: none;
    }

.main {
    display: inline-block;
    }

 .carousel img {
    position: relative;
    display: inline-block;
    padding: 15px 15px 15px 15px;
    margin: auto;
    max-width: 35%;
    transition: all 0.3s ease;
    }


Css pour image unique à chaque slide

.carousel-container {
    position: absolute;
    text-align: center;
    margin: 40px 0 0 0;
    padding: 0;
    width: 100%;
    height: 95%;
    background-color: orangered;
    }

.carousel {
    position: absolute;
    display: block;
    text-align: center;
    margin-left: 10%;
    top: 0;
    padding: 0;
    width: 80%;
    height: 95%;
    transition: all 0.3s ease;
    background-color: blue;
    }

.prev {
    z-index: 10;
    float: left;
    width: 5%;
    height: 10%;
    }

.next {
    z-index: 10;
    float: right;
    width: 5%;
    height: 10%;
    }

.nav-btn {
    position: relative;
    margin-top: 60%;
    cursor: pointer;
    -webkit-user-select: none;
    background-color: purple;
    }

.item {
    display: none;
    }

.main {
    display: block;
    }

 .carousel img {
    position: absolute;
    display: block;
    padding: 15px 15px 15px 15px;
    margin-left: 25%;
    max-width: 42%;
    transition: all 0.3s ease;
    }


Javascript pour carousel

const prev = document.querySelector('.next');
const next = document.querySelector('.prev');
const images = document.querySelector('.carousel').children;
const totalImages = images.length;
let index = 0;

prev.addEventListener('click', () => {
  nextImage('next');
})

next.addEventListener('click', () => {
  nextImage('prev');
})

function nextImage(direction) {
  if(direction == 'next') {
    index++;
    if(index == totalImages) {
      index = 0;
    }
  } else {
    if(index == 0) {
      index = totalImages - 1;
    } else {
      index--;
    }
  }
  
  for(let i = 0; i < images.length; i++) {
    images[i].classList.remove('main');
  }
  images[index].classList.add('main');
}


Merci d'avance pour votre aide
Modifié par Haz (22 Aug 2023 - 13:15)
Salut,

A priori le problème vient de la structure de ton code HTML :
Lorsque tu fais suivant/précédent, tu ne caches pas les images mais les <div class="item"> qui contiennent 2 images chacune. Donc quand tu fais "NextImage" en fait tu fais "NextGroupeDe2Images".

A priori tu va devoir faire potentiellement pas mal de changement Smiley ohwell
Solution qui me semble la plus simple pour garder ton code actuelle : l'image de droite d'un div class item devient l'image de gauche du div class item suivant : Lorsque tu cliques sur next il se déplace à gauche et tu vois une seule image suivante, et avec ta solution de superposer les 2 images pour en cacher une, tu aura bien toutes tes images en petit écran.

Solution alternative qui serait peut être plus propre : ça serait d'avoir chaque images indépendante des autres et de trouver une autre solution pour déterminer combien d'images tu affiche en même temps et donc de combien le next doit faire avancer les images (perso ça ne me choque pas que ça n'avance que de une image mais la tu sembles vouloir faire un panneau entier d'images à chaque fois)

PS : pour ta fonction NextImage tu dois pouvoir utiliser la fonction modulo pour être sur de rester dans ton intervalle (en javascript c'est un faux modulo qui retourne des nombres négatifs donc il faut pré ajouter totalImages avant de faire le modulo pour rester sur des nombres positifs) 
index=(index+1)%totalImages;
index=(index-1+totalImages)%totalImages;
Merci, j'ai trouvé une solution alternative; je marque donc ce sujet comme étant résolu.
Prévenir un modérateur
Répondre au sujet
Aller à