Slider with responsive width and fixed height

Question

I'm working on a website and I need to put an image slider as the header. I would like the slideshow to be the full width of the page, and to have a height that remains fixed (perhaps using viewport units). Ideally, it would crop the images width as the viewport got narrower. I have tried to implement this numerous times using several different slider plugins (Owl Carousel, Slippry and Flexslider 2), but nothing has worked. Right now I have it sort of working by creating 3 different slideshows (1 for desktop, 1 for tablets, and 1 for mobile) and then using media queries to show or hide each one, but this means that the browser must load the slideshow 3 different times, causing my page load times to be very high.

What is the best way to achieve what I would like?

Answer 1

The easiest solution is to use a background image with background-size: cover . This will make the image just big enough so it fills the entire slide, cropping any extra width or height.

Another option, if you want to use img , is to absolutely position the image and then center it with CSS. This sometimes results in letterboxing, depending on the image's aspect ratio, but the CSS would look like this:

.slide img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: 100%;
    transform: translate(-50%, -50%);
}

This will result in an image whose height fills the slide, and is both vertically and horizontally centered in the slide (you'll likely need vendor prefixes for transform , depending on browsers you need to support).

Either of these solutions should accommodate responsive slides of any dimension.

Answer 2

I think you are looking for something like this. This one will be working in small devices and tablets also. You can have multiple carousels on the same page as well. Just replicate the "DIV"-"SpecDataWrap" and change the ID.

<div class="ContainerWrap">
    <div class="Container">
        <div class="AllSpecsDataWrap">
            <div class="SpecDataWrap" id="SpecDataWrap1">
                <div class="SpecDataSlides activeNavSlide">
                    <img src="http://s19.postimg.org/lzem156s3/image1.jpg" />
                    <div class="SpecDesc SpecDescRight">
                        <h2>Choose to be unique.</h2>
                        <div class="SpecDescDetails">
                            Metal accents, colorful hues, real woods and leathers, and a customizable laser-etched signature offer thousands of ways to make your Moto X unique.
                        </div>
                    </div>
                </div>
                <div class="SpecDataSlides InActiveNavSlide">
                    <img src="http://s19.postimg.org/6cira13mb/image2.jpg" />
                    <div class="SpecDesc SpecDescLeft">
                        <h2>Choose to be unique.</h2>
                        <div class="SpecDescDetails">
                            Metal accents, colorful hues, real woods and leathers, and a customizable laser-etched signature offer thousands of ways to make your Moto X unique.
                        </div>
                    </div>
                </div>
                <div class="SpecDataSlides InActiveNavSlide">
                    <img src="http://s19.postimg.org/f4zpxpor7/image3.jpg" />
                    <div class="SpecDesc SpecDescRight">
                        <h2>Choose to be unique.</h2>
                        <div class="SpecDescDetails">
                            Metal accents, colorful hues, real woods and leathers, and a customizable laser-etched signature offer thousands of ways to make your Moto X unique.
                        </div>
                    </div>
                </div>
                <div class="SpecSlideNavigation">
                    <div class="leftNavSpec SpecSlideNav"></div>
                    <div class="bulletsNavSpec">
                        <ul>
                            <li class="activeImage"></li>
                            <li class="InActiveImage"></li>
                            <li class="InActiveImage"></li>
                        </ul>
                        <div class="clearFix"></div>
                    </div>
                    <div class="RightNavSpec SpecSlideNav"></div>
                </div>
                <div class="clearFix"></div>
            </div>
        </div>
    </div>
</div>

You can see the JS and CSS code here: https://jsfiddle.net/raju_sumit/Ld21vutz/