Search
Close
vi-VNen-US
Search

Custom Carousel

Custom navigation buttons

View Code
<div class="carousel slide" data-ride="carousel" id="carousel-example-eds_cNavigation" style="max-width: 800px;">
		<div class="carousel-inner">
			<div class="carousel-item active">
				<img alt="First slide" class="img-fluid" src="/portals/0/Images/image800300slide1.png" />
			</div>
			<div class="carousel-item">
				<img alt="Second slide" class="img-fluid" src="/portals/0/Images/image800300slide2.png" />
			</div>
			<div class="carousel-item">
				<img alt="Third slide" class="img-fluid" src="/portals/0/Images/image800300slide3.png" />
			</div>
		</div>
		<div class="eds_cNavigation">
			<a class="eds_cLeft" data-slide="prev" href="#carousel-example-eds_cNavigation" role="button"><span class="fas fa-angle-left"></span></a>
			<a class="eds_cRight" data-slide="next" href="#carousel-example-eds_cNavigation" role="button"><span class="fas fa-angle-right"></span></a>
		</div>
	</div>

Vertical middle outside navigation position

View Code
<div class="carousel slide" data-ride="carousel" id="carousel-example-eds_cNavigationVerticalMiddleOutside" style="max-width: 800px;">
		<div class="carousel-inner">
			<div class="carousel-item active">
				<img alt="First slide" class="img-fluid" src="/portals/0/Images/image800300slide1.png" />
			</div>
			<div class="carousel-item">
				<img alt="Second slide" class="img-fluid" src="/portals/0/Images/image800300slide2.png" />
			</div>
			<div class="carousel-item">
				<img alt="Third slide" class="img-fluid" src="/portals/0/Images/image800300slide3.png" />
			</div>
		</div>
		<div class="eds_cNavigation eds_verticalMiddleOutside">
			<a class="eds_cLeft" data-slide="prev" href="#carousel-example-eds_cNavigationVerticalMiddleOutside" role="button"><span class="fas fa-angle-left"></span></a>
			<a class="eds_cRight" data-slide="next" href="#carousel-example-eds_cNavigationVerticalMiddleOutside" role="button"><span class="fas fa-angle-right"></span></a>
		</div>
	</div>

Vertical middle inside navigation position

View Code
<div class="carousel slide" data-ride="carousel" id="carousel-example-eds_cNavigationVerticalMiddleInside" style="max-width: 800px;">
		<div class="carousel-inner">
			<div class="carousel-item active">
				<img alt="First slide" class="img-fluid" src="/portals/0/Images/image800300slide1.png" />
			</div>
			<div class="carousel-item">
				<img alt="Second slide" class="img-fluid" src="/portals/0/Images/image800300slide2.png" />
			</div>
			<div class="carousel-item">
				<img alt="Third slide" class="img-fluid" src="/portals/0/Images/image800300slide3.png" />
			</div>
		</div>
		<div class="eds_cNavigation eds_verticalMiddleInside">
			<a class="eds_cLeft" data-slide="prev" href="#carousel-example-eds_cNavigationVerticalMiddleInside" role="button"><span class="fas fa-angle-left"></span></a>
			<a class="eds_cRight" data-slide="next" href="#carousel-example-eds_cNavigationVerticalMiddleInside" role="button"><span class="fas fa-angle-right"></span></a>
		</div>
	</div>

Style 2 navigation buttons

View Code
<div class="carousel slide" data-ride="carousel" id="carousel-example-eds_cNavigationStyle2" style="max-width: 800px;">
		<div class="carousel-inner">
			<div class="carousel-item active">
				<img alt="First slide" class="img-fluid" src="/portals/0/Images/image800300slide1.png" />
			</div>
			<div class="carousel-item">
				<img alt="Second slide" class="img-fluid" src="/portals/0/Images/image800300slide2.png" />
			</div>
			<div class="carousel-item">
				<img alt="Third slide" class="img-fluid" src="/portals/0/Images/image800300slide3.png" />
			</div>
		</div>
		<div class="eds_cNavigation eds_verticalMiddleInside eds_style2">
			<a class="eds_cLeft" data-slide="prev" href="#carousel-example-eds_cNavigationStyle2" role="button"><span class="fas fa-angle-left"></span></a>
			<a class="eds_cRight" data-slide="next" href="#carousel-example-eds_cNavigationStyle2" role="button"><span class="fas fa-angle-right"></span></a>
		</div>
	</div>

Style 3 navigation buttons

View Code
<div class="carousel slide" data-ride="carousel" id="carousel-example-eds_cNavigationStyle3" style="max-width: 800px;">
		<div class="carousel-inner">
			<div class="carousel-item active">
				<img alt="First slide" class="img-fluid" src="/portals/0/Images/image800300slide1.png" />
			</div>
			<div class="carousel-item">
				<img alt="Second slide" class="img-fluid" src="/portals/0/Images/image800300slide2.png" />
			</div>
			<div class="carousel-item">
				<img alt="Third slide" class="img-fluid" src="/portals/0/Images/image800300slide3.png" />
			</div>
		</div>
		<div class="eds_cNavigation eds_style3">
			<a class="eds_cLeft" data-slide="prev" href="#carousel-example-eds_cNavigationStyle3" role="button"><span class="fas  fa-angle-double-left"></span></a>
			<a class="eds_cRight" data-slide="next" href="#carousel-example-eds_cNavigationStyle3" role="button"><span class="fas fa-angle-double-right"></span></a>
		</div>
	</div>
Back To Top