Adjust height of owl-carousel

Question

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> nesella@comcast.net <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
  })

Is it possible to put this on jsfiddle with all the JS, CSS and HTML codes? It will help a lot to trouble shoot. — BigRedDog, May 25 '16 at 01:13

score 0 · Answer 1 · answered May 24 '17 at 07:09

0

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

answered May 24 '17 at 07:09

Suresh Patel

15
1
8

1

Can I limit the maximum height somehow of the autoHeight? It blows up the image too tall when it fits the width. – Csaba Toth Aug 07 '20 at 20:21

score 0 · Answer 2 · answered May 24 '17 at 07:24

The owl carousel normally has a different height according to the images placed in the carousel. To create an height that won't change you can use

autoHeight: true

This changes the height of the carousel according to the biggest image or item inside the carousel. So the plan is to calculate all visible items and change height according to heighest item. Your full JS code would be as follows:

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

Can I limit the maximum height somehow of the autoHeight? It blows up the image too tall when it fits the width. — Csaba Toth, Aug 07 '20 at 20:21

Adjust height of owl-carousel

2 Answers2