CODEWITHSUNDEEP
javascriptjquery
Salman Ahmed
Salman Ahmed

Reputation: 61

How to use background images with owl carousel

I'd like to use owl carousel with background images rather than <img> tags, like used in http://driveshift.com/car/c10148. However, every example included in the plugin site uses the img tags.

When you inspect the Shift carousel, it uses url images as data-src attributes and then owl carousel auto converts them to background images. Any suggestions?

Upvotes: 5

Views: 32153

Answers (4)

dragoweb
dragoweb

Reputation: 731

If you want to display different images (size or aspect ratio) on smaller screens, then you can use padding-top with background-image.

HTML

<section>
  <div class="owl-carousel owl-theme">
    <div class="slider"><a class="one" href="#"></a></div>   
    <div class="slider"><a class="two" href="#"></a></div>
    <div class="slider"><a class="three" href="#"></a></div>
  </div>
</section>

CSS

section {
  max-width: 1200px;
  margin: 0 auto;
}
.slider a {
  background-position: center;
  background-size: cover;  
  display: block;
  width: 100%;
  height: auto;
  padding-top: 18.33%; /** HEIGHT : WIDTH x 100 **/
}
.one {
  background-image: url('https://picsum.photos/1200/220?random=1');
}
.two {
  background-image: url('https://picsum.photos/1200/220?random=2');
}
.three {
  background-image: url('https://picsum.photos/1200/220?random=3');
}

Full code and demo on CODEPEN

Upvotes: 1

paulshen
paulshen

Reputation: 384

Check out the example code at https://owlcarousel2.github.io/OwlCarousel2/demos/lazyLoad.html

LazyLoad HTML strucutre requires class="owl-lazy" and data-src="url_to_img" or/and data-src-retina="url_to_highres_img". If you set above settings not on but on other DOM element then Owl will load an image into css inline background style.

Therefore, if you use <div> instead of <img>, you'll get your desired result.

<div class="owl-lazy" data-src="http://placehold.it/350x250&text=3">

Note that you may need to add some CSS to the div for it to look correctly. Hope that helps!

Upvotes: 11

Zastrich
Zastrich

Reputation: 191

Example:

HTML:

<div class="owl-carousel">
    <figure style="background-image:url(loading.gif)" data-src="image-real.jpg"></figure>
    <figure style="background-image:url(loading.gif)" data-src="image-real-2.jpg"></figure>
    <figure style="background-image:url(loading.gif)" data-src="image-real-3.jpg"></figure>
    <figure style="background-image:url(loading.gif)" data-src="image-real-4.jpg"></figure>
</div>

CSS:

.owl-carousel figure {width:100%; height:450px; background-size:cover; background-position:center center; background-repeat:no-repeat;}

JS:

$('.owl-carousel').owlCarousel({
    onTranslated: function(me){
        $(me.target).find(".owl-item.active [data-src]:not(.loaded)").each(function(i,v){
            $(v).addClass("loaded").css("background-image", "url("+$(v).attr("data-src")+")");
        });
    }
});

Don't need use lazyLoad functions. Use animations on css to personalize your effects.

Upvotes: 2

Amazing Sey
Amazing Sey

Reputation: 69

I was somewhat looking for a similar solution to your question and following the solution proposed by Paulshen I had it working. Basically I created my carousel elements with div and set the data src to the image url pulled from the database and then manipulated it with css and media queries to get it working correctly as he suggested.

Hope this helps, find below:

HTML:

<div class="owl-carousel owl-theme">
<div class="slide-item owl-lazy" data-src="https://placehold.it/350x250&text=3"></div>
<div class="slide-item owl-lazy" data-src="https://placehold.it/350x250&text=3"></div>
</div>

CSS:

.slide-item{ position: relative;
background-repeat: no-   repeat;
background-position: top center;background-size: cover;}

Css Media Queries:

@media screen and (max-width: 39.9375em) {
.slide-item{min-height: 280px;background-position: center;    background-size: cover;} }
@media screen and (min-width: 40em) {
.slide-item{ height: 360px; min-height: 360px;} }
@media screen and (min-width: 64em) {
.slide-item{ height: 600px; min-height: 600px;}}

JS:

$('.owl-carousel').owlCarousel(
{
    lazyLoad:true,
    items:1,
    autoplay: true,
    smartSpeed: 1500,
    nav:true,
    dots: true,
    loop : true,
  }
);

Upvotes: 4

Related Questions