Modal Carousel

coconghaileMar 2, 2022

I was wondering if you could help? I'm looking to create a modal popup on my homepage that has an image (25 images) carousel running in it. Do you have any modal likes that currently? Or could you tell me which modal design to use and which carousel code to add inside the modal?

SemiColonWebSTAFFMar 3, 2022

Hello,

You can use Carousel with both Modals. Simply add the Carousel Codes inside the Modal, example:

<!-- Large modal -->
<button class="btn btn-primary me-2" data-bs-toggle="modal" data-bs-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title" id="myModalLabel">Modal Heading</h4>
				<button type="button" class="btn-close btn-sm" data-bs-dismiss="modal" aria-hidden="true"></button>
			</div>
			<div class="modal-body">
				<div id="oc-images" class="owl-carousel image-carousel carousel-widget" data-items-xs="2" data-items-sm="3" data-items-lg="4" data-items-xl="5">

					<div class="oc-item">
						<a href="#"><img src="images/portfolio/4/4-1.jpg" alt="Image 1"></a>
					</div>
					<div class="oc-item">
						<a href="#"><img src="images/portfolio/4/6-1.jpg" alt="Image 2"></a>
					</div>
					<div class="oc-item">
						<a href="#"><img src="images/portfolio/4/6-2.jpg" alt="Image 3"></a>
					</div>
					<div class="oc-item">
						<a href="#"><img src="images/portfolio/4/6-3.jpg" alt="Image 4"></a>
					</div>
					<div class="oc-item">
						<a href="#"><img src="images/portfolio/4/9-1.jpg" alt="Image 5"></a>
					</div>
					<div class="oc-item">
						<a href="#"><img src="images/portfolio/4/9-2.jpg" alt="Image 6"></a>
					</div>
					<div class="oc-item">
						<a href="#"><img src="images/portfolio/4/12-1.jpg" alt="Image 7"></a>
					</div>

				</div>
			</div>
		</div>
	</div>
</div>

and then add the JS Codes at the bottom of the Page:

<script>
	$('.bs-example-modal-lg').on('shown.bs.modal', event => {
		SEMICOLON.widget.carousel();
	});
</script>

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.