0

Bootstrap 4 Carousel with Responsive Slides

$(function() {
  'use strict';
  
	$('.carousel .carousel-item[data-src]').each(function() {
		var $this = $(this);

		$this.prepend([
			'<div style="background-image: url(', $this.attr('data-src'), ')"></div>'
		].join(''));
	});
});

<div class="carousel slide" id="demo-carousel" data-ride="carousel">
  <ol class="carousel-indicators">
    <li class="active" data-target="#demo-carousel" data-slide-to="1"></li>
    <li data-target="#demo-carousel" data-slide-to="2"></li>
    <li data-target="#demo-carousel" data-slide-to="3"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active" data-src="https://unsplash.it/800/400?random=1">
      <div class="carousel-caption">
        <h3>Test caption 1</h3>
        <p>Test caption description 1</p>
      </div>
    </div>
    <div class="carousel-item" data-src="https://unsplash.it/800/400?random=2">
      <div class="carousel-caption">
        <h3>Test caption 2</h3>
        <p>Test caption description 2</p>
      </div>
    </div>
    <div class="carousel-item" data-src="https://unsplash.it/800/400?random=3">
      <div class="carousel-caption">
        <h3>Test caption 3</h3>
        <p>Test caption description 3</p>
      </div>
    </div>
  </div><a class="left carousel-control" href="#demo-carousel" role="button" data-slide="prev"><span class="icon-prev" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#demo-carousel" role="button" data-slide="next"><span class="icon-next" aria-hidden="true"></span><span class="sr-only">Next</span></a>
</div>

.carousel {
  .carousel-item {
    height: 20em;

    > *:first-child {
      background: {
        // image: set inline on the element
        position: 50%;
        repeat: no-repeat;
        size: cover;
      }
      height: inherit;
    }
  }
}
RUN
add comment
Suggest a different solution or add another example