Heart Slider

Purpose

Built for image-forward websites, HeartSlider is a simple and elegant slideshow that is designed for developers. It is adaptable, and customizable — with just enough styling to blend into any design system.

Getting Started

Make sure to include heartslider.min.js and heartslider.min.css files to your project. You can either download and add to them to your project’s directory, or use a CDN like jsDelivr.

<script defer src="https://cdn.jsdelivr.net/npm/heartslider@latest/dist/heartslider.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/heartslider@latest/dist/heartslider.min.css">

Then, add your markup.

<div class="heart-slideshow">
	<div class="heart-slide">
		<figure class="image-holder">
			<img 
				data-sizes="(min-aspect-ratio: 1/1) 100vw, 140vw" 
				data-src="img/image-01.jpg" 
				data-srcset="img/image-01.jpg 1x, img/image-01@2x 2x" 
				alt="" />
		</figure>
	</div>
	...
</div>

Finally, initiate the slideshow with a new HeartSlider class and set your options in your javascript file.

new HeartSlider({
	slideshow: ".heart-slideshow",
	slides: ".heart-slide",
	transition: 3000,
	delay: 1000,
});

Default Options

new HeartSlider({
	slideshow: ".heart-slideshow",
	slides: ".heart-slide",
	transition: 3000,
	manualTransition: 200,
	delay: 1000,
	loop: true,
	randomize: false,
	paused: false,
	effect: "fadeOut",
	buttons: false,
	swipe: true,
	clickToAdvance: false,
	pauseOnInactiveWindow: false,
	progressIndicators: {
		type: "dash", // or "dot"
		clickable: true,
		color: "#fff",
	},
});

Actions

Declare the slideshow as a constant, then run pause() or resume() to stop or start autoplay. Use the next(), prev(), and goTo(𝑥) methods to manually advance the slideshow. Use destroy() to remove everything and reset the DOM.

const myHomepageSlideshow = new HeartSlider();
					
// Pause
myHomepageSlideshow.pause();
// Resume
myHomepageSlideshow.resume();

// Next Slide
myHomepageSlideshow.next();
// Previous Slide
myHomepageSlideshow.prev();
// Jump To Certain Slide
myHomepageSlideshow.goTo(𝑥);

// DESTROY
myHomepageSlideshow.destroy();

Events

Currently, there are three callback events that you can use to hook into the slideshows. The transitionStart event will happen immediately as a new slide begins to transition in, the transitionEnd will happen at the end of that transition, and the firstImageLoad event will trigger when the image in the first slide finishes loading.

const myHomepageSlideshow = new HeartSlider();
					
// Events
myHomepageSlideshow.on("transitionStart", function (slideshow, slideshowElement, currentSlide) {
	/* Code that runs on the START of each new slide goes here */
	console.log({ slideshow }, { slideshowElement }, { currentSlide });
});
myHomepageSlideshow.on("transitionEnd", function (slideshow, slideshowElement, currentSlide) {
	/* Code that runs at the END of each transition goes here */
});
myHomepageSlideshow.on("firstImageLoad", function (slideshow, slideshowElement, currentSlide) {
	document.body.classList.add("remove-intro");
});