Sliders
Portfolio slider
11 Nov 2022
HTML
SCSS
PostCSS
JS
<section class="section portfolio-section">
<img
src="images/portfolio-bg.jpg"
alt=""
class="portfolio-section__left-bg"
aria-hidden="true"
/>
<div class="cont">
<div class="portfolio">
<div class="portfolio__left-block">
<h1 class="portfolio__title">Portfolio</h1>
<div class="portfolio__clients-slider">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img
src="images/portfolio-logo-1.svg"
alt=""
class="portfolio__client-logo active"
data-slide-id="0"
/>
</div>
<div class="swiper-slide">
<img
src="images/portfolio-logo-6.svg"
alt=""
class="portfolio__client-logo"
data-slide-id="1"
/>
</div>
<div class="swiper-slide">
<img
src="images/portfolio-logo-7.svg"
alt=""
class="portfolio__client-logo"
data-slide-id="2"
/>
</div>
<div class="swiper-slide">
<img
src="images/portfolio-logo-2.svg"
alt=""
class="portfolio__client-logo"
data-slide-id="3"
/>
</div>
<div class="swiper-slide">
<img
src="images/portfolio-logo-5.svg"
alt=""
class="portfolio__client-logo"
data-slide-id="4"
/>
</div>
<div class="swiper-slide">
<img
src="images/portfolio-logo-1.svg"
alt=""
class="portfolio__client-logo"
data-slide-id="5"
/>
</div>
<div class="swiper-slide">
<img
src="images/portfolio-logo-3.svg"
alt=""
class="portfolio__client-logo"
data-slide-id="6"
/>
</div>
<div class="swiper-slide">
<img
src="images/portfolio-logo-4.svg"
alt=""
class="portfolio__client-logo"
data-slide-id="7"
/>
</div>
<div class="swiper-slide">
<img
src="images/portfolio-logo-8.svg"
alt=""
class="portfolio__client-logo"
data-slide-id="8"
/>
</div>
<div class="swiper-slide">
<img
src="images/portfolio-logo-8.svg"
alt=""
class="portfolio__client-logo"
data-slide-id="9"
/>
</div>
</div>
</div>
</div>
<div class="portfolio__right-block">
<div class="portfolio__descr-slider">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="portfolio__descr">
<h2 class="portfolio__descr-title">
Location | Sectors | Contract
</h2>
<div
class="portfolio__descr-main-text"
data-simplebar
>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Eget aliquet nibh praesent
tristique magna sit amet. Tortor posuere ac ut
consequat semper viverra nam libero. Tincidunt
lobortis feugiat vivamus at augue. Volutpat ac
tincidunt vitae semper quis lectus nulla at. In
fermentum et sollicitudin ac.
</p>
<p>
Enim blandit volutpat maecenas volutpat. Non
pulvinar neque laoreet suspendisse interdum
consectetur libero id. Et leo duis ut diam quam
nulla porttitor massa. Porta lorem mollis aliquam
ut porttitor leo a diam sollicitudin. Quam lacus
suspendisse faucibus interdum. Habitant morbi
tristique senectus et netus et malesuada.
</p>
</div>
<a href="#" class="btn">Visit website</a>
</div>
</div>
<div class="swiper-slide">
<div class="portfolio__descr">
<h2 class="portfolio__descr-title">
Location | Sectors | Contract
</h2>
<div
class="portfolio__descr-main-text"
data-simplebar
>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Eget aliquet nibh praesent
tristique magna sit amet. Tortor posuere ac ut
consequat semper viverra nam libero. Tincidunt
lobortis feugiat vivamus at augue. Volutpat ac
tincidunt vitae semper quis lectus nulla at. In
fermentum et sollicitudin ac.
</p>
<p>
Enim blandit volutpat maecenas volutpat. Non
pulvinar neque laoreet suspendisse interdum
consectetur libero id. Et leo duis ut diam quam
nulla porttitor massa. Porta lorem mollis aliquam
ut porttitor leo a diam sollicitudin. Quam lacus
suspendisse faucibus interdum. Habitant morbi
tristique senectus et netus et malesuada.
</p>
</div>
<a href="#" class="btn">Visit website</a>
</div>
</div>
<div class="swiper-slide">
<div class="portfolio__descr">
<h2 class="portfolio__descr-title">
Location | Sectors | Contract
</h2>
<div
class="portfolio__descr-main-text"
data-simplebar
>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Eget aliquet nibh praesent
tristique magna sit amet. Tortor posuere ac ut
consequat semper viverra nam libero. Tincidunt
lobortis feugiat vivamus at augue. Volutpat ac
tincidunt vitae semper quis lectus nulla at. In
fermentum et sollicitudin ac.
</p>
<p>
Enim blandit volutpat maecenas volutpat. Non
pulvinar neque laoreet suspendisse interdum
consectetur libero id. Et leo duis ut diam quam
nulla porttitor massa. Porta lorem mollis aliquam
ut porttitor leo a diam sollicitudin. Quam lacus
suspendisse faucibus interdum. Habitant morbi
tristique senectus et netus et malesuada.
</p>
</div>
<a href="#" class="btn">Visit website</a>
</div>
</div>
<div class="swiper-slide">
<div class="portfolio__descr">
<h2 class="portfolio__descr-title">
Location | Sectors | Contract
</h2>
<div
class="portfolio__descr-main-text"
data-simplebar
>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Eget aliquet nibh praesent
tristique magna sit amet. Tortor posuere ac ut
consequat semper viverra nam libero. Tincidunt
lobortis feugiat vivamus at augue. Volutpat ac
tincidunt vitae semper quis lectus nulla at. In
fermentum et sollicitudin ac.
</p>
<p>
Enim blandit volutpat maecenas volutpat. Non
pulvinar neque laoreet suspendisse interdum
consectetur libero id. Et leo duis ut diam quam
nulla porttitor massa. Porta lorem mollis aliquam
ut porttitor leo a diam sollicitudin. Quam lacus
suspendisse faucibus interdum. Habitant morbi
tristique senectus et netus et malesuada.
</p>
</div>
<a href="#" class="btn">Visit website</a>
</div>
</div>
<div class="swiper-slide">
<div class="portfolio__descr">
<h2 class="portfolio__descr-title">
Location | Sectors | Contract
</h2>
<div
class="portfolio__descr-main-text"
data-simplebar
>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Eget aliquet nibh praesent
tristique magna sit amet. Tortor posuere ac ut
consequat semper viverra nam libero. Tincidunt
lobortis feugiat vivamus at augue. Volutpat ac
tincidunt vitae semper quis lectus nulla at. In
fermentum et sollicitudin ac.
</p>
<p>
Enim blandit volutpat maecenas volutpat. Non
pulvinar neque laoreet suspendisse interdum
consectetur libero id. Et leo duis ut diam quam
nulla porttitor massa. Porta lorem mollis aliquam
ut porttitor leo a diam sollicitudin. Quam lacus
suspendisse faucibus interdum. Habitant morbi
tristique senectus et netus et malesuada.
</p>
</div>
<a href="#" class="btn">Visit website</a>
</div>
</div>
<div class="swiper-slide">
<div class="portfolio__descr">
<h2 class="portfolio__descr-title">
Location | Sectors | Contract
</h2>
<div
class="portfolio__descr-main-text"
data-simplebar
>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Eget aliquet nibh praesent
tristique magna sit amet. Tortor posuere ac ut
consequat semper viverra nam libero. Tincidunt
lobortis feugiat vivamus at augue. Volutpat ac
tincidunt vitae semper quis lectus nulla at. In
fermentum et sollicitudin ac.
</p>
<p>
Enim blandit volutpat maecenas volutpat. Non
pulvinar neque laoreet suspendisse interdum
consectetur libero id. Et leo duis ut diam quam
nulla porttitor massa. Porta lorem mollis aliquam
ut porttitor leo a diam sollicitudin. Quam lacus
suspendisse faucibus interdum. Habitant morbi
tristique senectus et netus et malesuada.
</p>
</div>
<a href="#" class="btn">Visit website</a>
</div>
</div>
<div class="swiper-slide">
<div class="portfolio__descr">
<h2 class="portfolio__descr-title">
Location | Sectors | Contract
</h2>
<div
class="portfolio__descr-main-text"
data-simplebar
>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Eget aliquet nibh praesent
tristique magna sit amet. Tortor posuere ac ut
consequat semper viverra nam libero. Tincidunt
lobortis feugiat vivamus at augue. Volutpat ac
tincidunt vitae semper quis lectus nulla at. In
fermentum et sollicitudin ac.
</p>
<p>
Enim blandit volutpat maecenas volutpat. Non
pulvinar neque laoreet suspendisse interdum
consectetur libero id. Et leo duis ut diam quam
nulla porttitor massa. Porta lorem mollis aliquam
ut porttitor leo a diam sollicitudin. Quam lacus
suspendisse faucibus interdum. Habitant morbi
tristique senectus et netus et malesuada.
</p>
</div>
<a href="#" class="btn">Visit website</a>
</div>
</div>
<div class="swiper-slide">
<div class="portfolio__descr">
<h2 class="portfolio__descr-title">
Location | Sectors | Contract
</h2>
<div
class="portfolio__descr-main-text"
data-simplebar
>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Eget aliquet nibh praesent
tristique magna sit amet. Tortor posuere ac ut
consequat semper viverra nam libero. Tincidunt
lobortis feugiat vivamus at augue. Volutpat ac
tincidunt vitae semper quis lectus nulla at. In
fermentum et sollicitudin ac.
</p>
<p>
Enim blandit volutpat maecenas volutpat. Non
pulvinar neque laoreet suspendisse interdum
consectetur libero id. Et leo duis ut diam quam
nulla porttitor massa. Porta lorem mollis aliquam
ut porttitor leo a diam sollicitudin. Quam lacus
suspendisse faucibus interdum. Habitant morbi
tristique senectus et netus et malesuada.
</p>
</div>
<a href="#" class="btn">Visit website</a>
</div>
</div>
<div class="swiper-slide">
<div class="portfolio__descr">
<h2 class="portfolio__descr-title">
Location | Sectors | Contract
</h2>
<div
class="portfolio__descr-main-text"
data-simplebar
>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Eget aliquet nibh praesent
tristique magna sit amet. Tortor posuere ac ut
consequat semper viverra nam libero. Tincidunt
lobortis feugiat vivamus at augue. Volutpat ac
tincidunt vitae semper quis lectus nulla at. In
fermentum et sollicitudin ac.
</p>
<p>
Enim blandit volutpat maecenas volutpat. Non
pulvinar neque laoreet suspendisse interdum
consectetur libero id. Et leo duis ut diam quam
nulla porttitor massa. Porta lorem mollis aliquam
ut porttitor leo a diam sollicitudin. Quam lacus
suspendisse faucibus interdum. Habitant morbi
tristique senectus et netus et malesuada.
</p>
</div>
<a href="#" class="btn">Visit website</a>
</div>
</div>
<div class="swiper-slide">
<div class="portfolio__descr">
<h2 class="portfolio__descr-title">
Location | Sectors | Contract
</h2>
<div
class="portfolio__descr-main-text"
data-simplebar
>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Eget aliquet nibh praesent
tristique magna sit amet. Tortor posuere ac ut
consequat semper viverra nam libero. Tincidunt
lobortis feugiat vivamus at augue. Volutpat ac
tincidunt vitae semper quis lectus nulla at. In
fermentum et sollicitudin ac.
</p>
<p>
Enim blandit volutpat maecenas volutpat. Non
pulvinar neque laoreet suspendisse interdum
consectetur libero id. Et leo duis ut diam quam
nulla porttitor massa. Porta lorem mollis aliquam
ut porttitor leo a diam sollicitudin. Quam lacus
suspendisse faucibus interdum. Habitant morbi
tristique senectus et netus et malesuada.
</p>
</div>
<a href="#" class="btn">Visit website</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
.portfolio-section {
height: 100vh;
min-height: 740px;
padding-top: 100px;
padding-bottom: 50px;
@include media(901) {
height: auto;
}
&::after {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
background-color: rgba(0, 0, 0, 0.5);
}
.cont {
position: relative;
z-index: 2;
height: 100%;
}
}
.portfolio__top-decor {
top: 0;
right: 0;
.decor-rect {
transform: rotate(37.57deg) translate(5%, -46%);
width: vw(417);
max-width: 417px;
min-width: 350px;
height: vw(417);
max-height: 417px;
min-height: 350px;
}
@include media(1921) {
.decor-rect {
transform: rotate(37.57deg) translate(-25%, -53%);
}
}
@include media(901) {
display: none;
}
}
.portfolio-section__left-bg {
position: absolute;
top: 0;
left: 0;
z-index: -2;
width: 50%;
height: 100%;
object-fit: cover;
opacity: 0.5;
@include media(901) {
width: 100%;
opacity: 0.35;
}
}
.portfolio {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
@include media(901) {
flex-direction: column;
}
}
.portfolio__left-block,
.portfolio__right-block {
width: 50%;
@include media(901) {
width: 100%;
}
}
.portfolio__left-block {
overflow: hidden;
padding-right: 28px;
}
.portfolio__right-block {
padding-left: ac(104px, 30px);
@include media(901) {
padding-left: 0;
}
}
.portfolio__title {
margin-bottom: ac(75px, 25px);
padding: ac(20px, 5px) 0 ac(20px, 5px) 39px;
font-size: ac(60px, 40px);
text-transform: uppercase;
}
.portfolio__clients-slider {
--slide-height: 86px;
--slide-gap: 37px;
.swiper-wrapper {
max-height: calc(var(--slide-height) * 3 + var(--slide-gap) * 2);
justify-content: center;
@include media(901) {
justify-content: unset;
margin-bottom: 35px;
}
}
.swiper-slide {
display: flex;
align-items: center;
justify-content: center;
height: var(--slide-height);
@include media(901) {
width: fit-content;
}
}
}
.portfolio__client-logo {
margin: 0 auto;
opacity: 0.4;
cursor: pointer;
transition: opacity 0.3s ease;
&.active {
opacity: 1;
}
}
.portfolio__descr-slider {
backdrop-filter: blur(10px);
padding: 20px;
.swiper-wrapper {
align-items: center;
}
.swiper-slide.swiper-slide-active {
.portfolio__descr {
transform: scale(1);
}
}
}
.portfolio__descr {
transform: scale(0.75);
transition: transform 500ms ease-in-out;
}
.portfolio__descr-title {
margin-bottom: ac(29px, 10px);
font-size: 21px;
font-weight: 500;
line-height: 1.23;
}
.portfolio__descr-main-text {
max-height: 500px;
margin-bottom: 29px;
& > * {
font-size: 18px;
font-weight: 300;
line-height: 1.22;
}
p {
&:not(:last-child) {
margin-bottom: 20px;
}
}
}
.portfolio-section {
height: 100vh;
min-height: 740px;
padding-top: 100px;
padding-bottom: 50px;
@mixin media 901 {
height: auto;
}
&::after {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
background-color: rgba(0, 0, 0, 0.5);
}
.cont {
position: relative;
z-index: 2;
height: 100%;
}
}
.portfolio__top-decor {
top: 0;
right: 0;
.decor-rect {
transform: rotate(37.57deg) translate(5%, -46%);
width: vw(417);
max-width: 417px;
min-width: 350px;
height: vw(417);
max-height: 417px;
min-height: 350px;
}
@mixin media 1921 {
.decor-rect {
transform: rotate(37.57deg) translate(-25%, -53%);
}
}
@mixin media 901 {
display: none;
}
}
.portfolio-section__left-bg {
position: absolute;
top: 0;
left: 0;
z-index: -2;
width: 50%;
height: 100%;
object-fit: cover;
opacity: 0.5;
@mixin media 901 {
width: 100%;
opacity: 0.35;
}
}
.portfolio {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
@mixin media 901 {
flex-direction: column;
}
}
.portfolio__left-block,
.portfolio__right-block {
width: 50%;
@mixin media 901 {
width: 100%;
}
}
.portfolio__left-block {
overflow: hidden;
padding-right: 28px;
}
.portfolio__right-block {
padding-left: ac(104px, 30px);
@mixin media 901 {
padding-left: 0;
}
}
.portfolio__title {
margin-bottom: ac(75px, 25px);
padding: ac(20px, 5px) 0 ac(20px, 5px) 39px;
font-size: ac(60px, 40px);
text-transform: uppercase;
}
.portfolio__clients-slider {
--slide-height: 86px;
--slide-gap: 37px;
/* width: 100%; */
.swiper-wrapper {
max-height: calc(var(--slide-height) * 3 + var(--slide-gap) * 2);
justify-content: center;
/* align-items: center; */
@mixin media 901 {
justify-content: unset;
margin-bottom: 35px;
}
}
.swiper-slide {
display: flex;
align-items: center;
justify-content: center;
height: var(--slide-height);
/* width: 364px; */
@mixin media 901 {
width: fit-content;
}
}
}
.portfolio__client-logo {
margin: 0 auto;
opacity: 0.4;
cursor: pointer;
transition: setTransition(opacity);
&.active {
opacity: 1;
}
}
.portfolio__descr-slider {
backdrop-filter: blur(10px);
padding: 20px;
.swiper-wrapper {
align-items: center;
}
.swiper-slide.swiper-slide-active {
.portfolio__descr {
transform: scale(1);
}
}
}
.portfolio__descr {
transform: scale(0.75);
transition: setTransition(500ms, transform);
}
.portfolio__descr-title {
margin-bottom: ac(29px, 10px);
font-size: 21px;
font-weight: 500;
line-height: 1.23;
}
.portfolio__descr-main-text {
max-height: 500px;
margin-bottom: 29px;
& > * {
font-size: 18px;
font-weight: 300;
line-height: 1.22;
}
p {
&:not(:last-child) {
margin-bottom: 20px;
}
}
}
const portfolioSection = document.querySelector(".portfolio-section");
if (portfolioSection) {
const logoSwiper = new Swiper(".portfolio__clients-slider", {
slidesPerView: "auto",
spaceBetween: 37,
grabCursor: true,
freeMode: true,
// grid: {
// rows: 3,
// fill: "column",
// },
breakpoints: {
901: {
slidesPerView: 3,
spaceBetween: 37,
freeMode: false,
grid: {
rows: 3,
fill: "column",
},
},
},
});
const descrSlider = new Swiper(".portfolio__descr-slider", {
slidesPerView: 1,
allowTouchMove: false,
effect: "fade",
fadeEffect: {
crossFade: true,
},
breakpoints: {},
});
const logoArr = portfolioSection.querySelectorAll(".portfolio__client-logo");
let activeSlideId = 0;
const handleLogoClick = (elem) => {
const { slideId } = elem.dataset;
logoArr[activeSlideId].classList.remove("active");
logoArr[slideId].classList.add("active");
descrSlider.slideTo(Number(slideId));
activeSlideId = slideId;
console.log(slideId);
};
logoArr.forEach((elem) => {
elem.addEventListener("click", () => {
handleLogoClick(elem);
});
});
}
