Carousel + Lightbox

[middlemann]

anyway to make this full width carousel open a lightbox instead of directing to a different page?

https://www.okler.net/previews/porto/12.0.0/elements-carousels.html

the Full Width carousel

---

[Support]

You can find examples in this page: https://www.okler.net/previews/porto/12.0.0/elements-lightboxes.html

---

[middlemann]

Nice.
Any way to make it auto play?
Any way to make images display larger in the carousel?

---

[Support]

You can change optiokns the same way as any other carousel:

<div class="lightbox" data-plugin-options="{'delegate': 'a', 'type': 'image', 'gallery': {'enabled': true}, 'mainClass': 'mfp-with-zoom', 'zoom': {'enabled': true, 'duration': 300}}">
		<div class="owl-carousel owl-theme stage-margin" data-plugin-options="{'responsive': {'576': {'items': 1}, '768': {'items': 1}, '992': {'items': 2}, '1200': {'items': 3}}, 'autoplay': true, 'autoplayTimeout': 4000, 'loop': true, 'margin': 10, 'nav': true, 'dots': false, 'stagePadding': 40}">
			<div>
				<a class="img-thumbnail img-thumbnail-no-borders img-thumbnail-hover-icon" href="img/projects/project-1.jpg">
					<img class="img-fluid" src="img/projects/project-1.jpg" alt="Project Image">
				</a>
			</div>
			<div>
				<a class="img-thumbnail img-thumbnail-no-borders img-thumbnail-hover-icon" href="img/projects/project-2.jpg">
					<img class="img-fluid" src="img/projects/project-2.jpg" alt="Project Image">
				</a>
			</div>
			<div>
				<a class="img-thumbnail img-thumbnail-no-borders img-thumbnail-hover-icon" href="img/projects/project-3.jpg">
					<img class="img-fluid" src="img/projects/project-3.jpg" alt="Project Image">
				</a>
			</div>
			<div>
				<a class="img-thumbnail img-thumbnail-no-borders img-thumbnail-hover-icon" href="img/projects/project-4.jpg">
					<img class="img-fluid" src="img/projects/project-4.jpg" alt="Project Image">
				</a>
			</div>
			<div>
				<a class="img-thumbnail img-thumbnail-no-borders img-thumbnail-hover-icon" href="img/projects/project-5.jpg">
					<img class="img-fluid" src="img/projects/project-5.jpg" alt="Project Image">
				</a>
			</div>
			<div>
				<a class="img-thumbnail img-thumbnail-no-borders img-thumbnail-hover-icon" href="img/projects/project-6.jpg">
					<img class="img-fluid" src="img/projects/project-6.jpg" alt="Project Image">
				</a>
			</div>
			<div>
				<a class="img-thumbnail img-thumbnail-no-borders img-thumbnail-hover-icon" href="img/projects/project-7.jpg">
					<img class="img-fluid" src="img/projects/project-7.jpg" alt="Project Image">
				</a>
			</div>
			<div>
				<a class="img-thumbnail img-thumbnail-no-borders img-thumbnail-hover-icon" href="img/projects/project.jpg">
					<img class="img-fluid" src="img/projects/project.jpg" alt="Project Image">
				</a>
			</div>
		</div>
	</div>
</div>

---

[Author]

Posts