Sections
Timeline Swiper
27 Sep 2022
HTML
SCSS
PostCSS
JS
<section class="timeline-section">
<h2 class="visually-hidden">Our story</h2>
<div class="swiper timeline-slides-swiper">
<div class="swiper-wrapper">
<div class="swiper-slide timeline-slides-swiper-slide">
<img
class="swiper-slide-image"
data-swiper-parallax="10%"
src="https://studio.swiperjs.com/demo-images/nature/03.jpg"
/>
<div class="swiper-slide-content">
<div class="swiper-slide-title" data-swiper-parallax="-100">
Finding the people who make technology a force for good in
the world.
</div>
<div class="swiper-slide-text" data-swiper-parallax="-200">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt.
</div>
</div>
</div>
<div class="swiper-slide timeline-slides-swiper-slide">
<img
class="swiper-slide-image"
data-swiper-parallax="10%"
src="https://studio.swiperjs.com/demo-images/nature/02.jpg"
/>
<div class="swiper-slide-content">
<div class="swiper-slide-title" data-swiper-parallax="-100">
Slide 2
</div>
<div class="swiper-slide-text" data-swiper-parallax="-200">
Repellat porro animi ad autem mollitia dolorum unde facere
laboriosam nostrum, non fuga sapiente.
</div>
</div>
</div>
<div class="swiper-slide timeline-slides-swiper-slide">
<img
class="swiper-slide-image"
data-swiper-parallax="10%"
src="https://studio.swiperjs.com/demo-images/nature/03.jpg"
/>
<div class="swiper-slide-content">
<div class="swiper-slide-title" data-swiper-parallax="-100">
Slide 3
</div>
<div class="swiper-slide-text" data-swiper-parallax="-200">
Consequatur, amet quibusdam vitae alias, autem asperiores
magnam doloribus qui molestiae!
</div>
</div>
</div>
<div class="swiper-slide timeline-slides-swiper-slide">
<img
class="swiper-slide-image"
data-swiper-parallax="10%"
src="https://studio.swiperjs.com/demo-images/nature/04.jpg"
/>
<div class="swiper-slide-content">
<div class="swiper-slide-title" data-swiper-parallax="-100">
Slide 4
</div>
<div class="swiper-slide-text" data-swiper-parallax="-200">
Ipsum accusamus officiis nesciunt adipisci nam?
</div>
</div>
</div>
<div class="swiper-slide timeline-slides-swiper-slide">
<img
class="swiper-slide-image"
data-swiper-parallax="10%"
src="https://studio.swiperjs.com/demo-images/nature/05.jpg"
/>
<div class="swiper-slide-content">
<div class="swiper-slide-title" data-swiper-parallax="-100">
Slide 5
</div>
<div class="swiper-slide-text" data-swiper-parallax="-200">
Aliquam, quae hic ducimus a sed et repellat ullam
reprehenderit fuga quo vitae excepturi quos quis, non odit
magnam laborum consequatur maiores at!
</div>
</div>
</div>
<div class="swiper-slide timeline-slides-swiper-slide">
<img
class="swiper-slide-image"
data-swiper-parallax="10%"
src="https://studio.swiperjs.com/demo-images/nature/06.jpg"
/>
<div class="swiper-slide-content">
<div class="swiper-slide-title" data-swiper-parallax="-100">
Slide 6
</div>
<div class="swiper-slide-text" data-swiper-parallax="-200">
Quis veniam ab reiciendis magni error. Fugit excepturi velit
veniam ea, fugiat voluptas minus incidunt minima consequatur
nam sit neque molestias error.
</div>
</div>
</div>
<div class="swiper-slide timeline-slides-swiper-slide">
<img
class="swiper-slide-image"
data-swiper-parallax="10%"
src="https://studio.swiperjs.com/demo-images/nature/07.jpg"
/>
<div class="swiper-slide-content">
<div class="swiper-slide-title" data-swiper-parallax="-100">
Slide 7
</div>
<div class="swiper-slide-text" data-swiper-parallax="-200">
Ea consectetur iste quae repudiandae quas unde ducimus
provident earum quasi blanditiis placeat tempore animi
possimus, inventore laudantium?
</div>
</div>
</div>
<div class="swiper-slide timeline-slides-swiper-slide">
<img
class="swiper-slide-image"
data-swiper-parallax="10%"
src="https://studio.swiperjs.com/demo-images/nature/08.jpg"
/>
<div class="swiper-slide-content">
<div class="swiper-slide-title" data-swiper-parallax="-100">
Slide 8
</div>
<div class="swiper-slide-text" data-swiper-parallax="-200">
Minima, qui. Harum, magnam non. Cupiditate quaerat pariatur
voluptatibus veniam! Debitis velit, quos corrupti
accusantium in ea odit.
</div>
</div>
</div>
<div class="swiper-slide timeline-slides-swiper-slide">
<img
class="swiper-slide-image"
data-swiper-parallax="10%"
src="https://studio.swiperjs.com/demo-images/nature/09.jpg"
/>
<div class="swiper-slide-content">
<div class="swiper-slide-title" data-swiper-parallax="-100">
Slide 9
</div>
<div class="swiper-slide-text" data-swiper-parallax="-200">
Distinctio sit veritatis accusantium magni unde culpa
consequuntur placeat a? Distinctio ad alias qui dicta
aliquid deleniti illum voluptatem aperiam.
</div>
</div>
</div>
<div class="swiper-slide timeline-slides-swiper-slide">
<img
class="swiper-slide-image"
data-swiper-parallax="10%"
src="https://studio.swiperjs.com/demo-images/nature/10.jpg"
/>
<div class="swiper-slide-content">
<div class="swiper-slide-title" data-swiper-parallax="-100">
Slide 10
</div>
<div class="swiper-slide-text" data-swiper-parallax="-200">
Quia quos suscipit error, soluta alias minus hic accusamus
repellat, sint rem dolore numquam ab a minima? Adipisci odit
perspiciatis ea doloribus.
</div>
</div>
</div>
<div class="swiper-slide timeline-slides-swiper-slide">
<img
class="swiper-slide-image"
data-swiper-parallax="10%"
src="https://studio.swiperjs.com/demo-images/nature/01.jpg"
/>
<div class="swiper-slide-content">
<div class="swiper-slide-title" data-swiper-parallax="-100">
Slide 11
</div>
<div class="swiper-slide-text" data-swiper-parallax="-200">
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Debitis, magni?
</div>
</div>
</div>
<div class="swiper-slide timeline-slides-swiper-slide">
<img
class="swiper-slide-image"
data-swiper-parallax="10%"
src="https://studio.swiperjs.com/demo-images/nature/09.jpg"
/>
<div class="swiper-slide-content">
<div class="swiper-slide-title" data-swiper-parallax="-100">
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Voluptas.
</div>
<div class="swiper-slide-text" data-swiper-parallax="-200">
Quia quos suscipit error, soluta alias minus hic accusamus
repellat, sint rem dolore numquam ab a minima? Adipisci odit
perspiciatis ea doloribus.
</div>
</div>
</div>
<div class="swiper-slide timeline-slides-swiper-slide">
<img
class="swiper-slide-image"
data-swiper-parallax="10%"
src="https://studio.swiperjs.com/demo-images/nature/10.jpg"
/>
<div class="swiper-slide-content">
<div class="swiper-slide-title" data-swiper-parallax="-100">
Lorem ipsum dolor sit amet.
</div>
<div class="swiper-slide-text" data-swiper-parallax="-200">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Rerum quae quibusdam ipsum eius velit quis.
</div>
</div>
</div>
<div class="swiper-slide timeline-slides-swiper-slide">
<img
class="swiper-slide-image"
data-swiper-parallax="10%"
src="https://studio.swiperjs.com/demo-images/nature/08.jpg"
/>
<div class="swiper-slide-content">
<div class="swiper-slide-title" data-swiper-parallax="-100">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Praesentium?
</div>
<div class="swiper-slide-text" data-swiper-parallax="-200">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Possimus facilis eius quia ipsum aliquid quod doloremque
illo autem culpa reiciendis.
</div>
</div>
</div>
<div class="swiper-slide timeline-slides-swiper-slide">
<img
class="swiper-slide-image"
data-swiper-parallax="10%"
src="https://studio.swiperjs.com/demo-images/nature/01.jpg"
/>
<div class="swiper-slide-content">
<div class="swiper-slide-title" data-swiper-parallax="-100">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Iste.
</div>
<div class="swiper-slide-text" data-swiper-parallax="-200">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. In
autem expedita cum adipisci nisi fugas?
</div>
</div>
</div>
<div class="swiper-slide timeline-slides-swiper-slide">
<img
class="swiper-slide-image"
data-swiper-parallax="10%"
src="https://studio.swiperjs.com/demo-images/nature/02.jpg"
/>
<div class="swiper-slide-content">
<div class="swiper-slide-title" data-swiper-parallax="-100">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Voluptate maxime pariatur.
</div>
<div class="swiper-slide-text" data-swiper-parallax="-200">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Impedit eos eum expedita voluptatum enim porro modi hic,
ipsa reprehenderit veritatis.
</div>
</div>
</div>
<div class="swiper-slide timeline-slides-swiper-slide">
<img
class="swiper-slide-image"
data-swiper-parallax="10%"
src="https://studio.swiperjs.com/demo-images/nature/03.jpg"
/>
<div class="swiper-slide-content">
<div class="swiper-slide-title" data-swiper-parallax="-100">
Lorem, ipsum dolor.
</div>
<div class="swiper-slide-text" data-swiper-parallax="-200">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui
nobis dolore odit, quos.
</div>
</div>
</div>
<div class="swiper-slide timeline-slides-swiper-slide">
<img
class="swiper-slide-image"
data-swiper-parallax="10%"
src="https://studio.swiperjs.com/demo-images/nature/05.jpg"
/>
<div class="swiper-slide-content">
<div class="swiper-slide-title" data-swiper-parallax="-100">
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Saepe, doloremque!
</div>
<div class="swiper-slide-text" data-swiper-parallax="-200">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Voluptate, temporibus.
</div>
</div>
</div>
<div class="swiper-slide timeline-slides-swiper-slide">
<img
class="swiper-slide-image"
data-swiper-parallax="10%"
src="https://studio.swiperjs.com/demo-images/nature/10.jpg"
/>
<div class="swiper-slide-content">
<div class="swiper-slide-title" data-swiper-parallax="-100">
Lorem ipsum dolor sit amet consectetur.
</div>
<div class="swiper-slide-text" data-swiper-parallax="-200">
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Alias in esse est nisi distinctio ipsam ratione quas minima?
Laboriosam, facilis similique.
</div>
</div>
</div>
<div class="swiper-slide timeline-slides-swiper-slide">
<img
class="swiper-slide-image"
data-swiper-parallax="10%"
src="https://studio.swiperjs.com/demo-images/nature/01.jpg"
/>
<div class="swiper-slide-content">
<div class="swiper-slide-title" data-swiper-parallax="-100">
Lorem, ipsum.
</div>
<div class="swiper-slide-text" data-swiper-parallax="-200">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Voluptatem, natus aspernatur?
</div>
</div>
</div>
<div class="swiper-slide timeline-slides-swiper-slide">
<img
class="swiper-slide-image"
data-swiper-parallax="10%"
src="https://studio.swiperjs.com/demo-images/nature/08.jpg"
/>
<div class="swiper-slide-content">
<div class="swiper-slide-title" data-swiper-parallax="-100">
Lorem, ipsum dolor.
</div>
<div class="swiper-slide-text" data-swiper-parallax="-200">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Corrupti praesentium sunt ex.
</div>
</div>
</div>
</div>
<div class="timeline-nav">
<div class="timeline-swiper-button-prev">
<i class="icon-arrow-prev"></i>
</div>
<div class="timeline-swiper-button-next">
<i class="icon-arrow-next"></i>
</div>
</div>
</div>
<div class="swiper timeline-swiper">
<div class="timeline-current-date">
<div class="timeline-date-info">
<span class="timeline-date-month">Jan</span>
<span class="timeline-date-year">2016</span>
</div>
<div class="timeline-line"></div>
</div>
<div class="swiper-wrapper">
<div
class="swiper-slide timeline-date-slide"
data-year="2016"
data-month="Jan"
>
<div class="timeline-date-line"></div>
</div>
<div
class="swiper-slide timeline-date-slide"
data-year="2016"
data-month="Feb"
>
<div class="timeline-date-line"></div>
</div>
<div
class="swiper-slide timeline-date-slide"
data-year="2017"
data-month="Jan"
>
<div class="timeline-date-line"></div>
</div>
<div
class="swiper-slide timeline-date-slide"
data-year="2017"
data-month="Feb"
>
<div class="timeline-date-line"></div>
</div>
<div
class="swiper-slide timeline-date-slide"
data-year="2017"
data-month="Jun"
>
<div class="timeline-date-line"></div>
</div>
<div
class="swiper-slide timeline-date-slide"
data-year="2017"
data-month="Aug"
>
<div class="timeline-date-line"></div>
</div>
<div
class="swiper-slide timeline-date-slide"
data-year="2017"
data-month="Oct"
>
<div class="timeline-date-line"></div>
</div>
<div
class="swiper-slide timeline-date-slide"
data-year="2018"
data-month="Jul"
>
<div class="timeline-date-line"></div>
</div>
<div
class="swiper-slide timeline-date-slide"
data-year="2019"
data-month="Jan"
>
<div class="timeline-date-line"></div>
</div>
<div
class="swiper-slide timeline-date-slide"
data-year="2019"
data-month="Feb"
>
<div class="timeline-date-line"></div>
</div>
<div
class="swiper-slide timeline-date-slide"
data-year="2019"
data-month="Mar"
>
<div class="timeline-date-line"></div>
</div>
<div
class="swiper-slide timeline-date-slide"
data-year="2019"
data-month="Apr"
>
<div class="timeline-date-line"></div>
</div>
<div
class="swiper-slide timeline-date-slide"
data-year="2019"
data-month="May"
>
<div class="timeline-date-line"></div>
</div>
<div
class="swiper-slide timeline-date-slide"
data-year="2019"
data-month="Jun"
>
<div class="timeline-date-line"></div>
</div>
<div
class="swiper-slide timeline-date-slide"
data-year="2019"
data-month="Jul"
>
<div class="timeline-date-line"></div>
</div>
<div
class="swiper-slide timeline-date-slide"
data-year="2019"
data-month="Aug"
>
<div class="timeline-date-line"></div>
</div>
<div
class="swiper-slide timeline-date-slide"
data-year="2019"
data-month="Sep"
>
<div class="timeline-date-line"></div>
</div>
<div
class="swiper-slide timeline-date-slide"
data-year="2019"
data-month="Oct"
>
<div class="timeline-date-line"></div>
</div>
<div
class="swiper-slide timeline-date-slide"
data-year="2019"
data-month="Nov"
>
<div class="timeline-date-line"></div>
</div>
<div
class="swiper-slide timeline-date-slide"
data-year="2019"
data-month="Dec"
>
<div class="timeline-date-line"></div>
</div>
<div
class="swiper-slide timeline-date-slide"
data-year="2020"
data-month="Jul"
>
<div class="timeline-date-line"></div>
</div>
</div>
</div>
</section>
.timeline-section {
display: flex;
flex-direction: column;
height: 83.64vh;
.timeline-slides-swiper {
user-select: none;
box-sizing: border-box;
overflow: hidden;
width: 100%;
height: 86.4%;
margin-bottom: 7.4vh;
padding-top: 0;
padding-bottom: 0;
}
.timeline-slides-swiper-slide {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: #ffffff;
overflow: hidden;
position: relative;
box-sizing: border-box;
border-radius: 0;
}
.swiper-slide-content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
position: relative;
z-index: 1;
box-sizing: border-box;
padding: 12.5vh 20px 30.6vh;
background-color: rgba(23, 1, 51, 0.21);
align-items: center;
text-align: center;
transform: translate3d(0, 0, 0);
}
.swiper-slide-title {
font-size: ac(28px, 18px, 375, 1440);
font-weight: 400;
line-height: 1.43;
color: rgba(255, 255, 255, 1);
max-width: 600px;
@include max-line-length(2);
@include media(769) {
@include max-line-length(3);
}
}
.swiper-slide-text {
font-size: ac(18px, 14px, 375, 1440);
line-height: 2.12;
max-width: 572px;
color: rgba(255, 255, 255, 1);
@include max-line-length(4);
@include media(769) {
line-height: 1.4;
@include max-line-length(6);
}
}
.swiper-slide-title + .swiper-slide-text {
margin-top: 8px;
}
.swiper-slide-image {
position: absolute;
width: 120%;
height: 120%;
object-fit: cover;
object-position: center;
z-index: 0;
}
.timeline-nav {
position: absolute;
left: 50%;
bottom: 23.5vh !important;
transform: translateX(-50%) !important;
z-index: 1;
display: flex;
@media only screen and (max-height: 891px) {
width: 100%;
justify-content: center;
padding: 0 20px;
bottom: 50%;
transform: translate(-50%, -50%);
.timeline-swiper-button-prev {
margin-right: 650px;
}
}
}
.timeline-swiper-button-prev,
.timeline-swiper-button-next {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid var(--primary);
border-radius: 50%;
width: 46px;
height: 46px;
font-size: 20px;
@include transition-all;
&:hover {
transform: scale(1.1);
}
}
.timeline-swiper-button-prev {
margin-right: 16px !important;
}
.swiper-button-disabled {
border-color: var(--purple) !important;
color: var(--color-white) !important;
}
}
.timeline-swiper {
--slide-width: 45px;
width: 2px;
overflow: visible;
.swiper-wrapper {
align-items: flex-end;
}
.timeline-date-slide {
width: var(--slide-width);
display: flex;
align-items: flex-end;
border-bottom: 2px solid var(--primary);
cursor: pointer;
&:last-child {
width: 2px;
}
&[data-start-year] {
.timeline-date-line {
height: 28px;
}
& + .timeline-date-slide[data-start-year] {
&::after {
padding-top: ac(2em, 1.5em);
font-size: 20px;
@include media(769) {
padding-top: unset;
font-size: 16px;
}
}
}
&::after {
content: attr(data-year);
position: absolute;
top: 100%;
left: 0;
transform: translateX(-50%);
font-weight: 600;
font-size: ac(30px, 20px, 375, 1440);
color: var(--primary);
transition: opacity 300ms ease, transform 500ms ease;
}
&.swiper-slide-active {
&::after {
opacity: 0;
transform: translate(-50%, 100%);
}
}
}
}
.timeline-date-line {
width: 2px;
height: 15px;
background-color: var(--primary);
transition: width ease 300ms;
}
}
.timeline-current-date {
position: absolute;
bottom: -6vh;
z-index: 2;
pointer-events: none;
}
.timeline-date-info {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transform: translateX(-50%);
width: ac(123px, 75px, 375, 1440);
height: ac(123px, 75px, 375, 1440);
padding: ac(16px, 10px);
border-radius: 0 32.5%;
text-align: center;
font-weight: 600;
line-height: 1;
color: var(--primary);
background-color: #ffffff;
.timeline-date-month {
font-size: ac(30px, 15px, 375, 1440);
}
.timeline-date-year {
font-size: ac(40px, 20px, 375, 1440);
}
}
.timeline-line {
width: 2px;
height: 20vh;
background-color: var(--primary);
@include media(1441) {
height: 23vh;
}
}
.timeline-section {
display: flex;
flex-direction: column;
height: 83.64vh;
.timeline-slides-swiper {
user-select: none;
box-sizing: border-box;
overflow: hidden;
width: 100%;
height: 86.4%;
margin-bottom: 7.4vh;
padding-top: 0;
padding-bottom: 0;
}
.timeline-slides-swiper-slide {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: #ffffff;
overflow: hidden;
position: relative;
box-sizing: border-box;
border-radius: 0;
}
.swiper-slide-content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
position: relative;
z-index: 1;
box-sizing: border-box;
padding: 12.5vh 20px 30.6vh;
background-color: rgba(23, 1, 51, 0.21);
align-items: center;
text-align: center;
transform: translate3d(0, 0, 0);
}
.swiper-slide-title {
font-size: ac(28px, 18px, 375, 1440);
font-weight: 400;
line-height: 1.43;
color: rgba(255, 255, 255, 1);
max-width: 600px;
@mixin max-line-length 2;
@mixin media 769 {
@mixin max-line-length 3;
}
}
.swiper-slide-text {
font-size: ac(18px, 14px, 375, 1440);
line-height: 2.12;
max-width: 572px;
color: rgba(255, 255, 255, 1);
@mixin max-line-length 4;
@mixin media 769 {
line-height: 1.4;
@mixin max-line-length 6;
}
}
.swiper-slide-title + .swiper-slide-text {
margin-top: 8px;
}
.swiper-slide-image {
position: absolute;
width: 120%;
height: 120%;
object-fit: cover;
object-position: center;
z-index: 0;
}
.timeline-nav {
position: absolute;
left: 50%;
bottom: 23.5vh !important;
transform: translateX(-50%) !important;
z-index: 1;
display: flex;
@media only screen and (max-height: 891px) {
width: 100%;
justify-content: center;
padding: 0 20px;
bottom: 50%;
transform: translate(-50%, -50%);
.timeline-swiper-button-prev {
margin-right: 650px;
}
}
}
.timeline-swiper-button-prev,
.timeline-swiper-button-next {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid var(--primary);
border-radius: 50%;
width: 46px;
height: 46px;
font-size: 20px;
@mixin transition-all;
&:hover {
transform: scale(1.1);
}
}
.timeline-swiper-button-prev {
margin-right: 16px !important;
}
.swiper-button-disabled {
border-color: var(--purple) !important;
color: var(--color-white) !important;
}
}
.timeline-swiper {
--slide-width: 45px;
width: 2px;
overflow: visible;
.swiper-wrapper {
align-items: flex-end;
}
.timeline-date-slide {
width: var(--slide-width);
display: flex;
align-items: flex-end;
border-bottom: 2px solid var(--primary);
cursor: pointer;
&:last-child {
width: 2px;
}
&[data-start-year] {
.timeline-date-line {
height: 28px;
}
& + .timeline-date-slide[data-start-year] {
&::after {
padding-top: ac(2em, 1.5em);
font-size: 20px;
@mixin media 769 {
padding-top: unset;
font-size: 16px;
}
}
}
&::after {
content: attr(data-year);
position: absolute;
top: 100%;
left: 0;
transform: translateX(-50%);
font-weight: 600;
font-size: ac(30px, 20px, 375, 1440);
color: var(--primary);
transition: opacity 300ms ease, transform 500ms ease;
}
&.swiper-slide-active {
&::after {
opacity: 0;
transform: translate(-50%, 100%);
}
}
}
}
.timeline-date-line {
width: 2px;
height: 15px;
background-color: var(--primary);
transition: width ease 300ms;
}
}
.timeline-current-date {
position: absolute;
bottom: -6vh;
z-index: 2;
pointer-events: none;
}
.timeline-date-info {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transform: translateX(-50%);
width: ac(123px, 75px, 375, 1440);
height: ac(123px, 75px, 375, 1440);
padding: ac(16px, 10px);
border-radius: 0 32.5%;
text-align: center;
font-weight: 600;
line-height: 1;
color: var(--primary);
background-color: #ffffff;
.timeline-date-month {
font-size: ac(30px, 15px, 375, 1440);
}
.timeline-date-year {
font-size: ac(40px, 20px, 375, 1440);
}
}
.timeline-line {
width: 2px;
height: 20vh;
background-color: var(--primary);
@mixin media 1441 {
height: 23vh;
}
}
const timelineSectionRef = document.querySelector(".timeline-section");
if (timelineSectionRef) {
const timelineMonthRef = timelineSectionRef.querySelector(
".timeline-date-month"
);
const timelineYearRef = timelineSectionRef.querySelector(
".timeline-date-year"
);
const timelineSlidesSwiper = new Swiper(".timeline-slides-swiper", {
watchSlidesProgress: true,
navigation: {
prevEl: ".timeline-swiper-button-prev",
nextEl: ".timeline-swiper-button-next",
},
speed: 600,
threshold: 5,
effect: "fade",
slidesPerGroupAuto: false,
observeParents: true,
grabCursor: true,
parallax: { enabled: true },
});
const timelineSwiper = new Swiper(".timeline-swiper", {
watchSlidesProgress: true,
speed: 600,
slidesPerView: "auto",
threshold: 5,
slidesPerGroupAuto: false,
grabCursor: true,
slideToClickedSlide: true,
on: {
init: (swiper) => {
const { slides } = swiper;
slides.forEach((slide, idx, arr) => {
if (idx === 0) {
slide.dataset.startYear = true;
return;
}
if (slide.dataset.year !== arr[idx - 1].dataset.year)
slide.dataset.startYear = true;
});
},
},
});
timelineSlidesSwiper.controller.control = timelineSwiper;
timelineSwiper.controller.control = timelineSlidesSwiper;
timelineSwiper.on("slideChange", (swiper) => {
const { month, year } = swiper.slides[swiper.activeIndex].dataset;
timelineYearRef.textContent = year;
timelineMonthRef.textContent = month;
});
}
Використовується з бібліотекою Swiper
