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;
}

                                    
Ajouter supprimer une tr dans une table

Ajouter supprimer une tr dans une table

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

Cards box with title

Cards box with title

Comment intégrer yamli dans une input

Comment intégrer yamli dans une input

Create icon animate with svg

Create icon animate with svg

Form Création de compte style animée

Form Création de compte style animée

Image hover 04

Image hover 04

Social Media Icons

Social Media Icons

Timeline style02

Timeline style02

Timeline style08

Timeline style08

Triangle Background css 01

Triangle Background css 01

page scroll progress bar

page scroll progress bar