Демо:
https://codepen.io/ildar-meyker/pen/OJdQZxE
Плагины:
Подключение:
//
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>Разметка:
//
<section class="events js-slider-root">
<div class="events__inner">
<div class="page__center">
<div class="events__header">
<h2 class="page__h2 events__h1">Мероприятия</h2>
<nav class="nav-arrows">
<button class="nav-arrows__item js-slider-prev">
<svg class="icon nav-arrows__icon flip-x">
<use
xlink:href="img/icons/general/sprite.svg#arrow-right"
></use>
</svg>
</button>
<button class="nav-arrows__item js-slider-next">
<svg class="icon nav-arrows__icon">
<use
xlink:href="img/icons/general/sprite.svg#arrow-right"
></use>
</svg>
</button>
</nav>
</div>
<div class="slider-events">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<article class="card-events">
<div
class="card-events__image"
style="
background-image: url(https://loremflickr.com/500/600/industrial?random=1);
"
></div>
<div
class="card-events__hide js-set-height"
>
<div>
<time
datetime="2023-10-16"
class="card-events__date"
>16 октября 18:00</time
>
<nav class="card-events__tags">
<ul>
<li>
<a href="#"
>Абитуриентам</a
>
</li>
<li>
<a href="#"
>Институт
теплоэнергетики</a
>
</li>
</ul>
</nav>
</div>
</div>
<h2 class="card-events__h1">
Конкурс «Пятьдесят лучших инновационных
идей для Республики Татарстан» – 2023
</h2>
<a href="#" class="card-events__btn-apply">
Участвовать
</a>
</article>
</div>
<div class="swiper-slide">
<article class="card-events">
<div
class="card-events__image"
style="
background-image: url(https://loremflickr.com/500/600/industrial?random=2);
"
></div>
<div
class="card-events__hide js-set-height"
>
<div>
<time
datetime="2023-10-16"
class="card-events__date"
>19 октября 14:00</time
>
<nav class="card-events__tags">
<ul>
<li>
<a href="#"
>Студентам</a
>
</li>
<li>
<a href="#"
>Институт
теплоэнергетики</a
>
</li>
<li>
<a href="#"
>Аудитория B-503</a
>
</li>
</ul>
</nav>
</div>
</div>
<h2 class="card-events__h1">
Студенты ИЭЭ смогут пообщаться с
работодателем
</h2>
<a href="#" class="card-events__btn-apply">
Участвовать
</a>
</article>
</div>
<div class="swiper-slide">
<article class="card-events">
<div
class="card-events__image"
style="
background-image: url(https://loremflickr.com/500/600/industrial?random=3);
"
></div>
<div
class="card-events__hide js-set-height"
>
<div>
<time
datetime="2023-10-16"
class="card-events__date"
>16 октября 18:00</time
>
<nav class="card-events__tags">
<ul>
<li>
<a href="#"
>Абитуриентам</a
>
</li>
<li>
<a href="#"
>Институт
теплоэнергетики</a
>
</li>
</ul>
</nav>
</div>
</div>
<h2 class="card-events__h1">
Международный турнир по волейболу на
призы Раиса Татарстана
</h2>
<a href="#" class="card-events__btn-apply">
Участвовать
</a>
</article>
</div>
<div class="swiper-slide">
<article class="card-events">
<div
class="card-events__image"
style="
background-image: url(https://loremflickr.com/500/600/industrial?random=1);
"
></div>
<div
class="card-events__hide js-set-height"
>
<div>
<time
datetime="2023-10-16"
class="card-events__date"
>16 октября 18:00</time
>
<nav class="card-events__tags">
<ul>
<li>
<a href="#"
>Абитуриентам</a
>
</li>
<li>
<a href="#"
>Институт
теплоэнергетики</a
>
</li>
</ul>
</nav>
</div>
</div>
<h2 class="card-events__h1">
Конкурс «Пятьдесят лучших инновационных
идей для Республики Татарстан» – 2023
</h2>
<a href="#" class="card-events__btn-apply">
Участвовать
</a>
</article>
</div>
<div class="swiper-slide">
<article class="card-events">
<div
class="card-events__image"
style="
background-image: url(https://loremflickr.com/500/600/industrial?random=2);
"
></div>
<div
class="card-events__hide js-set-height"
>
<div>
<time
datetime="2023-10-16"
class="card-events__date"
>19 октября 14:00</time
>
<nav class="card-events__tags">
<ul>
<li>
<a href="#"
>Студентам</a
>
</li>
<li>
<a href="#"
>Институт
теплоэнергетики</a
>
</li>
<li>
<a href="#"
>Аудитория B-503</a
>
</li>
</ul>
</nav>
</div>
</div>
<h2 class="card-events__h1">
Студенты ИЭЭ смогут пообщаться с
работодателем
</h2>
<a href="#" class="card-events__btn-apply">
Участвовать
</a>
</article>
</div>
<div class="swiper-slide">
<article class="card-events">
<div
class="card-events__image"
style="
background-image: url(https://loremflickr.com/500/600/industrial?random=3);
"
></div>
<div
class="card-events__hide js-set-height"
>
<div>
<time
datetime="2023-10-16"
class="card-events__date"
>16 октября 18:00</time
>
<nav class="card-events__tags">
<ul>
<li>
<a href="#"
>Абитуриентам</a
>
</li>
<li>
<a href="#"
>Институт
теплоэнергетики</a
>
</li>
</ul>
</nav>
</div>
</div>
<h2 class="card-events__h1">
Международный турнир по волейболу на
призы Раиса Татарстана
</h2>
<a href="#" class="card-events__btn-apply">
Участвовать
</a>
</article>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="page__gap"></div>
<a href="#" class="btn-all w-100">
<span class="btn-all__text">Все мероприятия</span>
<span class="btn-all__text">Все мероприятия</span>
</a>
</section>Стили:
//Инициализация:
// sliderEvents.js
$(function () {
$(".slider-events").each(function () {
const $root = $(this).closest(".js-slider-root");
const swiper = new Swiper($(this).find(".swiper")[0], {
slidesPerView: 3,
navigation: {
nextEl: $root.find(".js-slider-next")[0],
prevEl: $root.find(".js-slider-prev")[0],
},
});
});
});
// setHeight.js
import { throttle } from "throttle-debounce";
let $collection = null;
function setHeight() {
$collection.each(function () {
const height = $(this).children().height();
$(this).height(height);
});
}
$(function () {
$collection = $(".js-set-height");
setHeight();
$(window).on(
"resize",
throttle(500, () => {
setHeight();
})
);
});
0 комментариев