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 style03

toggle switch style03

Pure CSS Percentage Circle

Pure CSS Percentage Circle

Loading style water animation

Loading style water animation

Form contact avec validation en css

Form contact avec validation en css

Create icon animate with svg

Create icon animate with svg

Checkbox et boutons radios personnalisés en CSS

Checkbox et boutons radios personnalisés en CSS

Calculatrice style01

Calculatrice style01

Buttons Styles Inspirations

Buttons Styles Inspirations

Bootstrap4 datepicker

Bootstrap4 datepicker

Ajouter une pagination1

Ajouter une pagination1

Ajouter supprimer une tr dans une table avec l'insertion des options sur une balise select

Ajouter supprimer une tr dans une table avec l'insertion des options sur une balise select

Ajouter supprimer dynamiquement des lignes sur un tableau

Ajouter supprimer dynamiquement des lignes sur un tableau