Impossible de rendre sliders responsives

Messages postés
128
Date d'inscription
mercredi 11 octobre 2006
Statut
Membre
Dernière intervention
15 octobre 2019
-
Je fais un essais sur la page suivante :
https://promosdusines.com/EssaisSliderResponsiveDist.html
Ci-dessous code code HTML du body de cette page
_________________________
<body>
<div class="container">
<table height="179
" class="table-responsive">
<tr>
<td width="52%" align="center">
<ul class="rs-slider">
<li><a href="#lien-renvoi"><img src="https://promosdusines.com/img/cms/1-AnimFr.gif" class="image-responsive" alt="Promotion Piles bouton AG13 - LR44" / title="Promotion Piles bouton AG13 - LR44" /></a></li>
<li><a href="#lien-renvoi"><img src="https://promosdusines.com/img/cms/5-AnimFr.gif" class="image-responsive" alt="Promotion Piles bouton lithium CR2032" title="Promotion Piles bouton lithium CR2032" /></a></li>
<li><a href="#lien-renvoi"><img src="https://promosdusines.com/img/cms/14-AnimFr.gif" class="image-responsive" alt="Promotion Piles bouton AG4 - SR626" title="Promotion Piles bouton AG4 - SR626" /></a></li>
<li><a href="#lien-renvoi"><img src="https://promosdusines.com/img/cms/27-AnimFr.gif" class="image-responsive" alt="Promotion Peson électronique 40Kg" title="Promotion Peson électronique 40Kg" /></a></li>
</ul>
</td>
<td width="48%" align="center">
<ul class="rs-slider2">
<li><a href="https://promosdusines.com/content/1-Livraison"><img src="https://promosdusines.com/img/cms/EngagementFr_H150px.jpg" class="image-responsive" alt="Nos engagements" title="Nos engagements" /></a> </li>
<li><img src="https://promosdusines.com/img/cms/EnvoiFr_H150px.png" class="image-responsive" alt="Envoyé de France" title="Envoyé de France" /> </li>
<li><a href="https://promosdusines.com/content/3-Conditions-utilisation#Article8"><img src="https://promosdusines.com/img/cms/TamponSatisfaitRembourseFr_H150px.png" class="image-responsive" alt="Guarantie Satisfait ou Remboursé" title="Guarantie Satisfait ou Remboursé" /></a> </li>
</ul>
</td>
</tr>
</table>
</div>
<script src="/themes/classic/assets/js/jquery.js"></script>
<script src="/themes/classic/assets/js/jquery.refineslide.min.js"></script>
<script>
$(document).ready(function($) {
$('.rs-slider').refineSlide({
transition: 'cubeH',
transitionDuration: 1000,
autoPlay: true,
keyNav: false,
delay: 3000,
controls: null
});
});
</script>
<script>
jQuery(document).ready(function($) {
$('.rs-slider2').refineSlide({
transition: 'cubeV',
transitionDuration: 1000,
autoPlay: true,
keyNav: false,
delay: 3000,
controls: null
});
});
</script>
</body>
_______________________________

Toutes mes images sont en class="image-responsive"
A aucun moment dans le code HTML, je n'ai fixé les largeur des images.
Cependant lorsque j'examine le code dans le navigateur, je constate qu'il fixe des styles de largeur d'image
Voir copie écran jointe !!!
Comment procéder pour que ces styles fixés à la volé, ne soient pas mentionné dans le code édité par le navigateur.

Sans ces styles de largeur construit à la volée, mes sliders deviennent parfaitement responsive.

Voir copie écran examen code dans navigateur.


Merci pour votre aide bienvenue
Afficher la suite 

1 réponse

Messages postés
248
Date d'inscription
mardi 21 août 2018
Statut
Membre
Dernière intervention
8 septembre 2019
54
0
Merci
Alors, c'est simple, déjà tu utilise pour ta mise en forme des table alors que c'est obsolète par rapport à ce que l'on as grâce aux flexbox.

Tu as plein d'erreurs dans ton code html ->
https://validator.w3.org/nu/?doc=https%3A%2F%2Fpromosdusines.com%2FEssaisSliderResponsiveDist.html

Pareil dans ton css :
https://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Fpromosdusines.com%2FEssaisSliderResponsiveDist.html&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=fr


Corrige déjà ça et ça devrait aller.
J'ai pas mon ordinateur sur moi mais sache que ton navigateur à juste essayer de combler les erreurs de ton code.
-
Ce n'est pas si un oiseau à de grandes ailes qu'il vole haut
Commenter la réponse de SioGabx