about : extract team carousel into TeamCarousel component (swiper)
Replace inline carousel logic with a dedicated TeamCarousel.svelte component. Uses SwiperJS for mobile peek (1.4 slides), tablet (2) and desktop (4) layouts, with touch swipe, pagination dots and prev/next buttons. related to #53 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown
parent
6ec32dd82a
commit
4ccbad9663
4 changed files with 238 additions and 238 deletions
20
package-lock.json
generated
20
package-lock.json
generated
|
|
@ -13,6 +13,7 @@
|
|||
"gsap": "^3.14.2",
|
||||
"navaid": "^1.2.0",
|
||||
"svelte": "^5.0.0",
|
||||
"swiper": "^12.1.3",
|
||||
"vite": "7.0.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
@ -1278,6 +1279,25 @@
|
|||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/swiper": {
|
||||
"version": "12.1.3",
|
||||
"resolved": "https://registry.npmjs.org/swiper/-/swiper-12.1.3.tgz",
|
||||
"integrity": "sha512-XcWlVmkHFICI4fuoJKgbp8PscDcS4i7pBH8nwJRBi3dpQvhCySwsWRYm4bOf/BzKVWkHOYaFw7qz9uBSrY3oug==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "patreon",
|
||||
"url": "https://www.patreon.com/swiperjs"
|
||||
},
|
||||
{
|
||||
"type": "open_collective",
|
||||
"url": "http://opencollective.com/swiper"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 4.7.0"
|
||||
}
|
||||
},
|
||||
"node_modules/tinyglobby": {
|
||||
"version": "0.2.15",
|
||||
"resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
"gsap": "^3.14.2",
|
||||
"navaid": "^1.2.0",
|
||||
"svelte": "^5.0.0",
|
||||
"swiper": "^12.1.3",
|
||||
"vite": "7.0.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
214
src/components/ui/TeamCarousel.svelte
Normal file
214
src/components/ui/TeamCarousel.svelte
Normal file
|
|
@ -0,0 +1,214 @@
|
|||
<script>
|
||||
import { onMount } from 'svelte'
|
||||
import { t } from '@i18n'
|
||||
import Swiper from 'swiper'
|
||||
import { Navigation, Pagination } from 'swiper/modules'
|
||||
import 'swiper/css'
|
||||
import 'swiper/css/pagination'
|
||||
|
||||
let { members = [] } = $props()
|
||||
|
||||
let swiperContainerEl = $state(null)
|
||||
let swiper = null
|
||||
|
||||
onMount(() => {
|
||||
// Petit délai pour laisser le layout se stabiliser
|
||||
// (le composant est monté même quand le slide est hors écran)
|
||||
const timer = setTimeout(() => {
|
||||
swiper = new Swiper(swiperContainerEl, {
|
||||
modules: [Navigation, Pagination],
|
||||
|
||||
slidesPerView: 1.4,
|
||||
centeredSlides: true,
|
||||
spaceBetween: 16,
|
||||
|
||||
pagination: {
|
||||
el: swiperContainerEl.parentElement.querySelector('.team-pagination'),
|
||||
clickable: true,
|
||||
},
|
||||
navigation: {
|
||||
prevEl: swiperContainerEl.parentElement.querySelector('.team-prev'),
|
||||
nextEl: swiperContainerEl.parentElement.querySelector('.team-next'),
|
||||
},
|
||||
|
||||
breakpoints: {
|
||||
701: {
|
||||
slidesPerView: 2,
|
||||
centeredSlides: false,
|
||||
spaceBetween: 20,
|
||||
},
|
||||
913: {
|
||||
slidesPerView: 4,
|
||||
centeredSlides: false,
|
||||
spaceBetween: 30,
|
||||
},
|
||||
},
|
||||
})
|
||||
}, 100)
|
||||
|
||||
return () => {
|
||||
clearTimeout(timer)
|
||||
swiper?.destroy(true, true)
|
||||
swiper = null
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<div class="team-carousel">
|
||||
<div class="swiper" bind:this={swiperContainerEl}>
|
||||
<div class="swiper-wrapper">
|
||||
{#each members as member}
|
||||
<div class="swiper-slide">
|
||||
{#if member.link}
|
||||
<a href={member.link} target="_blank" rel="noopener noreferrer" class="team-member">
|
||||
{#if member.photo}
|
||||
<img src={member.photo} alt={member.name} class="team-member-image" draggable="false" />
|
||||
{/if}
|
||||
<h4 class="team-member-name">{member.name}</h4>
|
||||
<p class="team-member-title">{member.role}</p>
|
||||
</a>
|
||||
{:else}
|
||||
<div class="team-member">
|
||||
{#if member.photo}
|
||||
<img src={member.photo} alt={member.name} class="team-member-image" draggable="false" />
|
||||
{/if}
|
||||
<h4 class="team-member-name">{member.name}</h4>
|
||||
<p class="team-member-title">{member.role}</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="team-nav">
|
||||
<button class="team-prev nav-button">{t('prev_slide')}</button>
|
||||
<div class="team-pagination"></div>
|
||||
<button class="team-next nav-button">{t('next_slide')}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.team-carousel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Swiper container */
|
||||
.swiper {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
overflow: hidden;
|
||||
padding: 10px 0;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* --- Items --- */
|
||||
.team-member {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
a.team-member:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.team-member-image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: 1 / 1;
|
||||
object-fit: contain;
|
||||
margin-bottom: 10px;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
a.team-member .team-member-image:hover {
|
||||
transform: scale(1.03);
|
||||
}
|
||||
|
||||
.team-member-name {
|
||||
font-family: "Danzza Bold", sans-serif;
|
||||
font-size: var(--font-size-paragraph-small);
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.team-member-title {
|
||||
font-family: "Danzza", sans-serif;
|
||||
font-size: var(--font-size-caption);
|
||||
text-align: center;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* --- Nav buttons --- */
|
||||
.team-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.nav-button {
|
||||
color: #04fea0;
|
||||
font-family: "Danzza", sans-serif;
|
||||
font-size: var(--font-size-paragraph-small);
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 8px 12px;
|
||||
text-transform: uppercase;
|
||||
border-radius: 4px;
|
||||
transition: transform 0.3s ease, background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-button:hover:not(:disabled) {
|
||||
transform: scale(1.05);
|
||||
background-color: rgba(4, 254, 160, 0.1);
|
||||
}
|
||||
|
||||
.nav-button:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* --- Pagination (Swiper-injected, needs :global) --- */
|
||||
:global(.team-pagination) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
:global(.team-pagination .swiper-pagination-bullet) {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s ease, background-color 0.3s ease;
|
||||
}
|
||||
|
||||
:global(.team-pagination .swiper-pagination-bullet-active) {
|
||||
background: #04fea0;
|
||||
transform: scale(1.3);
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
:global(.team-pagination) {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
:global(.team-pagination .swiper-pagination-bullet) {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,9 +1,8 @@
|
|||
<script>
|
||||
import { onMount } from 'svelte'
|
||||
import { slides } from '@state/slides.svelte'
|
||||
import { navigation } from '@state/navigation.svelte'
|
||||
|
||||
import { t } from '@i18n'
|
||||
import TeamCarousel from '@components/ui/TeamCarousel.svelte'
|
||||
|
||||
let { data } = $props()
|
||||
|
||||
|
|
@ -13,66 +12,11 @@
|
|||
const members = $derived(data?.team ?? [])
|
||||
const isActive = $derived(slides.active?.id === 'about')
|
||||
|
||||
let sectionEl = $state(null)
|
||||
let sectionEl = $state(null)
|
||||
|
||||
// --- Carousel state ---
|
||||
let currentSlide = $state(0)
|
||||
let visibleItems = $state(3)
|
||||
let isTransitioning = $state(false)
|
||||
let touchStartX = $state(null)
|
||||
|
||||
const totalSlides = $derived(Math.max(1, Math.ceil(members.length / visibleItems)))
|
||||
|
||||
const carouselOffset = $derived(
|
||||
members.length === 0 ? 0 :
|
||||
currentSlide === totalSlides - 1
|
||||
? Math.max(0, (members.length - visibleItems) * 300)
|
||||
: currentSlide * visibleItems * 300
|
||||
)
|
||||
|
||||
function updateVisibleItems() {
|
||||
if (window.matchMedia('(max-width: 700px)').matches) visibleItems = 1
|
||||
else if (window.matchMedia('(max-width: 912px)').matches) visibleItems = 2
|
||||
else visibleItems = 3
|
||||
}
|
||||
|
||||
function prevSlide() {
|
||||
if (isTransitioning || currentSlide <= 0) return
|
||||
isTransitioning = true
|
||||
currentSlide--
|
||||
setTimeout(() => { isTransitioning = false }, 800)
|
||||
}
|
||||
|
||||
function nextSlide() {
|
||||
if (isTransitioning || currentSlide >= totalSlides - 1) return
|
||||
isTransitioning = true
|
||||
currentSlide++
|
||||
setTimeout(() => { isTransitioning = false }, 800)
|
||||
}
|
||||
|
||||
function goToSlide(i) {
|
||||
if (isTransitioning || i === currentSlide) return
|
||||
isTransitioning = true
|
||||
currentSlide = i
|
||||
setTimeout(() => { isTransitioning = false }, 800)
|
||||
}
|
||||
|
||||
// Reset scroll when slide leaves view
|
||||
$effect(() => {
|
||||
if (!isActive) sectionEl?.scrollTo(0, 0)
|
||||
})
|
||||
|
||||
// Reset carousel when number of visible items changes
|
||||
$effect(() => {
|
||||
void visibleItems
|
||||
currentSlide = 0
|
||||
})
|
||||
|
||||
onMount(() => {
|
||||
updateVisibleItems()
|
||||
window.addEventListener('resize', updateVisibleItems)
|
||||
return () => window.removeEventListener('resize', updateVisibleItems)
|
||||
})
|
||||
</script>
|
||||
|
||||
<div class="about golden-grid page-scrollable" bind:this={sectionEl} onscroll={() => navigation.setScrolled(sectionEl.scrollTop > 100)}>
|
||||
|
|
@ -103,68 +47,7 @@
|
|||
{#if members.length > 0}
|
||||
<section class="about-team">
|
||||
<h2 class="about-team-heading">{t('our_team')}</h2>
|
||||
|
||||
<div class="team-carousel-container">
|
||||
<div
|
||||
class="team-grid"
|
||||
role="list"
|
||||
style="transform: translateX(-{carouselOffset}px)"
|
||||
ontouchstart={(e) => { touchStartX = e.touches[0].clientX }}
|
||||
ontouchend={(e) => {
|
||||
if (touchStartX === null) return
|
||||
const delta = touchStartX - e.changedTouches[0].clientX
|
||||
if (Math.abs(delta) > 50) delta > 0 ? nextSlide() : prevSlide()
|
||||
touchStartX = null
|
||||
}}
|
||||
>
|
||||
{#each members as member}
|
||||
{#if member.link}
|
||||
<a href={member.link} target="_blank" rel="noopener noreferrer" class="team-member">
|
||||
{#if member.photo}
|
||||
<img src={member.photo} alt={member.name} class="team-member-image" draggable="false" />
|
||||
{/if}
|
||||
<h4 class="team-member-name">{member.name}</h4>
|
||||
<p class="team-member-title">{member.role}</p>
|
||||
</a>
|
||||
{:else}
|
||||
<div class="team-member" role="listitem">
|
||||
{#if member.photo}
|
||||
<img src={member.photo} alt={member.name} class="team-member-image" draggable="false" />
|
||||
{/if}
|
||||
<h4 class="team-member-name">{member.name}</h4>
|
||||
<p class="team-member-title">{member.role}</p>
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-buttons">
|
||||
<button
|
||||
class="nav-button"
|
||||
disabled={currentSlide === 0}
|
||||
onclick={prevSlide}
|
||||
>{t('prev_slide')}</button>
|
||||
|
||||
<ul class="pagination-indicator">
|
||||
{#each { length: totalSlides } as _, i}
|
||||
<li>
|
||||
<button
|
||||
class="pagination-dot"
|
||||
class:active={i === currentSlide}
|
||||
aria-label="Slide {i + 1}"
|
||||
onclick={() => goToSlide(i)}
|
||||
></button>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
|
||||
<button
|
||||
class="nav-button"
|
||||
disabled={currentSlide === totalSlides - 1}
|
||||
onclick={nextSlide}
|
||||
>{t('next_slide')}</button>
|
||||
</div>
|
||||
<TeamCarousel {members} />
|
||||
</section>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
@ -285,124 +168,6 @@
|
|||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.team-carousel-container {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
overflow: hidden;
|
||||
padding: 10px 0;
|
||||
margin-bottom: 20px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.team-grid {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
transition: transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
padding: 10px 0;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.team-member {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 250px;
|
||||
margin: 0 25px;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
a.team-member:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.team-member-image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: 1 / 1;
|
||||
object-fit: contain;
|
||||
margin-bottom: 10px;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
a.team-member .team-member-image:hover {
|
||||
transform: scale(1.03);
|
||||
}
|
||||
|
||||
.team-member-name {
|
||||
font-family: "Danzza Bold", sans-serif;
|
||||
font-size: var(--font-size-paragraph-small);
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.team-member-title {
|
||||
font-family: "Danzza", sans-serif;
|
||||
font-size: var(--font-size-caption);
|
||||
text-align: center;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.pagination-indicator li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* Nav */
|
||||
.nav-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.nav-button {
|
||||
color: #04fea0;
|
||||
font-family: "Danzza", sans-serif;
|
||||
font-size: var(--font-size-paragraph-small);
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 8px 12px;
|
||||
text-transform: uppercase;
|
||||
border-radius: 4px;
|
||||
transition: transform 0.3s ease, background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-button:hover:not(:disabled) {
|
||||
transform: scale(1.05);
|
||||
background-color: rgba(4, 254, 160, 0.1);
|
||||
}
|
||||
|
||||
.nav-button:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.pagination-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.pagination-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
transition: transform 0.3s ease, background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.pagination-dot.active {
|
||||
background: #04fea0;
|
||||
transform: scale(1.3);
|
||||
}
|
||||
|
||||
/* ── Mobile (≤700px) ── */
|
||||
@media (max-width: 700px) {
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue