Slider (Swiper)

Overview

The Slider component is based on Swiper. You configure everything in the component JS file: import needed modules, create slider instances, and enable/disable optional parts like pagination, scrollbar, breakpoints, autoplay, and effects.

Swiper documentation

Use official Swiper docs for all settings and modules: https://swiperjs.com/

Component location

Files are located in src/components/layout/slider. Main entry file: src/components/layout/slider/slider.js.

slider.js — Swiper import + init logic.
slider.scss — base Swiper styles (or optional bundle styles).
HTML snippet: swiper / swiperfull.

JavaScript setup

Below is the prepared file structure for Swiper initialization. Modules are imported from swiper/modules. Init runs only if [data-anim-slider] exists.

src/components/layout/slider/slider.js


/*
Documentation for working in the template:
Slider documentation: https://swiperjs.com/
Snippet (HTML): swiper
*/

// Import the Swiper slider from node_modules
// If needed, import additional slider modules by listing them in {} separated by commas
// Example: { Navigation, Autoplay }
import Swiper from 'swiper'
import { Navigation } from 'swiper/modules'
/*
Main slider modules:
Navigation, Pagination, Autoplay,
EffectFade, Lazy, Manipulation
See https://swiperjs.com/ for details
*/

// Swiper styles
// Import base styles
import './slider.scss'
// Full bundle of styles from node_modules
// import 'swiper/css/bundle';

// Initialize sliders
function initSliders() {
	// List of sliders
	// Check if there is a slider on the page
	if (document.querySelector('.swiper')) {
		// <- Specify the class of the needed slider
		// Create slider
		new Swiper('.swiper', {
			// <- Specify the class of the needed slider
			// Connect slider modules
			// for this specific case
			modules: [Navigation],
			observer: true,
			observeParents: true,
			slidesPerView: 1,
			spaceBetween: 0,
			// autoHeight: true,
			speed: 800,

			// touchRatio: 0,
			// simulateTouch: false,
			// loop: true,
			// preloadImages: false,
			// lazy: true,

			/*
			// Effects
			effect: 'fade',
			autoplay: {
				delay: 3000,
				disableOnInteraction: false,
			},
			*/

			// Pagination
			/*
			pagination: {
				el: '.swiper-pagination',
				clickable: true,
			},
			*/

			// Scrollbar
			/*
			scrollbar: {
				el: '.swiper-scrollbar',
				draggable: true,
			},
			*/

			// Prev/Next buttons
			navigation: {
				prevEl: '.swiper-button-prev',
				nextEl: '.swiper-button-next',
			},

			/*
			// Breakpoints
			breakpoints: {
				640: {
					slidesPerView: 1,
					spaceBetween: 0,
					autoHeight: true,
				},
				768: {
					slidesPerView: 2,
					spaceBetween: 20,
				},
				992: {
					slidesPerView: 3,
					spaceBetween: 20,
				},
				1268: {
					slidesPerView: 4,
					spaceBetween: 30,
				},
			},
			*/

			// Events
			on: {},
		})
	}
}

document.querySelector('[data-anim-slider]')
	? window.addEventListener('load', initSliders)
	: null

Tip

If you use multiple sliders on the same page, use unique selectors instead of .swiper (for example: .hero-slider, .reviews-slider) and separate controls inside each block.

HTML snippet (swiper)

Use the snippet swiper to generate the markup. The main wrapper has data-anim-slider and the Swiper root class swiper.

Slider — base markup


<!-- Slider wrapper -->
<div data-anim-slider class="block-name__slider swiper">
	<!-- Moving part of the slider -->
	<div class="block-name__wrapper swiper-wrapper">
		<!-- Slide -->
		<div class="block-name__slide swiper-slide"></div>
	</div>
	<!-- If pagination is needed -->
	<div class="swiper-pagination"></div>
	<!-- If navigation is needed (left/right) -->
	<button type="button" class="swiper-button-prev"></button>
	<button type="button" class="swiper-button-next"></button>
	<!-- If a scrollbar is needed -->
	<div class="swiper-scrollbar"></div>
</div>

Important

If you enable navigation in JS, make sure the buttons exist in HTML. Same for pagination and scrollbar — add the element and enable the config block in JS.

Notes & workflow

To enable more features (pagination/autoplay/lazy/effects), import modules from swiper/modules and add them to modules: [].
If you want “all-in-one” Swiper styles, uncomment import 'swiper/css/bundle'.
Init is attached on window.load only if [data-anim-slider] exists.

Download

Start using Swiper instantly with a ready component structure, modules setup, and markup snippets inside the template.

Download Animmaster Vite Template Save your time — start now