2017-08-09 2 views
1

Ich versuche, einen Teil des anderen Artikels auf der linken Seite anzuzeigen und vollständige Artikel auf der rechten Seite mit Eulenkarussell anzuzeigen.Zeigen Sie die Hälfte des anderen Artikels auf Owl Carousel

Für jedes Element habe ich ein Bannerbild und den Text, die mit den Bootstrap-Raster Spalten aufgeteilt werden.

Ich konnte die Teilanzeige mit Stagepadding erreichen: 200 und um das Teilbild nur auf der linken Seite anzuzeigen, benutzte ich rechts: -200px in css auf .owl-Stage-Klasse.

Nun ist das Problem, dass auf der linken Seite ich das Banner Bild dieses Teil Folie angezeigt werden müssen, nicht der Text ...

Eule Schieber, um die aktive Klasse hat, so mit CSS Ich habe versucht, sich zu verstecken diese Textspalte, wenn sie NICHT aktiv ist ... es hat funktioniert, aber alles, was ich sehe, ist ein leerer Platz auf der linken Seite, es hat das Bannerbild nicht automatisch gedrückt.

Bitte lesen Sie sich die Screenshots Was Im zu erreichen versuchen: http://imgur.com/MlaN5t5 Was erhalte ich: http://imgur.com/z1UG6lK

dass weißer Raum mit Textspalte gefüllt ist eigentlich, ist aber mit CSS versteckt. Ich brauche das Bannerbild von links, um den gesamten Bereich zu übernehmen, wenn es teilweise angezeigt wird, aber wenn dieser bestimmte Objektträger aktiv ist, dann zeige ich wie gewohnt Bild und Text.

Dies ist mein js-Skript.

\t \t \t jQuery(document).ready(function($) { 
 
\t \t \t \t $('.owl-carousel').owlCarousel({ 
 
\t \t \t \t \t center: true, 
 
\t \t \t \t \t autoplay:false, 
 
\t \t \t \t \t autoplayTimeout:5000, 
 
\t \t \t \t \t autoplayHoverPause:false, 
 
\t \t \t \t \t stagePadding: 150, 
 
\t \t \t \t \t items:1,   
 
\t \t \t \t \t loop:true,  
 
\t \t \t \t \t margin:0,  
 
\t \t \t \t \t responsive:{ 
 
\t \t \t \t \t \t 600:{ 
 
\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 onInitialized : function(){ 
 
\t \t \t \t \t \t if($('.owl-item').first().hasClass('active')) 
 
\t \t \t \t \t \t \t $('.owl-prev').hide(); 
 
\t \t \t \t \t \t else 
 
\t \t \t \t \t \t \t $('.owl-prev').show(); 
 
\t \t \t \t \t } 
 
\t \t \t \t }); 
 
\t \t \t });

Antwort

0

Der einfachste Weg, dies zu tun ist durch die Verwendung stagePadding: 100

jQuery(document).ready(function(){ 
    jQuery('.owl-carousel').owlCarousel({ 
     margin: 10, 
     loop: true, 
     items: 1, 
     stagePadding: 100 
    }); 
});