18041 sujets

Questions générales et questions de débutants

Fonction pour afficher 2 slider different

Bonjour, je cherche à faire une fonction pour changer mon slider selon la taille de l’écran.
j'ai bricoler une fonction mais celle-ci ne fonctionne pas quelqu'un saurait pourquoi ?


 $Slide4 =  echo  do_shortcode('[smartslider3 slider=5]');
 $Slide5 =  echo  do_shortcode('[smartslider3 slider=3]');
function changeslid(){

                   if( window.matchMedia("(max-width:721px)").matches){
                      echo $slide4;
                   }
                   else {
                     echo $Slide5;
                   }
            }

il n'affiche aucun des deux slider.
Modifié par snotra (16 Apr 2020 - 16:12)

("(min-width:721px").matches)


Smiley lol Smiley murf

Essai sans fautes Smiley cligne 


if (window.matchMedia("(min-width: 721px)").matches)
Coucou Snotora !
Sois j'ai pas bien comprit soit tu te galère complètement la vie ...
Pourquoi tu utilise pas des media queries ? 


@media only screen and (min-width 721px) {

.Slide1 {
width: 100px; /* Par exemple */
}

}
Bonjour,
j'ai corriger les faute dans le code au niveau du window.matchMedia est cela ne fonctionne toujours pas.
vzytoi les media queries vont me permettre d'ajuster la taille du conteneur du slideur hors je veux changer le slider exemple sur les écrans de plus de 721 px un slider avec des fleurs et sur les écrans de moins de 721px un slider avec des bonbons le css ne permet pas de faire cela sauf erreur de ma part.(si le css permet de faire cela je vais me pendre ^-^).
merci pour vos réponses.
Si tes image étaient des div avec un background ils seraient possible de les changer dans un media queries ... C'est pas grave continue sur le javascript (;


div.slider-image {
  height: 250px;
  width: 250px;
  background: url('../img/fleur.jpg');
}

@media only screen and (min-width: 721px) {

div.slider-image {
  background: url('../img/bonbon.jpg');
}

}
Déjà tu devrais essayer ceci qui fonctionne très bien:


if (window.matchMedia("(min-width: 721px)").matches) {

    alert('écran plus large que 721 pixels');

} else {

    alert('écran moins large que 721 pixels');

}
Sujet clos
Aller à