studio-variable/le-courage-du-reel
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: implement functional slider with Swiper.js

Browse source 
- Add Swiper.js via CDN for carousel functionality
- Restructure excerpts section: 6 individual slides instead of 2 grouped slides
- Implement responsive behavior: 3 slides per view on desktop, 1 on mobile
- Add infinite loop navigation with prev/next buttons and pagination bullets
- Create custom styles in _section_4-excerpts.scss (no Swiper CSS)
- Add script.js with Swiper configuration and responsive breakpoints

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-02-23 17:02:33 +01:00
parent 96c52e7e96
commit 3dc3a8c6e3
5 changed files with 323 additions and 79 deletions
Download patch file Download diff file Expand all files Collapse all files

107
assets/css/style.css
View file

@ -328,45 +328,118 @@ section#excerpts header .title {
font-weight: 700;
letter-spacing: 5%;
}
section#excerpts .slider {
section#excerpts .swiper {
width: 100%;
display: flex;
position: relative;
padding-bottom: 5rem;
overflow: hidden;
}
section#excerpts .slider .slide {
width: 100%;
section#excerpts .swiper-wrapper {
display: flex;
justify-content: space-between;
position: relative;
width: 100%;
height: 100%;
z-index: 1;
transition-property: transform;
box-sizing: content-box;
}
section#excerpts .slider .slide .item {
section#excerpts .swiper-slide {
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
display: flex;
justify-content: center;
align-items: flex-start;
}
section#excerpts .swiper-slide .item {
width: 13.125rem;
}
section#excerpts .slider .slide .item .label {
section#excerpts .swiper-slide .item .label {
font-size: 0.625rem;
text-transform: uppercase;
font-weight: 400;
opacity: 0.8;
margin-bottom: 0.7rem;
}
section#excerpts .slider .slide .item .text {
section#excerpts .swiper-slide .item .text {
font-size: var(--font-size-m);
line-height: 140%;
margin-bottom: 8rem;
}
section#excerpts .controls {
section#excerpts .swiper-button-prev,
section#excerpts .swiper-button-next {
z-index: 1;
bottom: 0;
width: 2rem;
height: 2rem;
position: absolute;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
border: none;
background-color: transparent;
}
section#excerpts .swiper-button-prev::after,
section#excerpts .swiper-button-next::after {
display: none;
}
section#excerpts .swiper-button-prev {
background-image: url("/assets/svg/arrow-left.svg");
left: 0;
}
section#excerpts .swiper-button-next {
background-image: url("/assets/svg/arrow-right.svg");
right: 0;
}
section#excerpts .swiper-pagination {
bottom: 0.5rem;
display: flex;
justify-content: center;
gap: 0.4rem;
position: absolute;
width: 100%;
display: flex;
justify-content: space-between;
}
section#excerpts .controls .bullets {
display: flex;
}
section#excerpts .controls .bullets .bullet {
section#excerpts .swiper-pagination-bullet {
width: 0.45rem;
height: 0.45rem;
border-radius: 100%;
background-color: rgba(255, 255, 255, 0.4);
opacity: 1;
transition: background-color 250ms ease, transform 250ms ease;
cursor: pointer;
border: none;
padding: 0;
}
section#excerpts .swiper-pagination-bullet:hover {
background-color: rgba(255, 255, 255, 0.7);
}
section#excerpts .swiper-pagination-bullet-active {
background-color: #fff;
margin: 0.2rem;
}
@media (max-width: 768px) {
section#excerpts {
padding: 4rem 2rem;
}
section#excerpts header {
margin-bottom: 2rem;
}
section#excerpts header .title {
font-size: 2.5rem;
}
section#excerpts .swiper-slide .item {
width: 100%;
max-width: 20rem;
text-align: center;
}
section#excerpts .swiper-slide .item .text {
margin-bottom: 2rem;
}
section#excerpts .swiper-button-prev,
section#excerpts .swiper-button-next {
width: 2rem;
height: 2rem;
}
}
section#handles {