Index

Native Carousel

A carousel component which uses the native scroll snapping functionality with enhancements and customisation. It is lightweight and accessible, with vertical, auto height, tabs, lightbox, layout options, RTL support and no dependencies. Announcement.

How to use

Get the n-carousel NPM module and either add n-carousel.js and n-carousel.scss to your project
or use n-carousel.min.js and n-carousel.min.css on your page.

Code

<link rel="styleSheet" href="n-carousel.min.css">
<script src="n-carousel.min.js" type="module"></script>

Optional preload script at the top to avoid flashing when an initial slide is defaulted by URI hash

<script src="n-carousel-preload.min.js"></script>
<div class="n-carousel">
  <ul class="n-carousel__content">
  	<li>One</li>
  	<li>Two</li>
  	<li>Three</li>
  </ul>
  <div class="n-carousel__previous">
  	<button><span>Previous</span></button>
  </div>
  <div class="n-carousel__next">
  	<button><span>Next</span></button>
  </div>
</div>

Theme

.n-carousel {
  --nui-control-bg: darkorchid;
  --nui-control-active-bg: darkorchid;
  --nui-control-highlight: darkblue;
  --nui-control-color: #a5f9a5;
  --nui-control-active-color: #a5f9a5;
  --nui-carousel-bg: black;
  --nui-carousel-color: white;
}

Slide duration

<div class="n-carousel" data-duration=".5">

Dynamic initialization

nCarouselInit()

Source

					npm i --save-dev n-carousel
GitHub

Changelog

  • 1.1 Endless option, anchors support, tabbing support
  • 1.0 Initial release

Developed by Radoslav Sharapanov since 2020.

This site does not track you.

Demo content source: Wikipedia, personal photo archive.

Buy me a beer.

Index

Code

<div class="n-carousel">
  <ul class="n-carousel__content">
	<li>One</li>
	<li>Two</li>
	<li>Three</li>
  </ul>
  <div class="n-carousel__previous">
	<button><span>Previous</span></button>
  </div>
  <div class="n-carousel__next">
	<button><span>Next</span></button>
  </div>
  <div class="n-carousel__index">
	<button><span>1</span></button>
	<button><span>2</span></button>
	<button><span>3</span></button>
  </div>
</div>

Endless

Code

<div class="n-carousel">
  <ul class="n-carousel__content">
	<li>One</li>
	<li>Two</li>
	<li>Three</li>
  </ul>
  <div class="n-carousel__previous">
	<button><span>Previous</span></button>
  </div>
  <div class="n-carousel__next">
	<button><span>Next</span></button>
  </div>
  <div class="n-carousel__index">
	<button><span>1</span></button>
	<button><span>2</span></button>
	<button><span>3</span></button>
  </div>
</div>
Anchor link to previous slide

Auto height

Code

<div class="n-carousel n-carousel--auto-height">
	<ul class="n-carousel__content">
		<li>One</li>
		<li>Two</li>
		<li>Three</li>
	</ul>
	<div class="n-carousel__previous">
		<button><span>Previous</span></button>
	</div>
	<div class="n-carousel__next">
		<button><span>Next</span></button>
	</div>
</div>

Auto slide

Code

<div class="n-carousel n-carousel--auto-slide">
	<ul class="n-carousel__content">
		<li>One</li>
		<li>Two</li>
		<li>Three</li>
	</ul>
	<div class="n-carousel__previous">
		<button><span>Previous</span></button>
	</div>
	<div class="n-carousel__next">
		<button><span>Next</span></button>
	</div>
</div>

Slide interval

<div class="n-carousel n-carousel--auto-slide" data-interval="4">

Peeking

Code

<div class="n-carousel">
	<ul class="n-carousel__content" style="--peek: 12ch">
		<li>One</li>
		<li>Two</li>
		<li>Three</li>
	</ul>
	<div class="n-carousel__previous">
		<button><span>Previous</span></button>
	</div>
	<div class="n-carousel__next">
		<button><span>Next</span></button>
	</div>
</div>

Outside controls

Code

<div class="n-carousel n-carousel--controls-outside">
	<ul class="n-carousel__content">
		<li>One</li>
		<li>Two</li>
		<li>Three</li>
	</ul>
	<div class="n-carousel__previous">
		<button><span>Previous</span></button>
	</div>
	<div class="n-carousel__next">
		<button><span>Next</span></button>
	</div>
</div>

Detached controls

Carousel here

For tabs, add the class to the controls instead of the carousel: .n-carousel__index.n-carousel--tabs.

Code

<span class="n-carousel__previous" data-for="carousel-detached">
	<button><span>Previous</span></button>
</span>

<span class="n-carousel__next" data-for="carousel-detached">
	<button><span>Next</span></button>
</span>

<div class="n-carousel__index" data-for="carousel-detached">
	<button><span>1</span></button>
	<button><span>2</span></button>
	<button><span>3</span></button>
</div>

...

<div class="n-carousel" id="carousel-detached">
	<ul class="n-carousel__content">
		<li>One</li>
		<li>Two</li>
		<li>Three</li>
	</ul>
</div>

