Geek Answers Handbook

How to use owl carousel background images

I would like to use an owl carousel with background images, not tags <img>, as in http://driveshift.com/car/c10148 . However, each example included in the plugin site uses tags img.

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

+5
source share
4 answers

Check out the sample code at https://owlcarousel2.imtqy.com/OwlCarousel2/demos/lazyLoad.html

LazyLoad HTML strucutre class= "owl-lazy" data-src= "url_to_img" / data-src-retina = "url_to_highres_img". , DOM, Owl css.

, <div> <img>, .

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

, CSS div, . , !

+8

, Paulshen, . div src URL- , css media, , .

, , :

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,
  }
);
+2

:

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")+")");
        });
    }
});

lazyLoad. css .

+2

( ) , 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');
}

CODEPEN

0

More articles:


All Articles