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

                                    
Blog post card 01

Blog post card 01

Card Panel Bootstrap4 with header and footer

Card Panel Bootstrap4 with header and footer

Checkbox et boutons radios personnalisés en CSS

Checkbox et boutons radios personnalisés en CSS

Form Création de compte style animée

Form Création de compte style animée

Input range slider HTML style03

Input range slider HTML style03

Page 404 exemple 01

Page 404 exemple 01

Pagination with Jquery

Pagination with Jquery

Partager sur les réseaux sociaux

Partager sur les réseaux sociaux

Radio button style

Radio button style

Table Responsive with css 01

Table Responsive with css 01

creation dune icone de prechargement avec css

creation dune icone de prechargement avec css

toggle switch style01

toggle switch style01