11488 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Script js ne fonctionne plus lorsque j'appelle des mediaqueri

Bonjour,

Je suis en train de me créer un site internet, un peu bricolé.
Je ne suis pas développeur alors j'y vais à tâtons.
Pour autant mon site fonctionne est n'est visuellement pas très mal réussi je trouve.
Pour vous en donner une idée, il s'agit d'un site frontpage (il me semble que c'est le terme adéquat) avec un menu très simple, un carousel d'images avec flèches gauche et droite, et des légendes en dessous.

Dans sa version pour grande résolution, deux images se côtoient à chaque slide.
Ici le script js fonctionne car mon slider fait bien défiler les images deux par deux lorsque je clique sur les flèches.

En revanche, pour les plus petites résolutions j'ai décidé de ne mettre qu'une image par slide. Dans mon html, j'ai donc créé une autre div contenant mon carousel avec une seule image par slide. Je l'ai "appelée" dans mon css avec des media queries. La mise en forme fonctionne, en revanche plus rien ne se passe lorsque je clique sur mes flèches pour passer d'une slide à l'autre.

J'imagine que la syntaxe de mon script js qui fonctionne pour les grandes résolutions est incorrecte lorsque je fais intervenir les media queries.

Autant j'ai de petits connaissances en html et css mais en javascript je suis totalement novice. J'ai cherché pas mal de solutions hier mais je ne comprends pas le langage et j'ai donc beaucoup de mal à l'adapter à mon problème.

Voici mes codes html, css et js

<!DOCTYPE html>
<html>
<head>
 
  	<title>Duo Impair</title>
    <link rel="icon" type="image/x-icon" href="assets/favimpair.png">
 	  <meta charset="UTF-8" />
    <meta name="Author" content="Duo Impair">
    <meta name="Description" content="Duo Impair, french graphic design studio.">
    <meta name="Keywords" content="Graphic Design, Art Direction, Typography, Research, Photography">
    
    <!--<link rel='stylesheet' id='fonts-css'  href='fonts/font.css' type='text/css' media='all' />-->
    <link rel='stylesheet' id='style-css'  href='assets/style.css' type='text/css' media='all' />
    
</head>


<body>

	<!--------------------------------------------- Haut de Page --------------------------------------------->

	<header role="header">


		<nav class="menu" role="sections">
            
                <div class="inner">

            <div class="m-left">
                 <h1 class="logo">DUO IMPAIR &emsp; Graphic Design Studio</h1>
            </div>

            <div class="m-right">
                <a href="index.html" class="m-link" style="color: blue">Projects</a>
                <a href="info.html" class="m-link">About</a>
            </div>
                
                </div>            

	</header>


    <!--------------------------------------------- Images et légendes --------------------------------------------->


            <div class="carousel-container">

                    <!--<div class="prev nav-btn">?</div>-->
                    <div class="prev nav-btn"><img src="assets/arrowdotl.png"/></div>
                       
                <div class="carousel">
                
                    <div class="item main">
            <img src="assets/Tartamudez1.jpg"/>
            <img src="assets/Tartamudez2.jpg"/>

                        <div class="caption">
            <ul class="cap">
                <li>TARTAMUDEZ, 2023</br> Self-initiated poster project.</li>
                <li>Poster screen printed, part of a project called "Palabras".</li>
                <li>Poster screen printed, part of a project called "Palabras".</li>
            </ul>
                        </div>
                    </div>

                    <div class="item">
            <img src="assets/AfficheMockupGold.jpg"/>
            <img src="assets/AfficheMockupShadow.jpg"/>

            <div class="caption">
            <ul class="cap">
                <li>TARTAMUDEZ, 2023 Self-initiated poster project.</li>
                <li>Poster screen printed, part of a project called "Palabras".</li>
                <li>Poster screen printed, part of a project called "Palabras".</li>
            </ul>
                        </div>
                    </div>

                    <div class="item">
            <img src="assets/SupaVenezia1.jpg"/>
            <img src="assets/SupaVenezia2.jpg"/>

                        <div class="caption">
            <ul class="cap">
                <li>TARTAMUDEZ, 2023 Self-initiated poster project.</li>
                <li>Poster screen printed, part of a project called "Palabras".</li>
                <li>Poster screen printed, part of a project called "Palabras".</li>
            </ul>
                        </div>
                    </div>


                    <div class="item">
            <img src="assets/SupaVenezia3.jpg"/>
            <img src="assets/SupaVenezia4.jpg"/>

                        <div class="caption">
            <ul class="cap">
                <li>TARTAMUDEZ, 2023 Self-initiated poster project.</li>
                <li>Poster screen printed, part of a project called "Palabras".</li>
                <li>Poster screen printed, part of a project called "Palabras".</li>
            </ul>
                        </div>
                    </div>

                            <div class="item">
            <img src="assets/Bushel.jpg"/>
            <img src="assets/Bushel2.jpg"/>

                        <div class="caption">
            <ul class="cap">
                <li>TARTAMUDEZ, 2023 Self-initiated poster project.</li>
                <li>Poster screen printed, part of a project called "Palabras".</li>
                <li>Poster screen printed, part of a project called "Palabras".</li>
            </ul>
                        </div>
                    </div>
                      
                </div>

                <!--<div class="next nav-btn ">?</div>-->
                <div class="next nav-btn "><img src="assets/arrowdotr.png"/></div>

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

                </div> 




<!--------------------------------------------- Images et légendes small devices  --------------------------------------------->


 <div class="carousel-container-small">

                    <!--<div class="prev nav-btn">?</div>-->
                    <div class="prev nav-btn"><img src="assets/arrowdotl.png"/></div>
                       
                <div class="carousel-tiny">
                
                    <div class="item main">
            <img src="assets/Tartamudez1.jpg"/>

                        <div class="caption">
            <ul class="cap">
                <li>TARTAMUDEZ, 2023</br> Self-initiated poster project.</li>
                <li>Poster screen printed, part of a project called "Palabras".</li>
            </ul>
                        </div>
                    </div>

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

                        <div class="caption">
            <ul class="cap">
                <li>TARTAMUDEZ, 2023</br> Self-initiated poster project.</li>
                <li>Poster screen printed, part of a project called "Palabras".</li>
            </ul>
                        </div>
                    </div>

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

            <div class="caption">
            <ul class="cap">
                <li>TARTAMUDEZ, 2023 Self-initiated poster project.</li>
                <li>Poster screen printed, part of a project called "Palabras".</li>
            </ul>
                        </div>
                    </div>

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

            <div class="caption">
            <ul class="cap">
                <li>TARTAMUDEZ, 2023 Self-initiated poster project.</li>
                <li>Poster screen printed, part of a project called "Palabras".</li>
            </ul>
                        </div>
                    </div>

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

                        <div class="caption">
            <ul class="cap">
                <li>TARTAMUDEZ, 2023 Self-initiated poster project.</li>
                <li>Poster screen printed, part of a project called "Palabras".</li>
            </ul>
                        </div>
                    </div>

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

                        <div class="caption">
            <ul class="cap">
                <li>TARTAMUDEZ, 2023 Self-initiated poster project.</li>
                <li>Poster screen printed, part of a project called "Palabras".</li>
            </ul>
                        </div>
                    </div>

                      
                </div>

                <!--<div class="next nav-btn ">?</div>-->
                <div class="next nav-btn "><img src="assets/arrowdotr.png"/></div>

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

                </div>



            
    <!--------------------------------------------- Pied de Page --------------------------------------------->

  <!--<footer class="pied">

	<p>2023 &copy; All rights reserved.</p>

	</footer>-->



</body>
</html>




/* APPEL DE LA POLICE DE CARACTERES */

@font-face {
    font-family: "maintype";
    src: url("../assets/HuttemonoV1-Regular.otf");
    }


/* VALEURS BODY DEFINIES POUR TOUT LE DOCUMENT */

html, body {
    font-family: "maintype", sans-serif;
    width: 100%;
    height: 100%;
    border: 0 none;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    overflow-y: hidden;
    }


/* HEADER NOM DU STUDIO ET ONGLETS DE SECTIONS DU SITE INTERNET */

.menu{

    width: 100%;
    height:3%;
    line-height: 40px;
    }

.inner {
    width: 100%;
    margin: auto;

    }
   

.m-left{
    float: left;
    /*background-color: grey;*/
    }


.logo{

    margin: 0;
    padding-left: 25px;
    padding-right: 25px;
    font-family: "maintype";
    font-weight: normal;
    font-size: 25px;
    }



.m-right{
    float: right;
    height: 40px;
    /*background-color: red;*/
    }

.m-link{
    text-decoration: none;
    color: black;
    text-transform: uppercase;
    font-weight: normal;
    font-size: 25px;
    margin:0;
    padding-left: 25px;
    padding-right: 25px;
    /*padding: 0;*/
    /*margin: 0 50px;*/
    }

.m-link:hover {
    color: blue;
    }



/* CARROUSEL ET FLECHES DE NAVIGATIONS PREV/NEXT */


.carousel-container {
    display: flex;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 96%;
    }

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


.next {
    z-index: 10;
    margin: auto;
    width: 10%;
    height: 10%;

}

.prev {
    z-index: 10;
    margin: auto;
    width: 10%;
    height: 10%;
}

.nav-btn {
    display: flex;
    justify-content: space-around;
    cursor: pointer;
    -webkit-user-select: none;
    color: blue;
    margin-top: 20%;
}

.item {
    display: none;
    }

.main {
    display: inline-block;
    }

 .carousel img {
  display: inline-block;
  position: relative;
  padding: 10px 30px 20px 30px;
  margin: auto;
  max-width: 35%;
  transition: all 0.3s ease;
  /*background-color: lightgrey;*/
      }


.caption {
    position: relative;
    margin: auto;
    width: 100%;

}

.cap {
    column-count: 3;
    margin: auto;
    position: relative;
    /*background-color: pink;*/
    
}

.caption li {
    position: relative;
    list-style: none;
    font-size: 14px;
    line-height: 1.2em;
    text-align: left;
    padding: 0;
}

.carousel-container-small {
    display: none;
}



/* --------------------------- RESPONSIVE POUR LARGEUR MAX 960px -------------------------------------- */



@media screen and (max-width: 960px){

/* HEADER NOM DU STUDIO ET ONGLETS DE SECTIONS DU SITE INTERNET */

.inner {
    width: 100%;
    margin: auto;
    }
   

.menu{

    width: 100%;
    height: 4%;
    line-height: 40px;
    }

.m-left{
    float: left;
    }


.logo{

    margin: 0;
    padding-left: 25px;
    font-family: "maintype";
    font-weight: normal;
    font-size: 20px;
    }



.m-right{
    float: right;
    }

.m-link{
    text-decoration: none;
    color: black;
    text-transform: uppercase;
    font-weight: normal;
    font-size: 20px;
    margin: 0;
    padding-left: 25px;
    padding-right: 25px;
    }

.m-link:hover {
    color: blue;
    }

    /* CARROUSEL ET FLECHES DE NAVIGATIONS PREV/NEXT */

    .carousel-container{
    display: none;
}

.carousel-container-small {
    display: flex;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 96%;
    }

.carousel-tiny {
  display: block;
  text-align: center;
  padding: 0;
  width: 80%;
  height: 100%;
  transition: all 0.3s ease;
      }


.next {
    z-index: 10;
    margin: auto;
    width: 10%;
    height: 10%;

}

.prev {
    z-index: 10;
    margin: auto;
    width: 10%;
    height: 10%;
}

.nav-btn {
    display: flex;
    justify-content: space-around;
    cursor: pointer;
    -webkit-user-select: none;
    color: blue;
    margin-top: 20%;
}

.item {
    display: none;
    }

.main {
    display: inline-block;
    }

 .carousel-tiny img {
  display: block;
  position: relative;
  padding: 10px 30px 20px 30px;
  margin: auto;
  max-width: 55%;
  transition: all 0.3s ease;
      }


.caption {
    position: relative;
    margin: auto;
    width: 100%;

}

.cap {
    column-count: 1;
    margin: auto;
    position: relative;
    
}

.caption li {
    position: relative;
    list-style: none;
    font-size: 14px;
    line-height: 1.2em;
    text-align: left;
    padding: 0;
}

}

/* RESPONSIVE POUR LARGEUR MAX 720px*/

@media screen and (max-width: 717px){

/* HEADER NOM DU STUDIO ET ONGLETS DE SECTIONS DU SITE INTERNET */

.inner {
    width: 100%;
    margin: auto;
    }
   

.menu{

    width: 100%;
    height: 4%;
    line-height: 40px;
    }

.m-left{
    float: left;
    }


.logo{

    margin: 0;
    padding-left: 25px;
    font-family: "maintype";
    font-weight: normal;
    font-size: 20px;
    }



.m-right{
    float: left;
    /*height: 2%;*/
    /*height: 40px;*/
    line-height: 20px;
    }

.m-link{
    text-decoration: none;
    color: black;
    text-transform: uppercase;
    font-weight: normal;
    font-size: 20px;
    /*padding: 0;*/
    /*margin: 0 25px;*/
    margin: 0;
    padding-left: 25px;
    padding-right: 25px;
    }

.m-link:hover {
    color: blue;
    }


    /* CARROUSEL ET FLECHES DE NAVIGATIONS PREV/NEXT */

    .carousel-container {
    display: none;
}

.carousel-container-small {
    display: flex;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 96%;
    }

.carousel-tiny {
  display: block;
  text-align: center;
  padding: 0;
  width: 80%;
  height: 100%;
  transition: all 0.3s ease;
      }


.next {
    z-index: 30;
    margin: auto;
    width: 10%;
    height: 10%;

}

.prev {
    z-index: 30;
    margin: auto;
    width: 10%;
    height: 10%;
}

.nav-btn {
    display: flex;
    justify-content: space-around;
    cursor: pointer;
    -webkit-user-select: none;
    color: blue;
    margin-top: 20%;
}

.item {
    display: none;
    }

.main {
    display: inline-block;
    }

 .carousel-tiny img {
  display: block;
  position: relative;
  padding: 0px 30px 20px 30px;
  margin: auto;
  max-width: 55%;
  transition: all 0.3s ease;
      }

.caption {
    position: relative;
    margin: auto;
    width: 100%;

}

.cap {
    column-count: 1;
    margin: auto;
    position: relative;
    
}

.caption li {
    position: relative;
    list-style: none;
    font-size: 14px;
    line-height: 1.2em;
    text-align: left;
    padding: 0;
}


}


//SLIDER POUR IMAGES

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');
}
Modérateur
Bonjour,

