Bonjour,
Je travaille sur un projet depuis ce matin mais je rencontre un probleme. Mon probleme est le suivants, j'ai trois section qui fonctionne avec le plugin owlcarousel
. Pour de simple image avec du texte, les images s'affichent comme desirées. Mais quand il s'agit du collage que je desire faire, l'affichage est parfait sur certain navigateurs(chrome, opera, safari) ==> Quand le collage est parfait
Sur d'autres (Firefox, explorer), voici ce que j'obtiens ==> L'affichage du carrousel quand le collage n'est pas parfait
Voici le code que j'ai utilisé pour le collage:
HTML
<div class="container">
<div class="carousel-featured-sellers">
<div class="featured-sellers-collage">
<div class="div1">
<p><img src="images/189x324-4.jpg" alt=""/></p>
<p><img src="images/189x324-5.jpg" alt=""/></p>
</div>
<div class="div2">
<img src="images/380x325-6.jpg" alt=""/>
</div>
</div>
<div class="featured-sellers-collage">
<div class="div1">
<p><img src="images/189x324-4.jpg" alt=""/></p>
<p><img src="images/189x324-5.jpg" alt=""/></p>
</div>
<div class="div2">
<img src="images/380x325-6.jpg" alt=""/>
</div>
</div>
<div class="featured-sellers-collage">
<div class="div1">
<p><img src="images/189x324-4.jpg" alt=""/></p>
<p><img src="images/189x324-5.jpg" alt=""/></p>
</div>
<div class="div2">
<img src="images/380x325-6.jpg" alt=""/>
</div>
</div>
<div class="featured-sellers-collage">
<div class="div1">
<p><img src="images/189x324-4.jpg" alt=""/></p>
<p><img src="images/189x324-5.jpg" alt=""/></p>
</div>
<div class="div2">
<img src="images/380x325-6.jpg" alt=""/>
</div>
</div>
<div class="featured-sellers-collage">
<div class="div1">
<p><img src="images/189x324-4.jpg" alt=""/></p>
<p><img src="images/189x324-5.jpg" alt=""/></p>
</div>
<div class="div2">
<img src="images/380x325-6.jpg" alt=""/>
</div>
</div>
<div class="featured-sellers-collage">
<div class="div1">
<p><img src="images/189x324-4.jpg" alt=""/></p>
<p><img src="images/189x324-5.jpg" alt=""/></p>
</div>
<div class="div2">
<img src="images/380x325-6.jpg" alt=""/>
</div>
</div>
<div class="featured-sellers-collage">
<div class="div1">
<p><img src="images/189x324-4.jpg" alt=""/></p>
<p><img src="images/189x324-5.jpg" alt=""/></p>
</div>
<div class="div2">
<img src="images/380x325-6.jpg" alt=""/>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.12.2.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script>
(function($){
$('.carousel-featured-sellers').owlCarousel({
items: 3,
loop:true,
margin:25,
nav:true,
navText: ["<span class='carousel-nav-left'><i class='fa fa-chevron-left'></i></span>","<span class='carousel-nav-right'><i class='fa fa-chevron-right'></i></span>"],
dots: true,
responsive:{
0:{
items:1
},
430:{
items:2
},
800:{
items:3
},
1400:{
items:4
},
1800:{
items:6
},
2400:{
items:7
},
3000:{
items:9
}
}
})
})(jQuery);
</script>
.featured-sellers-collage {
width: 380px;
}
.featured-sellers-collage .div1 p {
margin-bottom: 0;
margin-top: 0;
}
.featured-sellers-collage .div1 p:first-child {
float:left;
}
.featured-sellers-collage .div1 p:last-child {
float:right;
}
Veuillez m'aider a resoudre ce probleme que je rencontre depuis un certain moment. Merci d'avance