Carousel 6 Column Product Slider with B4

<!DOCTYPE html>
<html>
<head>
    <title>CAROUSEL 6 COLUMN PRODUCT SLIDER WITH B4 | par NGLESSON</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keyword" content="CAROUSEL 6 COLUMN PRODUCT SLIDER WITH B4">
    <meta name="author" content="Mezgani said">
    <meta name="copyright" content="NGLESSON">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="style.css"  rel="stylesheet" type="text/css">
</head>
<body>
	<section class="my-5">
		<div class="container">
		<div class="col-xl-12">
		<h2 class="text-center text-white">Carousel 6 Column Product Slider</h2>
		</div>
		
			<div id="carouselSixColumn" class="carousel slide" data-ride="carousel" data-interval="6000">
			  <div class="carousel-inner">
				<div class="carousel-item active">
					<div class="row">
					  <div class="col-xl-2 col-lg-3 col-md-6 col-sm-6 col-xs-12 p-1">				
						<div class="card">
						  <img src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" class="w-100">
						  <div class="card-body">
							<h5 class="card-title">Product Name</h5>
							<p class="card-text">Product Description</p>
							<a href="#" class="btn btn-outline-success w-100">Show</a>
						  </div>
						</div>
					  </div>
					  <div class="col-xl-2 col-lg-3 col-md-6 col-sm-6 col-xs-12 p-1">				
						<div class="card">
						  <img src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" class="w-100">
						  <div class="card-body">
							<h5 class="card-title">Product Name</h5>
							<p class="card-text">Product Description</p>
							<a href="#" class="btn btn-outline-success w-100">Show</a>
						  </div>
						</div>
					  </div>
					  <div class="col-xl-2 col-lg-3 col-md-6 col-sm-6 col-xs-12 p-1">				
						<div class="card">
						  <img src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" class="w-100">
						  <div class="card-body">
							<h5 class="card-title">Product Name</h5>
							<p class="card-text">Product Description</p>
							<a href="#" class="btn btn-outline-success w-100">Show</a>
						  </div>
						</div>
					  </div>
					  <div class="col-xl-2 col-lg-3 col-md-6 col-sm-6 col-xs-12 p-1">				
						<div class="card">
						  <img src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" class="w-100">
						  <div class="card-body">
							<h5 class="card-title">Product Name</h5>
							<p class="card-text">Product Description</p>
							<a href="#" class="btn btn-outline-success w-100">Show</a>
						  </div>
						</div>
					  </div>
					  <div class="col-xl-2 col-lg-3 col-md-6 col-sm-6 col-xs-12 p-1">				
						<div class="card">
						  <img src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" class="w-100">
						  <div class="card-body">
							<h5 class="card-title">Product Name</h5>
							<p class="card-text">Product Description</p>
							<a href="#" class="btn btn-outline-success w-100">Show</a>
						  </div>
						</div>
					  </div>
					  <div class="col-xl-2 col-lg-3 col-md-6 col-sm-6 col-xs-12 p-1">				
						<div class="card">
						  <img src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" class="w-100">
						  <div class="card-body">
							<h5 class="card-title">Product Name</h5>
							<p class="card-text">Product Description</p>
							<a href="#" class="btn btn-outline-success w-100">Show</a>
						  </div>
						</div>
					  </div>
					</div>
				</div>
				<div class="carousel-item">
				 <div class="row">
				  <div class="col-xl-2 col-lg-3 col-md-6 col-sm-6 col-xs-12 p-1">				
					<div class="card">
					  <img src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" class="w-100">
					  <div class="card-body">
						<h5 class="card-title">Product Name</h5>
						<p class="card-text">Product Description</p>
						<a href="#" class="btn btn-outline-success w-100">Show</a>
					  </div>
					</div>
				  </div>
				  <div class="col-xl-2 col-lg-3 col-md-6 col-sm-6 col-xs-12 p-1">				
					<div class="card">
					  <img src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" class="w-100">
					  <div class="card-body">
						<h5 class="card-title">Product Name</h5>
						<p class="card-text">Product Description</p>
						<a href="#" class="btn btn-outline-success w-100">Show</a>
					  </div>
					</div>
				  </div>
				  <div class="col-xl-2 col-lg-3 col-md-6 col-sm-6 col-xs-12 p-1">				
					<div class="card">
					  <img src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" class="w-100">
					  <div class="card-body">
						<h5 class="card-title">Product Name</h5>
						<p class="card-text">Product Description</p>
						<a href="#" class="btn btn-outline-success w-100">Show</a>
					  </div>
					</div>
				  </div>
				  <div class="col-xl-2 col-lg-3 col-md-6 col-sm-6 col-xs-12 p-1">				
					<div class="card">
					  <img src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" class="w-100">
					  <div class="card-body">
						<h5 class="card-title">Product Name</h5>
						<p class="card-text">Product Description</p>
						<a href="#" class="btn btn-outline-success w-100">Show</a>
					  </div>
					</div>
				  </div>
				  <div class="col-xl-2 col-lg-3 col-md-6 col-sm-6 col-xs-12 p-1">				
					<div class="card">
					  <img src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" class="w-100">
					  <div class="card-body">
						<h5 class="card-title">Product Name</h5>
						<p class="card-text">Product Description</p>
						<a href="#" class="btn btn-outline-success w-100">Show</a>
					  </div>
					</div>
				  </div>
				  <div class="col-xl-2 col-lg-3 col-md-6 col-sm-6 col-xs-12 p-1">				
					<div class="card">
					  <img src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" class="w-100">
					  <div class="card-body">
						<h5 class="card-title">Product Name</h5>
						<p class="card-text">Product Description</p>
						<a href="#" class="btn btn-outline-success w-100">Show</a>
					  </div>
					</div>
				  </div>
				</div>
				</div>
				<div class="carousel-item">
				<div class="row">
				  <div class="col-xl-2 col-lg-3 col-md-6 col-sm-6 col-xs-12 p-1">				
					<div class="card">
					  <img src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" class="w-100">
					  <div class="card-body">
						<h5 class="card-title">Product Name</h5>
						<p class="card-text">Product Description</p>
						<a href="#" class="btn btn-outline-success w-100">Show</a>
					  </div>
					</div>
				  </div>
				  <div class="col-xl-2 col-lg-3 col-md-6 col-sm-6 col-xs-12 p-1">				
					<div class="card">
					  <img src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" class="w-100">
					  <div class="card-body">
						<h5 class="card-title">Product Name</h5>
						<p class="card-text">Product Description</p>
						<a href="#" class="btn btn-outline-success w-100">Show</a>
					  </div>
					</div>
				  </div>
				  <div class="col-xl-2 col-lg-3 col-md-6 col-sm-6 col-xs-12 p-1">				
					<div class="card">
					  <img src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" class="w-100">
					  <div class="card-body">
						<h5 class="card-title">Product Name</h5>
						<p class="card-text">Product Description</p>
						<a href="#" class="btn btn-outline-success w-100">Show</a>
					  </div>
					</div>
				  </div>
				  <div class="col-xl-2 col-lg-3 col-md-6 col-sm-6 col-xs-12 p-1">				
					<div class="card">
					  <img src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" class="w-100">
					  <div class="card-body">
						<h5 class="card-title">Product Name</h5>
						<p class="card-text">Product Description</p>
						<a href="#" class="btn btn-outline-success w-100">Show</a>
					  </div>
					</div>
				  </div>
				  <div class="col-xl-2 col-lg-3 col-md-6 col-sm-6 col-xs-12 p-1">				
					<div class="card">
					  <img src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" class="w-100">
					  <div class="card-body">
						<h5 class="card-title">Product Name</h5>
						<p class="card-text">Product Description</p>
						<a href="#" class="btn btn-outline-success w-100">Show</a>
					  </div>
					</div>
				  </div>
				  <div class="col-xl-2 col-lg-3 col-md-6 col-sm-6 col-xs-12 p-1">				
					<div class="card">
					  <img src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" class="w-100">
					  <div class="card-body">
						<h5 class="card-title">Product Name</h5>
						<p class="card-text">Product Description</p>
						<a href="#" class="btn btn-outline-success w-100">Show</a>
					  </div>
					</div>
				  </div>
				</div>
				</div>
			  </div>
			  <a class="carousel-control-prev" href="#carouselSixColumn" role="button" data-slide="prev">
				<span class="carousel-control-prev-icon" aria-hidden="true"></span>
				<span class="sr-only">Previous</span>
			  </a>
			  <a class="carousel-control-next" href="#carouselSixColumn" role="button" data-slide="next">
				<span class="carousel-control-next-icon" aria-hidden="true"></span>
				<span class="sr-only">Next</span>
			  </a>
			</div>
			</div>
		
		</section>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="script.js"></script>
</body>
</html>
@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap');

* {
    margin:0px;
    padding:0px;
    box-sizing: border-box;
    font-family: 'Ubuntu', sans-serif;
} 

.carousel-control-prev-icon {
   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='red' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}

.carousel-control-next-icon {
   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='red' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}

                                    
toggle switch style01

toggle switch style01

texte animate css

texte animate css

Timeline style01

Timeline style01

Table bootstrap with Datatable

Table bootstrap with Datatable

Simple Table With UIKIT

Simple Table With UIKIT

Image hover 05

Image hover 05

Google Style Login

Google Style Login

Form contact avec validation en css

Form contact avec validation en css

Flat icon Responsive Boxes

Flat icon Responsive Boxes

Bootstrap4 datepicker

Bootstrap4 datepicker

Bootstrap 3 Popover avec html contenu

Bootstrap 3 Popover avec html contenu

3D Gallery with CSS3 and jQuery

3D Gallery with CSS3 and jQuery