orginal fix

Signed-off-by: Jeffrin Jojo <jeffrinjojo1@gmail.com>

Author: Jeffrin2005

src/sections/Meshery/Meshery-integrations/Individual-Integrations/howItWork.js

@@ -37,81 +37,96 @@ const HowIntegrationWorksWrapper = styled.section`
 		.integration-section-row {
 			margin: 4rem 0;
 			align-items: center;
+			flex-direction: column;
 		}
 		h2, h4 {
 				color: black;
 			}
 		.integration-section-data {
+			width: 100%;
+			margin-bottom: 2rem;
 			h1, h3, p {
-				text-align: start; color: ${props => props.theme.primaryColor};
+				text-align: center; 
+				color: ${props => props.theme.primaryColor};
 				transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
 			}
 		}
 
 		.integration-section-caraousel {
+			width: 100%;
 			.slick-slider {
+				position: relative;
+				width: 100%;
+				
 				.slick-list {
-					max-width: 50rem;
+					width: 100%;
+					margin: 0 auto;
+					overflow: hidden;
 
 					.slick-slide {
+						display: flex;
+						justify-content: center;
+						align-items: center;
+						
 						img {
+							max-width: 100%;
+							height: auto;
 							max-height: 20rem;
+							object-fit: contain;
 							margin: auto;
 						}
 					}
 				}
 
-				.slick-arrow{
-					display: none !important;
+				.slick-arrow {
+					display: block !important;
+					z-index: 1;
+					width: 40px;
+					height: 40px;
+					&:before {
+						color: ${props => props.theme.secondaryColor};
+						font-size: 2rem;
+						opacity: 1;
+					}
+					&.slick-prev {
+						left: -50px;
+					}
+					&.slick-next {
+						right: -50px;
+					}
 				}
 
 				.slick-dots {
-					bottom: 0;
-					top: 0;
-					left: 52rem;
-					width: 8rem;
-
+					bottom: -2rem;
+					width: 100%;
+					display: flex !important;
+					justify-content: center;
+					
 					li {
-						display: block;
-						width: 100%;
-						height: auto;
-						margin: 1rem auto;
-						opacity: 0.6;
-
-						a {
-							display: block;
-
-							img {
-								height: 5rem;
-								vertical-align: middle;
-								object-fit: contain;
+						display: inline-block;
+						width: 10px;
+						height: 10px;
+						margin: 0 5px;
+						
+						button {
+							width: 10px;
+							height: 10px;
+							padding: 0;
+							border-radius: 50%;
+							background: ${props => props.theme.primaryColor};
+							opacity: 0.5;
+							border: none;
+							
+							&:before {
+								display: none;
 							}
 						}
+						
+						&.slick-active button {
+							opacity: 1;
+						}
 					}
 				}
-				.slick-dots 
-					li.slick-active {
-						opacity: 1;
-					}
-				}
-			}
-		}
-	}
-
-	@media screen and (max-width: 1600px) {
-		.integration-section .integration-section-caraousel .slick-slider {
-			.slick-list {
-				max-width: 38rem;
-			}
-
-			.slick-dots {
-				left: 40rem;
-				width: 6rem;
-
-				li a img {
-					height: 4rem;
-					object-fit: contain;
-				}
 			}
 		}
 	}
@@ -131,12 +146,16 @@ const HowIntegrationWorksWrapper = styled.section`
 
 			.integration-section-caraousel .slick-slider {
 				.slick-list {
-					max-width: 80%;
+					width: 100%;
 					margin: 2rem auto;
 				}
-
-				.slick-dots {
-					left: 92%;
+				.slick-arrow {
+					&.slick-prev {
+						left: -30px;
+					}
+					&.slick-next {
+						right: -30px;
+					}
 				}
 			}
 		}
@@ -158,16 +177,15 @@ const HowIntegrationWorksWrapper = styled.section`
 
 			.integration-section-caraousel .slick-slider {
 				.slick-list {
-					max-width: 85%;
-					margin: 2rem 0;
+					width: 100%;
+					margin: 2rem auto;
 				}
-				.slick-dots {
-					left: 90%;
-					width: 4rem;
-
-					li a img {
-						height: 2.5rem;
-						object-fit: contain;
+				.slick-arrow {
+					&.slick-prev {
+						left: -20px;
+					}
+					&.slick-next {
+						right: -20px;
 					}
 				}
 			}
@@ -187,10 +205,6 @@ const HowIntegrationWorksWrapper = styled.section`
 						}
 					}
 				}
-				.slick-dots {
-					left: 85%;
-					top: -1rem;
-				}
 			}
 		}
 	}
@@ -200,20 +214,16 @@ const HowIntegrationWorksWrapper = styled.section`
 const HowIntegrationWorks = ({ name, howitworks, howitworksdetails, slides }) => {
 
   const settings = {
-    customPaging: (i) => {
-      return (
-        <a>
-          <img src={slides[i].publicURL} alt={`Slide ${i}`} />
-        </a>
-      );
-    },
-    infinite: false,
-    speed: 400,
+    dots: true,
+    infinite: true,
+    speed: 500,
     slidesToShow: 1,
     slidesToScroll: 1,
-    dots: true,
-    vertical: true,
-    verticalSwiping: true
+    arrows: true,
+    autoplay: true,
+    autoplaySpeed: 4000,
+    pauseOnHover: true,
+    adaptiveHeight: true
   };
 
   return (
@@ -229,7 +239,7 @@ const HowIntegrationWorks = ({ name, howitworks, howitworksdetails, slides }) =>
             <Col $xs={12} $xl={4} className="integration-section-data">
               <h3>{howitworks != null ? howitworks : "Docker with Meshery" }</h3>
               <p>
-                {howitworksdetails != null ? howitworksdetails : "The Docker Extension for Meshery extends Docker Desktop’s position as the cloud native developer’s go-to Kubernetes environment with easy access to the next layer of cloud native infrastructure: service meshes."}
+                {howitworksdetails != null ? howitworksdetails : "The Docker Extension for Meshery extends Docker Desktop's position as the cloud native developer's go-to Kubernetes environment with easy access to the next layer of cloud native infrastructure: service meshes."}
               </p>
             </Col>
             <Col $xs={12} $xl={8} className="integration-section-caraousel">