To insert this widget with scrolling images – see the steps below:
Go to Appearance -> Widgets -> Drag widget “Advanced Text” to the right where you want to be, and in the Text insert this code:
<section style=”margin-top: 50px;”>
<div class=”container mt-5″>
<div class=”row”>
<div class=”col-lg-7 mb-3″>
<div id=”mainCarousel” class=”carousel slide” data-ride=”carousel”>
<div class=”carousel-inner”>
<div class=”carousel-item active”>
<img src=”https://images.unsplash.com/photo-1588706838478-acc49b5d9fcf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80” alt=”zen templates” class=”d-block w-100″>
</div>
<div class=”carousel-item”>
<img src=”https://images.unsplash.com/photo-1557592722-a0a649c8c5c6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80” alt=”zen templates” class=”d-block w-100″>
</div>
<div class=”carousel-item”>
<img src=”https://images.unsplash.com/photo-1540730820882-0812eb966b2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80” alt=”zen templates” class=”d-block w-100″>
</div>
</div>
<a href=”#mainCarousel” class=”carousel-control-prev” data-slide=”prev” role=”button”>
<span class=”carousel-control-prev-icon” aria-hidden=”true”></span>
<span class=”sr-only”>Previous</span>
</a>
<a href=”#mainCarousel” class=”carousel-control-next” data-slide=”next” role=”button”>
<span class=”carousel-control-next-icon” aria-hidden=”true”></span>
<span class=”sr-only”>Next</span>
</a>
</div>
</div>
<div class=”col-lg-5″>
<h3>SAMPLE IMAGES</h3>
<p class=”lead”>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi dolores voluptas sit. Quia harum debitis fugit!
Veritatis a vero in laborum vel, explicabo tenetur repudiandae modi at dolorum architecto rem sequi suscipit maxime
unde similique, est impedit vitae nihil exercitationem?</p>
<a href=””>See for yourself <i class=”fa fa-arrow-right”></i></a>
</div>
</div>
</div>
</section>
To change the images, you should insert your own image URLs. After that – Save. And That’s it.