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

texte animate effects style 01

texte animate effects style 01

Timeline style08

Timeline style08

Timeline style04

Timeline style04

Timeline style03

Timeline style03

SwiperJS style01

SwiperJS style01

Radio Input Image Checkbox 01

Radio Input Image Checkbox 01

Input valid invalid HTML CSS

Input valid invalid HTML CSS

Input range slider HTML style03

Input range slider HTML style03

Image hover 03

Image hover 03

Image hover 02

Image hover 02

Bloc resizable with jquery

Bloc resizable with jquery