Fullpage.js

Простая и удобная в использовании библиотека, которая позволяет создавать полноэкранные прокручивающиеся веб-сайты (также известные как одностраничные веб-сайты или onepage-сайты) и добавлять слайдеры в разделы сайта.

Установка Fullpage.js

Установите с помощью npm npm install fullpage.js Не забудь прописать <link rel="stylesheet" type="text/css" href="fullpage.css" /> <script src="vendors/easings.min.js"></script> <script type="text/javascript" src="fullpage.js"></script> Разделы должны быть заключены во внешнюю оболочку (в данном случае <div id="fullpage">). Внешняя оболочка не может быть элементом body.

<div id="fullpage">
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
</div>

Чтобы создать горизонтальный слайдер в разделе, каждый слайд по умолчанию будет определяться элементом, содержащим slide класс:

<div class="section">
	<div class="slide"> Slide 1 </div>
	<div class="slide"> Slide 2 </div>
	<div class="slide"> Slide 3 </div>
	<div class="slide"> Slide 4 </div>
</div>

Полностью рабочий пример HTML-структуры можно увидеть тут

Автор Репозитория GitHub Репозиторий

Другие библиотеки JavaScript

FullPage.js Vue 3
Carouse.js Simple
slider.js Tiny slide.js Flicking.js Splide.js Glide.js Nouislider.js Slick.js Swiper.js Animating
buttons.js Add to
calendar.js Cloud sync
button.js Vue promise btn.js Vue toast notification.js Toastr.js Notify.js Vanilla
toasts.js Notyf.js React
hot toast.js React
toastify.js Sweetalert2.js Notie.js Accordion.js