Scroll snap points carousel

Developer
Julien Dargelos
Size
3,524 Kb
Views
8,096
  1. Scroll snap points carousel Previews
  2. Scroll snap points carousel HTML Codes
  3. Scroll snap points carousel CSS Codes
  4. Scroll snap points carousel JS Codes

How do I make an scroll snap points carousel?

What is a scroll snap points carousel? How do you make a scroll snap points carousel? This script and codes were developed by Julien Dargelos on 29 November 2022, Tuesday.

Scroll snap points carousel Previews
IQ Test

Scroll snap points carousel - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Scroll snap points carousel</title> <meta name="viewport" content="width=device-width, shrink-to-fit=no, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="carousel"> <div class="carousel__wrapper"> <div class="carousel__item"> <img class="image" src="https://images.unsplash.com/photo-1423012373122-fff0a5d28cc9?dpr=1&auto=compress,format&fit=crop&w=376&h=251&q=80&cs=tinysrgb&crop="/> </div> <div class="carousel__item"> <img class="image" src="https://images.unsplash.com/photo-1435777940218-be0b632d06db?dpr=1&auto=compress,format&fit=crop&w=376&h=212&q=80&cs=tinysrgb&crop="/> </div> <div class="carousel__item"> <img class="image" src="https://images.unsplash.com/photo-1441794016917-7b6933969960?dpr=1&auto=compress,format&fit=crop&w=376&h=251&q=80&cs=tinysrgb&crop="/> </div> <div class="carousel__item"> <img class="image" src="https://images.unsplash.com/photo-1446776709462-d6b525c57bd3?dpr=1&auto=compress,format&fit=crop&w=376&h=251&q=80&cs=tinysrgb&crop="/> </div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Scroll snap points carousel - Script Codes CSS Codes

html, body { height: 100%;
}
body { margin: 20px; position: relative;
}
.carousel { width: 100%; height: 100%; top: 50%; left: 50%; max-width: 400px; max-height: 200px; overflow: scroll; border-radius: 20px; -webkit-scroll-snap-points-x: repeat(calc(100% + 20px)); -webkit-scroll-snap-type: mandatory; -webkit-overflow-scrolling: touch; position: relative; transform: translateZ(0) translate(-50%, -50%);
}
.carousel__wrapper { height: 100%; display: flex; transition: 0.5s;
}
.carousel__item { width: 100%; height: 100%; border-radius: 19px; flex-grow: 0; flex-shrink: 0; overflow: hidden; position: relative;
}
.carousel__item:not(:last-of-type) { margin-right: 20px;
}
.image { min-width: 100%; min-height: 100%; top: 50%; left: 50%; position: absolute; display: block; transform: translate(-50%, -50%);
}

Scroll snap points carousel - Script Codes JS Codes

var Carousel = function(element) {	var self = this; var interval = 2000; var auto = null;	this.element = element;	Object.defineProperties(this, { auto: {	get: function() {	return auto !== null; }, set: function(v) {	v = !!v;	if(v != this.auto) {	if(v) {	auto = setInterval(function() {	self.step(); }, this.interval); } else {	clearInterval(auto); auto = null; } } } }, interval: {	get: function() {	return interval; }, set: function(v) {	v = parseInt(v); if(typeof v === 'number') { var auto = this.auto; this.auto = false; interval = v; if(auto) this.auto = true; } } } }); this.auto = true; var wasAuto; var disableAuto = function() {	wasAuto = this.auto;	self.auto = false; }; var enableAuto = function() {	if(wasAuto) self.auto = true; }; this.element.addEventListener('mouseover',disableAuto); this.element.addEventListener('mouseout', enableAuto); this.element.addEventListener('touchstart', disableAuto); this.element.addEventListener('touchend', enableAuto); this.element.addEventListener('touchcancel', enableAuto); this.element.addEventListener('touchleave', enableAuto);
};
Carousel.prototype = {	margin: 20, duration: 500,	get items() {	return this.element.querySelectorAll('.carousel__item'); }, get wrapper() {	return this.element.querySelector('.carousel__wrapper'); },	get width() {	return this.element.offsetWidth; },	get scroll() {	return this.element.scrollLeft/(this.width+this.margin); }, set scroll(v) {	this.element.scrollLeft = v*(this.width+this.margin); }, get left() {	return this.wrapper.style.transform ? parseFloat(this.wrapper.style.transform.replace(/^translateX\(calc\(((?:\d*\.)\d+)%[^\)]+\)\)$/, '$1'))/100 : 0; }, set left(v) {	this.wrapper.style.transform = 'translateX(calc('+v*100+'% + '+v*this.margin+'px))'; }, get position() {	return this.scroll; }, set position(v) {	if(v < 0) v = 0; else if(v >= this.items.length) v = this.items.length - 1;	this.left = -(v - this.position); this.transition(function() {	this.left = 0; this.scroll = v; }); }, step: function(distance) {	distance = parseInt(distance);	if(typeof distance !== 'number' || isNaN(distance)) distance = 1; var position = this.position + distance; if(position < 0) position = this.items.length - 1; else if(position >= this.items.length) position = 0; this.position = position; }, transition: function(callback) {	var self = this; setTimeout(function() {	self.wrapper.style.transition = 'none'; setTimeout(function() {	callback.call(self); self.wrapper.style.transition = null; }, 1); }, this.duration); }
};
carousel = new Carousel(this.document.querySelector('.carousel'));
Scroll snap points carousel - Script Codes
Scroll snap points carousel - Script Codes
Home Page Home
Developer Julien Dargelos
Username juliendargelos
Uploaded November 29, 2022
Rating 3
Size 3,524 Kb
Views 8,096
Do you need developer help for Scroll snap points carousel?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Julien Dargelos (juliendargelos) Script Codes
Name
Vusic
Js-ScrollBar
SmartPass
Calculator
Tags Input
InfoGrid
Psychedelic Animation
Grapher
Watch
A Pen by Julien Dargelos
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!