How to use background images with owl carousel

Question

I\'d like to use owl carousel with background images rather than tags, like used in http://driveshift.com/car/c10148. However, every example include

Answer 1

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:

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