Демо:
https://codepen.io/ildar-meyker/pen/PoLoWpO
Плагины:
Подключение:
//
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.jsРазметка:
//
<div class="wrapper">
<div class="box">
<div class="slider-cards" id="slider-cards">
<div class="slider-cards__wrapper">
<div class="slider-cards__slide">
<article class="card-article">
<div class="card-article__time">1 ноября 2023</div>
<h2 class="card-article__h1">ДЕНЬ УЧИТЕЛЯ</h2>
<div class="card-article__desc">
В октябре свыше ста государств ежегодно отмечают
Всемирный день учителя. В России неизменно 5
октября. В этот день отмечаются роль и заслуги
всех работников сферы образования, а также их
неоценимый вклад в жизнь и развитие общества.
</div>
<div class="card-article__btn-more">
<a href="#" class="btn-default">Подробнее</a>
</div>
<div
class="img-ratio card-article__img"
style="padding-top: 66.66%"
>
<img
src="https://loremflickr.com/570/320/education?random=1"
alt=""
/>
</div>
</article>
</div>
<div class="slider-cards__slide">
<article class="card-article">
<div class="card-article__time">1 ноября 2023</div>
<h2 class="card-article__h1">ДЕНЬ СТУДЕНТА</h2>
<div class="card-article__desc">
В октябре свыше ста государств ежегодно отмечают
Всемирный день учителя. Lorem ipsum dolor sit,
amet consectetur adipisicing elit. Numquam
voluptas ut quam ex! Autem perspiciatis corporis
ducimus voluptatum praesentium recusandae,
mollitia similique delectus minima deleniti
animi, ipsum perferendis temporibus dicta.
</div>
<div class="card-article__btn-more">
<a href="#" class="btn-default">Подробнее</a>
</div>
<div
class="img-ratio card-article__img"
style="padding-top: 66.66%"
>
<img
src="https://loremflickr.com/570/320/education?random=2"
alt=""
/>
</div>
</article>
</div>
<div class="slider-cards__slide">
<article class="card-article">
<div class="card-article__time">1 ноября 2023</div>
<h2 class="card-article__h1">
ДЕНЬ РОЖДЕНИЯ ДЕКАНА
</h2>
<div class="card-article__desc">
В октябре свыше ста государств ежегодно отмечают
Всемирный день учителя. В России неизменно 5
октября.
</div>
<div class="card-article__btn-more">
<a href="#" class="btn-default">Подробнее</a>
</div>
<div
class="img-ratio card-article__img"
style="padding-top: 66.66%"
>
<img
src="https://loremflickr.com/570/320/education?random=3"
alt=""
/>
</div>
</article>
</div>
</div>
<nav class="nav-arrows nav-arrows--white">
<button class="nav-arrows__item slider-cards__btn-prev">
<svg
id="i-chevron-left"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
width="32"
height="32"
fill="none"
stroke="currentcolor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
>
<path d="M20 30 L8 16 20 2" />
</svg>
</button>
<button class="nav-arrows__item slider-cards__btn-next">
<svg
id="i-chevron-right"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
width="32"
height="32"
fill="none"
stroke="currentcolor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
>
<path d="M12 30 L24 16 12 2" />
</svg>
</button>
</nav>
</div>
</div>
</div>Стили:
//
.box {
max-width: 500px;
margin: 0 auto;
}
.wrapper {
padding: 10rem 5rem 5rem 5rem;
background: url('https://images.unsplash.com/photo-1648317731943-e67d953ffde4?q=80&w=2069&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') no-repeat 50% 50% / cover;
}
// slider-cards
.slider-cards {
position: relative;
&__wrapper {
display: flex;
}
&__slide {
transition: opacity 0.5s, transform 0.5s;
position: relative;
flex: 0 0 auto;
width: 100%;
margin-left: -100%;
transform: translate(4rem, -4rem);
background: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(30px);
border-radius: 2rem;
display: flex;
flex-direction: column;
opacity: 0;
.card-article {
transition: opacity 0.5s, transform 0.5s;
flex-grow: 1;
opacity: 0;
}
&:first-child {
margin-left: 0;
.slider-cards:not(.initialized) & {
transform: translate(0, 0);
opacity: 1;
.card-article {
opacity: 1;
}
}
}
&.next,
&.next.next--weight {
transform: translate(4rem, -4rem);
z-index: 1;
opacity: 1;
.card-article {
opacity: 0;
}
}
&.next.next--weight {
transition: opacity 0.2s, transform 0.2s;
}
&.current,
&.current.current--weight {
transform: translate(0, 0);
z-index: 2;
opacity: 1;
.card-article {
opacity: 1;
}
}
&.current.current--weight {
transition: opacity 0.5s, transform 0.5s;
}
&.prev {
transition: opacity 0.2s, transform 0.2s;
transform: translate(-8rem, 8rem);
z-index: 3;
opacity: 0;
}
}
&__btn-prev,
&__btn-next {
position: absolute;
z-index: 10;
top: 50%;
transform: translateY(-50%);
visibility: hidden;
&.active {
visibility: visible;
}
}
&__btn-prev {
right: 100%;
margin-right: 2.4rem;
}
&__btn-next {
margin-left: 6.4rem;
left: 100%;
}
}
// card-article
.card-article {
padding: 5rem 4rem;
border-radius: 2rem;
border: 1px solid rgba(33, 34, 46, 0.15);
background: #fff;
&__time {
margin-bottom: 4rem;
display: block;
font-size: 1.8rem;
color: #899ab7;
}
&__h1 {
margin-bottom: 2rem;
font-family: "Inter";
font-size: 4.8rem;
font-weight: 900;
line-height: 1.05;
text-transform: uppercase;
}
&__desc {
font-size: 1.8rem;
}
&__btn-more {
margin-top: 4rem;
}
&__img {
margin-top: 4rem;
img {
border-radius: 1.2rem;
}
}
}
@media (max-width: 999.98px) {
.card-article {
padding: 2rem;
border-radius: 1.2rem;
&__time {
font-size: 1.4rem;
}
&__h1 {
font-size: 2.8rem;
}
&__desc {
font-size: 1.4rem;
}
}
}
// nav-arrows
.nav-arrows {
display: flex;
align-items: center;
gap: 2px;
font-size: 1.1rem;
&--white {
.nav-arrows__item {
background: #fff;
}
}
&__item {
@extend .reset-btn;
width: 7.27273em;
height: 3.63636em;
background: #eff1f4;
border-radius: 2em;
display: flex;
justify-content: center;
align-items: center;
font-size: inherit;
&:not(.swiper-button-disabled):hover {
background: #0047ba;
svg {
color: #fff;
}
}
&.swiper-button-disabled {
opacity: 0.5;
cursor: default;
}
svg {
transform: scale(0.5);
}
}
}
@media (max-width: 999.98px) {
.nav-arrows {
font-size: 0.9rem;
}
}
// btn-default
.btn-default {
@extend .reset-btn;
display: inline-flex;
justify-content: center;
align-items: center;
min-width: 20rem;
border: 1px solid transparent;
padding: 0 4rem;
height: 6rem;
border-radius: 1.2rem;
background: #0047ba;
font-size: 1.8rem;
line-height: 1.2;
text-align: center;
color: #fff;
&:hover {
background: lighten(#0047ba, 5%);
}
&--gray {
background: #eff1f4;
color: #21222e;
&:hover {
background: lighten(#eff1f4, 1%);
}
}
&--white {
background: #fff;
color: #21222e;
&:hover {
background: lighten(#eff1f4, 1%);
}
}
}
@media (max-width: 999.98px) {
.btn-default {
width: 100%;
font-size: 1.4rem;
border-radius: 0.8rem;
height: 4.8rem;
padding: 0 2rem;
}
}
Инициализация:
//
export default class SliderCards {
constructor(selector, options) {
this.selector = selector;
this.options = options || {};
this.$slider = $(this.selector);
this.$wrapper = this.findWrapper();
this.$initialSlides = this.findSlides();
if (this.$initialSlides.length < 2) return;
this.cloneSlides();
this.$actualSlides = this.findSlides();
this.setClasses();
this.addListeners();
this.animating = false;
}
setClasses() {
const $current = this.$actualSlides.first().addClass("current");
this.findNextTo($current).addClass("next");
this.findPrevTo($current).addClass("prev");
this.$slider.addClass("initialized");
}
findWrapper() {
return this.$slider.find(".slider-cards__wrapper");
}
findSlides() {
return this.$slider.find(".slider-cards__slide");
}
cloneSlides() {
const count = this.$initialSlides.length;
if (count > 1 && count < 4) {
this.$initialSlides.clone().appendTo(this.$wrapper);
}
}
findNextTo($base) {
const $next = $base.next();
return $next.length ? $next : this.$actualSlides.first();
}
findPrevTo($base) {
const $prev = $base.prev();
return $prev.length ? $prev : this.$actualSlides.last();
}
slideToNext() {
if (this.animating) return;
this.animating = true;
const $current = this.$actualSlides.filter(".current");
const $next = this.findNextTo($current);
const $nextnext = this.findNextTo($next);
const $prev = this.findPrevTo($current);
$current.addClass("prev");
$next.addClass("current");
$nextnext.addClass("next");
$prev.removeClass("prev");
setTimeout(() => {
$current.removeClass("current");
$next.removeClass("next");
this.animating = false;
}, 600);
}
slideToPrev() {
if (this.animating) return;
this.animating = true;
const $current = this.$actualSlides.filter(".current");
const $next = this.findNextTo($current);
const $prev = this.findPrevTo($current);
const $prevprev = this.findPrevTo($prev);
$current.addClass("next next--weight");
$next.removeClass("next");
$prev.addClass("current current--weight");
$prevprev.addClass("prev");
setTimeout(() => {
$current.removeClass("current next--weight");
$prev.removeClass("prev current--weight");
this.animating = false;
}, 600);
}
addListeners() {
const btnActiveClass = "active";
const prevSelector = ".slider-cards__btn-prev";
const nextSelector = ".slider-cards__btn-next";
const options = this.options;
const prevEl = options.prevEl
? options.prevEl
: this.$slider.find(prevSelector)[0];
const nextEl = options.nextEl
? options.nextEl
: this.$slider.find(nextSelector)[0];
$(prevEl)
.addClass(btnActiveClass)
.on("click", this.slideToPrev.bind(this));
$(nextEl)
.addClass(btnActiveClass)
.on("click", this.slideToNext.bind(this));
}
}
$(function () {
new SliderCards("#slider-cards");
});
0 комментариев