Right to left

  • Jellyfish

    عروس دریایی

    چتر دریایی و ژله های دریایی نام های غیررسمی متفاوتی است که به فاز مدوزا برخی از اعضای ژلاتینی موجود در زیر پناهگاه Medusozoa ، بخش عمده ای از پناهگاه Cnidaria داده می شود. چتر دریایی عمدتاً حیوانات دریایی شنای آزاد با زنگوله هایی به شکل چتر و شاخک های دنباله دار است ، هرچند تعداد کمی از آنها به جای تحرک بودن توسط ساقه ها در کف دریا لنگر می اندازند. زنگ می تواند برای تأمین نیروی محرکه برای جابجایی بسیار کارآمد ، ضربان بگیرد. شاخک ها به سلول های گزنده مجهز شده اند و ممکن است برای گرفتن طعمه و دفاع در برابر شکارچیان استفاده شوند. چتر دریایی یک چرخه زندگی پیچیده دارد. مدوزا به طور معمول مرحله جنسی است که لارو پلانا تولید می کند که به طور گسترده پراکنده می شود و قبل از بلوغ جنسی وارد یک مرحله پولیپ بی تحرک می شود.

  • لاکپشت دریایی

    لاک پشت های دریایی (خانواده فوق العاده Chelonioidea) ، که گاهی اوقات لاک پشت های دریایی نیز نامیده می شوند ، خزندگان از راسته Testudines و از زیرمجموعه Cryptodira هستند. هفت گونه لاک پشت دریایی شامل لاک پشت دریایی سبز ، لاک پشت دریایی لاگر سر ، لاک پشت دریایی کمپ ، لاک پشت دریایی زیتون ، لاک پشت دریایی شاهین ، لاک پشت دریایی تخت و لاک پشت دریایی چرمی است.

    Sea turtle
  • Dolphin

    دلفین

    دلفین نام رایجی از پستانداران آبزی در زیر مرز Cetacea است. اصطلاح دلفین معمولاً به خانواده های موجود Delphinidae (دلفین های اقیانوسی) ، Platanistidae (دلفین های رودخانه هند) ، Iniidae (دلفین های رودخانه جهان جدید) و Pontoporiidae (دلفین های شور) و لیپوتیداهای منقرض شده (Baiji یا رودخانه چین) اشاره دارد. دلفین). 40 گونه موجود به نام دلفین وجود دارد.

Code

<div class="n-carousel n-carousel--rtl">
	<ul class="n-carousel__content">
		<li>One</li>
		<li>Two</li>
		<li>Three</li>
	</ul>
	<div class="n-carousel__previous">
		<button><span>Previous</span></button>
	</div>
	<div class="n-carousel__next">
		<button><span>Next</span></button>
	</div>
</div>

The RTL class isn't necessary if the carousel is inside an RTL element.

Tabs

Code

<div class="n-carousel n-carousel--tabs">
	<ul class="n-carousel__content">
		<li>One</li>
		<li>Two</li>
		<li>Three</li>
	</ul>
	<div class="n-carousel__index">
		<button><span>Tab 1</span></button>
		<button><span>Tab 2</span></button>
		<button><span>Tab 3</span></button>
	</div>
</div>

Inline lightbox

Thumbnail
  • Demo Image 1
    Kaohsiung, Taiwan
  • Demo Image 2
    Bastia, Corsica
  • Demo Image 2
    Financial District, Manhattan
  • Demo Image 2
    Smaller image
  • YouTube embed

Any indexed carousel can be inline, not just lightbox.

Code

<div class="n-carousel n-carousel--lightbox n-carousel--inline n-carousel--thumbnails">
  <ul class="n-carousel__content">
	<li>
	  <figure>
		<picture>
		  <img width="3840" height="2560" src="demo/DSC01832.jpg" alt="Demo Image 1" loading="lazy" />
		</picture>
	  <figcaption>Kaohsiung, Taiwan</figcaption>
	  </figure>
	</li>
	...
  </ul>
  <div class="n-carousel__previous">
	<button><span>Previous</span></button>
  </div>
  <div class="n-carousel__next">
	<button><span>Next</span></button>
  </div>
  <div class="n-carousel__index">
	<button><img></button>
	<button><span>Tab 2</span></button>
  </div>
  <div class="n-carousel__full-screen">
	<button><span>Toggle full screen</span></button>
  </div>
  <div class="n-carousel__close">
	<button><span>Close modal window</span></button>
  </div>
</div>

Vertical

Code

--max-height: h; // default 75vh
<div class="n-carousel n-carousel--vertical">
  <ul class="n-carousel__content">
	<li>One</li>
	<li>Two</li>
	<li>Three</li>
  </ul>
  <div class="n-carousel__previous">
	<button><span>Previous</span></button>
  </div>
  <div class="n-carousel__next">
	<button><span>Next</span></button>
  </div>
  <div class="n-carousel__index">
	<button><span>1</span></button>
	<button><span>2</span></button>
	<button><span>3</span></button>
  </div>
</div>

Vertical auto height

Code

<div class="n-carousel n-carousel--vertical n-carousel--auto-height">
  <ul class="n-carousel__content">
	<li>One</li>
	<li>Two</li>
	<li>Three</li>
  </ul>
  <div class="n-carousel__previous">
	<button><span>Previous</span></button>
  </div>
  <div class="n-carousel__next">
	<button><span>Next</span></button>
  </div>
  <div class="n-carousel__index">
	<button><span>1</span></button>
	<button><span>2</span></button>
	<button><span>3</span></button>
  </div>
</div>