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.

React: this is a vanilla JS component. In React you render the HTML structure and call window.nCarouselInit() after render (and after you add/remove slides). See the React demo at demo/react/index.html.

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

// Initialize all carousels in the document
window.nCarouselInit()

// Or initialize carousels within a specific container
window.nCarouselInit(containerElement)

Auto slide interval

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

CSS Variables

.n-carousel__content {
  --peek: 12ch; /* Peeking amount */
}

.n-carousel {
  --max-height: 75vh; /* Max height for vertical carousel */
  --nui-border-radius: 0; /* Border radius for controls */
}

.n-carousel--aspect {
  --ratio: 16 / 9; /* Aspect ratio for lightbox */
}

picture {
  --placeholder: url(image.jpg); /* Low-res placeholder */
}

Source

					npm i --save-dev n-carousel
GitHub

Changelog

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
  • Kaohsiung, Taiwan
    Kaohsiung, Taiwan
  • Bastia, Corsica
    Bastia, Corsica
  • Financial District, Manhattan
    Financial District, Manhattan
  • Shrunk photo
    Shrunk photo
  • Native Carousel video demonstration. Captions are enabled by default. Use YouTube's caption button to toggle or adjust caption settings.

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="Kaohsiung, Taiwan (photo)" 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 src="demo/DSC01832.jpg" alt="Kaohsiung, Taiwan thumbnail" /></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>