ton script ne s'interesse qu'a const images = document.querySelector('.carousel').children; l'element avec la class .carousel et uniquement le premier qu'il trouve.

Il serait plus simple de n'utiliser qu'un seul carrousel et de modifier les styles de celui-ci via les mediaquerie , en l'état, il t'afficherait 2 images l'une sur l'autre à priori. (test simplement en réutilant les class du premier dans tes mediaqueries (retire les -small et -tiny des class).
Un second carrousel n'est pas la meilleur idée Smiley smile

cdt
gcyrillus a écrit :
Bonjour,

ton script ne s'interesse qu'a const images = document.querySelector('.carousel').children; l'element avec la class .carousel et uniquement le premier qu'il trouve.

Il serait plus simple de n'utiliser qu'un seul carrousel et de modifier les styles de celui-ci via les mediaquerie , en l'état, il t'afficherait 2 images l'une sur l'autre à priori. (test simplement en réutilant les class du premier dans tes mediaqueries (retire les -small et -tiny des class).
Un second carrousel n'est pas la meilleur idée Smiley smile

cdt


Bonjour et merci pour votre réponse, j'ai pu essayer aujourd'hui de suivre vos conseils et effectivement cela est plus simple à mettre en place.
Pour autant cela fonctionne à 50% je dirais.
Comme vous le recommandiez, j'ai modifié les styles de mon carousel via les mediaquerie, et j'ai changé le display de mon .main en "block" notamment (il était auparavant en inline-block). Je le vois bien cela fonctionne, les deux images qui étaient côte-à-côte se superposent.
Désormais le problème c'est que seulement une image sur deux apparait à chaque slide (celle qui était à droite lorsque lorsqu'elles étaient côte-à-côte, la deuxième ligne dans la -div concernée)...
Je n'ai pas réussi à trouver la solution malgré les réponses apportées, je clos cette discussion et vais recréer un sujet.
Merci et désolé pour la gêne occasionnée.
Prévenir un modérateur
Répondre au sujet
Aller à