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

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

HTML

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