Owl Carousel Height Adjust

Question

I am building a site that features an owl carousel at the top of the home page. The site is in its preliminary stages, and I'm having an issue with the carousel.

I want the carousel to remain responsive, while the images adjust so they fill the entire height of the window/screen. In other words, I don't want the images to resize; just to recenter as the window gets smaller. Right now, they are just shrinking when the window resizes.

This is my current code:

HTML

    <section id="sidebar">
        <div id="owl" class="owl-carousel"> 
            <div class="item" id="item-1"><img src="assets/img/motel.jpg" alt=""></div>
            <div class="item" id="item-2"><img src="assets/img/gas.jpg" alt=""></div>
            <div class="item" id="item-3"><img src="assets/img/sofia.jpg" alt=""></div>
       </div>
    </section>

JS:

    $(document).ready(function() {
        $("#owl").owlCarousel({
            navigation: true,
            slideSpeed: 300,
            paginationSpeed: 400,
            items: 1,
            autoplay: 3000,
            stopOnHover: true,
            loop: true,
        });
    });

CSS:

    #owl .item img {
        display: block;
        widows: auto;
        height: 100%;
        min-height: 523px;
    }

Here is a link to the full site (so far) on github: https://jnikkiyoke.github.io/project/

Any help would be much appreciated!

Jonathan Dion Jonathan Dion · Accepted Answer · 2017-04-11T01:20:04

The easy way is to remove the <img/> tag and use background instead :

.item {
    height: 100vh;
    width: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

#item-3{
    background-image: url("assets/img/gas.jpg");
}

You can also remove the min-height on #owl .item img

You may also want to add height: 100vh; and width: auto;. Use media queries for different ratios.

Owl Carousel Height Adjust

1 Answers