Ich verwende ein Plugin namens owlcarousel
, um ein Karussell zu erstellen. Das Karussell und die Collage wurden gemacht. Die Arbeit wurde in Google Chrome, Safari, Opera und Firefox getestet. Alles funktioniert gut für alle außer Firefox.Erstellen Sie eine Collage für ein Karussell mit Eulenkarussell
Wenn das Karussell funktioniert gut, das wie angezeigt:
auf Firefox, das ist, wie es aussieht:
Nun, das ist der Teil meines Code ist in Bezug auf das Karussell (HTML):
<div class="container">
\t \t \t \t \t \t <div class="carousel-featured-sellers">
\t \t \t \t \t \t \t <div class="featured-sellers-collage">
\t \t \t \t \t \t \t \t <div class="div1">
\t \t \t \t \t \t \t \t \t <p><img src="images/189x324-4.jpg" alt=""/></p>
\t \t \t \t \t \t \t \t \t <p><img src="images/189x324-5.jpg" alt=""/></p>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t <div class="div2">
\t \t \t \t \t \t \t \t \t <img src="images/380x325-6.jpg" alt=""/>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t <div class="featured-sellers-collage">
\t \t \t \t \t \t \t \t <div class="div1">
\t \t \t \t \t \t \t \t \t <p><img src="images/189x324-4.jpg" alt=""/></p>
\t \t \t \t \t \t \t \t \t <p><img src="images/189x324-5.jpg" alt=""/></p>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t <div class="div2">
\t \t \t \t \t \t \t \t \t <img src="images/380x325-6.jpg" alt=""/>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t <div class="featured-sellers-collage">
\t \t \t \t \t \t \t \t <div class="div1">
\t \t \t \t \t \t \t \t \t <p><img src="images/189x324-4.jpg" alt=""/></p>
\t \t \t \t \t \t \t \t \t <p><img src="images/189x324-5.jpg" alt=""/></p>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t <div class="div2">
\t \t \t \t \t \t \t \t \t <img src="images/380x325-6.jpg" alt=""/>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t <div class="featured-sellers-collage">
\t \t \t \t \t \t \t \t <div class="div1">
\t \t \t \t \t \t \t \t \t <p><img src="images/189x324-4.jpg" alt=""/></p>
\t \t \t \t \t \t \t \t \t <p><img src="images/189x324-5.jpg" alt=""/></p>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t <div class="div2">
\t \t \t \t \t \t \t \t \t <img src="images/380x325-6.jpg" alt=""/>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t <div class="featured-sellers-collage">
\t \t \t \t \t \t \t \t <div class="div1">
\t \t \t \t \t \t \t \t \t <p><img src="images/189x324-4.jpg" alt=""/></p>
\t \t \t \t \t \t \t \t \t <p><img src="images/189x324-5.jpg" alt=""/></p>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t <div class="div2">
\t \t \t \t \t \t \t \t \t <img src="images/380x325-6.jpg" alt=""/>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t <div class="featured-sellers-collage">
\t \t \t \t \t \t \t \t <div class="div1">
\t \t \t \t \t \t \t \t \t <p><img src="images/189x324-4.jpg" alt=""/></p>
\t \t \t \t \t \t \t \t \t <p><img src="images/189x324-5.jpg" alt=""/></p>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t <div class="div2">
\t \t \t \t \t \t \t \t \t <img src="images/380x325-6.jpg" alt=""/>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t <div class="featured-sellers-collage">
\t \t \t \t \t \t \t \t <div class="div1">
\t \t \t \t \t \t \t \t \t <p><img src="images/189x324-4.jpg" alt=""/></p>
\t \t \t \t \t \t \t \t \t <p><img src="images/189x324-5.jpg" alt=""/></p>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t <div class="div2">
\t \t \t \t \t \t \t \t \t <img src="images/380x325-6.jpg" alt=""/>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t \t <script src="js/jquery-1.12.2.min.js"></script>
\t \t \t \t \t <script src="js/owl.carousel.min.js"></script>
\t \t \t \t \t <script>
\t \t \t \t \t \t (function($){
\t \t \t \t
\t \t \t \t \t \t \t $('.carousel-featured-sellers').owlCarousel({
\t \t \t \t \t \t \t \t items: 3,
\t \t \t \t \t \t \t \t loop:true,
\t \t \t \t \t \t \t \t margin:15,
\t \t \t \t \t \t \t \t nav:true,
\t \t \t \t \t \t \t \t 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>"],
\t \t \t \t \t \t \t \t dots: true,
\t \t \t \t \t \t \t \t responsive:{
\t \t \t \t \t \t \t \t \t 0:{
\t \t \t \t \t \t \t \t \t \t items:1
\t \t \t \t \t \t \t \t \t },
\t \t \t \t \t \t \t \t \t 430:{
\t \t \t \t \t \t \t \t \t \t items:2
\t \t \t \t \t \t \t \t \t },
\t \t \t \t \t \t \t \t \t 800:{
\t \t \t \t \t \t \t \t \t \t items:3
\t \t \t \t \t \t \t \t \t },
\t \t \t \t \t \t \t \t \t 1400:{
\t \t \t \t \t \t \t \t \t \t items:4
\t \t \t \t \t \t \t \t \t },
\t \t \t \t \t \t \t \t \t 1800:{
\t \t \t \t \t \t \t \t \t \t items:6
\t \t \t \t \t \t \t \t \t },
\t \t \t \t \t \t \t \t \t 2400:{
\t \t \t \t \t \t \t \t \t \t items:7
\t \t \t \t \t \t \t \t \t },
\t \t \t \t \t \t \t \t \t 3000:{
\t \t \t \t \t \t \t \t \t \t items:9
\t \t \t \t \t \t \t \t \t }
\t \t \t \t \t \t \t \t }
\t \t \t \t \t \t \t })
\t \t \t \t \t \t \t
\t \t \t \t \t \t })(jQuery);
\t \t \t \t \t </script>
Der Teil, über den Stil (CSS):
.featured-sellers-collage .div1{
\t width: 100%;
}
.featured-sellers-collage .div1 p {
\t margin-bottom: 0;
\t margin-top: 0;
\t width:50%;
}
.featured-sellers-collage .div2 {
\t width: 100%;
\t margin-bottom: 0;
}
.featured-sellers-collage .div1 p:first-child {
\t float:left;
}
.featured-sellers-collage .div1 p:last-child {
\t float:right;
}
Bitte, lassen Sie mich wissen, wie das Problem zu lösen.