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

Aucune réponse