2016-04-14 12 views
0

Ich habe ein kleines Problem. Ich mit OwlCarousel 2 ‚Testimonial Rotator/Schieber‘ zu machen, aber es sieht so aus: enter image description hereEulenkarussell schneiden div

Aber ich brauche wie diese some - das Bild oben abgeschnittene ist: enter image description here

Ich packte ‚box‘ in einem mehr div, aber es ist nicht fix es.
Hier ist mein HTML:

<div> 
    <div class="testimonial-box"> 
     <div class="testimonial-content"> 
      <div class="testimonial-logo"> 
       <img src="http://placehold.it/100x100" alt="" class="img-responsive img-thumbnail pull-left" /> 
      </div> 
      <p> 
       <!-- CONTENT --> 
      </p> 
      <div class="testimonial-meta"> 
       <p> 
        <h5>Lorem Ipsum</h5> 
        <span>, <i>Web Developer</i></span> 
       </p> 
       <p class="website"> 
        <a href="http://vrs-factory.pl">VRS-Factory</a> 
       </p> 
      </div> 
     </div> 
    </div> 
</div> 

und CSS [SASS]:

section.testimonials { 
     padding: 30px 0; 

     .testimonial-logo { 
      img { 
       margin-top: -88px; 
      } 
     } 

     .testimonial-content { 
      border: 1px solid rgba($SecondColor, .2); 
      border-radius: 3px; 
      padding: 20px; 
     } 

     .testimonial-meta { 
      h5 { 
       display: inline-block; 
       margin-bottom: 0; 
      } 
     } 

     .owl-carousel { 
      .owl-item { 
       img { 
        width: auto; 
       } 
      } 
     } 
    } 

UPDATE: Hier Demo: DEMO

+0

Können Sie bitte etwas JSFiddle (jsfiddle.net) teilen Sie das Problem zu reproduzieren? Der von Ihnen angegebene Code stimmt nicht genau mit Ihrem Problem überein. –

+0

@VincentG Sicher, ich habe einen Link hinzugefügt – Vertisan

Antwort

0

Es war, weil die overflow: hidden von .owl-carousel .owl-stage-outer.

Ich füge ein margin-top auf .owl-item, um es zu beheben.

.owl-item { margin-top: 70px; } 

Live example

Verwandte Themen