changement comportement slider

Bacati · Sep 28, 2024 · 72941d5 · 72941d5
1 parent 6a1b683
commit 72941d5
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 30 deletions.
diff --git a/src/assets/pages/404/styles/style.scss b/src/assets/pages/404/styles/style.scss
@@ -31,33 +31,6 @@ footer{
     background: linear-gradient(90deg,rgba(0, 0, 0, 1) -50%, rgba(92, 92, 91, 0) 300%),
     url('/images/bg.svg') bottom/cover no-repeat;
 }
-
-$animationSpeed: 30s;
-
-@keyframes scroll {
-	0% { transform: translateX(0); }
-	100% { transform: translateX(calc(-384px * 9)); }
-}
-
-.slider {
-	position: relative;
-	height: 34rem;
-	overflow: hidden;
-}
-
-.slide-track {
-	animation: scroll $animationSpeed linear infinite;
-	display: flex;
-	width: calc(384px * 18);
-	animation-play-state: running;
-}
-.slide-track:hover {
-	animation-play-state: paused;
-}
-
-.slide-track .slide {
-	flex: 0 0 auto;
-}
 @media (min-width: 1440px) {
 	.fondCyl{
 		width: 25rem !important;
@@ -102,6 +75,41 @@ details summary {
 details[open] .cheSum{
 	transition: transform 0.3s ease;
     transform: rotate(180deg);
+}
+@media (min-width: 768px) {
+	$animationSpeed: 30s;
+
+	@keyframes scroll {
+		0% { transform: translateX(0); }
+		100% { transform: translateX(calc(-384px * 9)); }
+	}
+
+	.slider {
+		position: relative;
+		height: 34rem;
+	}
+
+	.slide-track {
+		animation: scroll $animationSpeed linear infinite;
+		display: flex;
+		width: calc(384px * 18);
+		animation-play-state: running;
+		overflow-y: unset !important;
+	}
+	.slide-track:hover {
+		animation-play-state: paused;
+	}
+
+	.slide-track .slide {
+		flex: 0 0 auto;
+	}
+}
+@media (min-width: 320px) {
+	.slide-track {
+		overflow-y: auto;
+		display: flex;
+	}
+
 }
 	.carousel-item{
 	transition: all 0.5s ease-in-out;

diff --git a/src/components/global/Cards.astro b/src/components/global/Cards.astro
@@ -6,13 +6,13 @@ import { Eye } from 'lucide-astro';
 <div class="bg-white flex flex-col justify-center items-center w-96 p-6 rounded-3xl shadow-lg card slide">
   <div class="flex justify-between items-center w-full">
     <p class="font-bold text-3xl">{title}</p>
-    <img class="w-1/4" src={logo} loading="lazy">
+    <img class="w-1/4" src={logo}>
   </div>
   <div class="w-full">
     <p class="text-gray-400">{description}</p>
   </div>
   <div class="cards rounded-full w-60 h-60 flex items-center justify-center mt-6">
-	<img class="max-w-80" alt="" src={imageSrc} loading="lazy"/>
+	<img class="max-w-80" alt="" src={imageSrc} />
   </div>
   <div class="flex justify-between items-center w-full mt-4">
     <p class="font-bold text-3xl">{price}€</p>

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -24,7 +24,7 @@ import Picture from 'components/global/Picture.astro';
     </div>
     <div class="gradient w-full h-2"></div>
     <div class="flex justify-center gap-3 mt-16 w-4/5 mx-auto">
-      <div class="slider flex items-center">
+      <div class="slider flex items-center overflow-hidden">
         <div class="slide-track gap-4">
           {generateProductData(config).map(product => (
             <ProductCard