forked from t3-oss/create-t3-app
-
Notifications
You must be signed in to change notification settings - Fork 0
/
tweetSlider.astro
101 lines (84 loc) · 2.48 KB
/
tweetSlider.astro
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
---
import { type Tweet } from "./featuredTweets";
import TweetCard from "./tweetCard.astro";
export interface Props {
tweets: Tweet[];
}
const { tweets } = Astro.props as Props;
---
<div class="w-full cursor-grab overflow-hidden rounded-lg" id="tweet-slider">
<div class="flex w-full space-x-5">
{
tweets.map((tweet) => (
<div class="w-full shrink-0 first:ml-0 last:mr-0">
<TweetCard {...tweet} />
</div>
))
}
</div>
{/* Pagination */}
<div class="mb-10 mt-6 flex justify-center">
{
tweets.map((_, idx) => (
// Larger click area while keeping the visual circles small
<button
aria-label={`Scroll to slide ${idx + 1}`}
class="0 -mx-0.5 p-1.5"
data-slider-page={idx}
>
<div
class:list={[
"aspect-square h-2 rounded-full bg-white/20 transition-colors ease-in-out [&.active]:bg-primary [&:not(.active)]:hover:bg-white/40",
{
active: idx === 0,
},
]}
/>
</button>
))
}
</div>
</div>
<script>
import Embla from "embla-carousel";
import autoplay from "embla-carousel-autoplay";
const sliderElement = document.getElementById("tweet-slider");
if (!sliderElement) throw new Error("Slider is missing");
const embla = Embla(
sliderElement,
{
skipSnaps: false,
},
[
autoplay({
delay: 3000,
stopOnMouseEnter: true,
stopOnInteraction: false,
}),
],
);
const paginationButtons = document.querySelectorAll("[data-slider-page]");
paginationButtons.forEach((paginationButton) => {
const page = paginationButton.getAttribute("data-slider-page");
if (!page) return;
paginationButton.addEventListener("click", () => {
embla.scrollTo(+page);
});
});
embla.on("select", () => {
const previousSlideIndex = embla.previousScrollSnap();
const previousSlideButton = paginationButtons[previousSlideIndex];
if (previousSlideButton) {
previousSlideButton?.firstElementChild?.classList.remove("active");
}
const currentSlideIndex = embla.selectedScrollSnap();
const currentSlideButton = paginationButtons[currentSlideIndex];
if (currentSlideButton) {
currentSlideButton?.firstElementChild?.classList.add("active");
}
});
// Disable tab navigation for tweet slides
sliderElement.querySelectorAll("a").forEach((a) => {
a.tabIndex = -1;
});
</script>