2016-05-25 11 views
2

Derzeit ist das Eulenkarussell, das ich auf meiner Website eingesetzt habe, viel zu groß, da es mehr Platz beansprucht als der ganze Bildschirm. Von der Demo auf Eulenkarussell für ein Bild pro Folie scheint es, dass es möglich ist, die Höhe anzupassen. Ich benutze die neueste Version von Eulenkarussell 2. Ich habe auch versucht, das Karussell in ein anderes Div zu wickeln und die Höhe des äußeren Div anzupassen. Ich habe festgestellt, dass ich die Breite einstellen kann, was sich auch auf die Höhe auswirkt. Allerdings möchte ich die Höhe anpassen, ohne die Breite anzupassen. Ich habe mein Javascript und HTML angehängt. Vielen Dank.Höhe des Eulenkarussells einstellen

<body> 
    <div id="navigation"> 
     <ul> 
     <li> <%= link_to "About", pages_about_path, id: "about-link"; %> </li> 
     <li> <%= link_to "Contact Us", pages_contact_us_path; %> </li> 
     </ul> 
    </div> 

    <div class="wrapper"> 


    <h1><img src="http://cdn-0.famouslogos.us/images/computer-logos/ab-computer-repair-logo.jpg"> </h1> 

     <div id="carousel" class="owl-carousel owl-theme"> 
      <div class="item"><img src="https://responsivedesign.is/__data/assets/image/0013/5017/Owl-Carousel-2.jpg"></div> 
      <div class="item"><img style="width:100%; height:auto;" src="http://www.pcgeeksusa.com/wp-content/uploads/2015/01/computer-repair.jpg"></div> 
     </div> 


     <div class="contact"> 
     <aside> 
      <h2>Contact Info</h2> 
      <p> Nomadic Inc. <br> 
       Tuscaloosa, AL 35404 <br> 
       <b> E-mail: </b> [email protected] <br> 
       <b> Phone: </b> 205-799-1668 

      </p> 
     </aside> 
     </div> 
    </div> 
</body> 

Und das javascript:

$ -> 
    $("#carousel").owlCarousel({ 
    autoplay: true, 
    items: 1, 
    loop: true, 
    navigation : true, 
    slideSpeed : 300, 
    paginationSpeed : 400, 
    singleItem:true 
    }) 
+0

Ist es möglich, dies mit allen JS, CSS und HTML-Codes auf jsfiddle zu setzen? Es wird viel helfen, Probleme zu erschießen. – BigRedDog

Antwort

0

Autoheight hinzufügen: true es wird die Höhe des Karussells auf auto gesetzt.

Siehe unter dem richtigen Code

$("#carousel").owlCarousel({ 
    autoplay: true, 
    items: 1, 
    loop: true, 
    navigation : true, 
    slideSpeed : 300, 
    paginationSpeed : 400, 
    singleItem:true, 
    autoHeight:true 
}) 
0

Die owl Karussells haben normalerweise eine unterschiedliche Höhe je nach den in dem Karussell angeordnet Bildern. Um eine height zu erstellen, die sich nicht ändern Sie

autoHeight: true 

Dadurch ändert sich die height des Karussells nach dem größten Bild oder ein Element innerhalb des Karussells verwenden können. Der Plan besteht also darin, alle sichtbaren Gegenstände zu berechnen und die Höhe entsprechend dem höchsten Gegenstand zu ändern. Ihr voller JS Code würde wie folgt aussehen:

$("#carousel").owlCarousel({ 
    autoplay: true, 
    items: 1, 
    loop: true, 
    navigation : true, 
    slideSpeed : 300, 
    paginationSpeed : 400, 
    singleItem:true 
    autoHeight:true 
})