How to display Canvas Slider

alinlabauMar 20, 2024

Hello Guys,

I'm a junior programmer and I read the documention , but I cannot figure out how to display on my page a slider exactly as the one on your website available below. Could you kindly provide the code please ? and dependencies if any.

https://canvastemplate.com/index-portfolio-4.html

Thank you from the bottom of my hearth!

SemiColonWebSTAFFMay 1, 2024

Hello,

Thanks for your Patience and Apologies for the Delays in replying.

Please consider using the following code:

<div class="fslider mb-5" data-animation="fade">
	<div class="flexslider">
		<div class="slider-wrap">
			<div class="slide">
				<a href="#" class="d-block position-relative">
					<img src="images/portfolio/1/full/2.jpg" alt="Slide 1">
					<div class="bg-overlay">
						<div class="bg-overlay-content justify-content-start align-items-end">
							<div class="h3 fw-light py-2 px-3 bg-light text-dark ms-3 mb-3 rounded">Responsive Ready Design</div>
						</div>
					</div>
				</a>
			</div>
			<div class="slide">
				<a href="#" class="d-block position-relative">
					<img src="images/portfolio/1/full/3.jpg" alt="Slide 2">
					<div class="bg-overlay">
						<div class="bg-overlay-content justify-content-end align-items-end">
							<div class="h3 fw-light py-2 px-3 bg-dark text-light me-3 mb-3 rounded">Retina Graphics Display</div>
						</div>
					</div>
				</a>
			</div>
			<div class="slide">
				<a href="#" class="d-block position-relative">
					<img src="images/portfolio/1/full/4.jpg" alt="Slide 3">
					<div class="bg-overlay">
						<div class="bg-overlay-content">
							<div class="h3 fw-light py-2 px-3 bg-color text-light rounded">Bootstrap 4.x Compatible</div>
						</div>
					</div>
				</a>
			</div>
			<div class="slide">
				<a href="#" class="d-block position-relative">
					<img src="images/portfolio/1/full/5.jpg" alt="Slide 4">
					<div class="bg-overlay">
						<div class="bg-overlay-content">
							<div class="h3 fw-light py-2 px-3 bg-warning text-dark rounded">eCommerce Design Included</div>
						</div>
					</div>
				</a>
			</div>
		</div>
	</div>
</div>

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.