From 5cc4a475ff9fde2ee86d1633d17f3858f0aaf81d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Melissa=20Weber=20Mendon=C3=A7a?= <melissawm@gmail.com>
Date: Tue, 30 Apr 2024 09:29:23 -0300
Subject: [PATCH] CSS Carousel for the homepage

This shows napari images, but in the future can be used for logos or
any other information we want to display dynamically.
---
 docs/_static/custom.css | 63 +++++++++++++++++++++++++++++++++++++++++
 docs/index.md           | 25 ++++++++++++++++
 2 files changed, 88 insertions(+)

diff --git a/docs/_static/custom.css b/docs/_static/custom.css
index 9bc02cb7..9027486f 100644
--- a/docs/_static/custom.css
+++ b/docs/_static/custom.css
@@ -23,3 +23,66 @@ div.sphx-glr-download a:hover {
   background-image: none;
   background-color: #ffffff !important;
 }
+
+/* Carousel animation */
+
+.inf-card {
+  border: none !important;
+  animation: sd-slide-carousel-out 12s infinite;
+}
+
+.inf-card:nth-child(1) {
+  animation-name: sd-slide-carousel-out, sd-slide-carousel-in;
+  animation-iteration-count: infinite, infinite;
+  animation-duration: 12s, 12s;
+  animation-delay: 0s, 8s;
+  animation-fill-mode: forwards;
+}
+
+@keyframes sd-slide-carousel-out {
+  0% {
+    visibility: hidden;
+    transform: translateX(0%)
+  }
+
+  33.33% {
+    visibility: visible;
+    transform: translateX(-100%);
+  }
+
+  66.66% {
+    transform: translateX(-200%);
+  }
+
+  99.99% {
+    visibility: hidden;
+    transform: translateX(-300%);
+  }
+}
+
+@keyframes sd-slide-carousel-in {
+  0% {
+    visibility: hidden;
+    transform: translateX(100%)
+  }
+
+  33.33% {
+    visibility: visible;
+    transform: translateX(0%);
+  }
+
+  66.66% {
+    transform: translateX(-100%);
+  }
+
+  99.99% {
+    transform: translateX(-200%);
+  }
+}
+
+.sd-cards-carousel>.inf-card {
+  margin-right: 0px;
+  overflow: hidden;
+  position: relative;
+  width: 100%
+}
diff --git a/docs/index.md b/docs/index.md
index 87204600..ccc5036e 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -62,6 +62,31 @@ theme:
 </figure>
 ```
 
+::::{card-carousel} 1
+
+  :::{card}
+  :class-card: inf-card
+  :shadow: none
+  :img-background: ./_static/images/LLSM.png
+
+  :::
+
+  :::{card}
+  :class-card: inf-card
+  :shadow: none
+  :img-background: ./images/3D_paths.png
+
+  :::
+
+  :::{card}
+  :class-card: inf-card
+  :shadow: none
+  :img-background: ./images/add_vectors_image.png
+
+  :::
+
+::::
+
 Napari is a Python library for n-dimensional image visualisation, annotation,
 and analysis. With napari you can:
 - **view and explore** 2D, 3D, and higher-dimensional arrays on a canvas;