Adjust height of owl-carousel

BSpassky picture BSpassky · May 25, 2016 · Viewed 24.2k times · Source

Currently the owl-carousel that I have employed in my website is far too tall, as it takes up more than the full screen. From the demo on owl-carousel for one image per slide it appears that it is possible to adjust the height. I am using the latest version of owl carousel 2. I also tried wrapping the carousel in another div and adjusting the height of the outer div. I have noticed that I can adjust the width, which also has the effect of adjusting height. However, I would like to adjust the height without adjusting the width. I have attached my javascript and html. Thanks.

 <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> 

And the javascript:

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

Answer

Suresh Patel picture Suresh Patel · May 24, 2017

Add autoHeight:true it will set the height of the carousel to auto.

See below the correct code

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