Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

embla-carousel

Package Overview
Dependencies
Maintainers
1
Versions
232
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

embla-carousel - npm Package Compare versions

Comparing version 2.0.3 to 2.1.0

lib/components/snapPosition.d.ts

2

lib/components/dragBehaviour.d.ts

@@ -14,3 +14,3 @@ import { Animation } from './animation';

dragFree: boolean;
groupSizes: number[];
snapSizes: number[];
pointer: Pointer;

@@ -17,0 +17,0 @@ location: Vector1D;

2

lib/components/infiniteShifter.d.ts
import { Vector1D } from './vector1d';
declare type Params = {
alignSizes: number[];
snapPositions: number[];
viewSize: number;

@@ -5,0 +5,0 @@ location: Vector1D;

1

lib/components/mover.d.ts

@@ -7,3 +7,2 @@ import { Direction } from './direction';

mass: number;
maxForce: number;
};

@@ -10,0 +9,0 @@ export declare type Mover = {

2

lib/components/options.d.ts
import { Alignments } from './alignSize';
export declare type Options = {
align: Alignments;
containScroll: boolean;
containerSelector: string;

@@ -17,2 +18,3 @@ dragFree: boolean;

align: string;
containScroll: boolean;
containerSelector: string;

@@ -19,0 +21,0 @@ dragFree: boolean;

7

lib/components/targetFinder.d.ts

@@ -0,1 +1,2 @@

import { Alignments } from './alignSize';
import { Counter } from './counter';

@@ -5,8 +6,8 @@ import { Limit } from './limit';

declare type Params = {
diffSizes: number[];
align: Alignments;
dragFree: boolean;
index: Counter;
loop: boolean;
groupSizes: number[];
groupPositions: number[];
snapSizes: number[];
snapPositions: number[];
contentSize: number;

@@ -13,0 +14,0 @@ limit: Limit;

1

lib/components/vector1d.d.ts

@@ -11,3 +11,2 @@ export declare type Vector1D = {

divide: (n: number) => Vector1D;
limit: (n: number) => Vector1D;
magnitude: () => number;

@@ -14,0 +13,0 @@ normalize: () => Vector1D;

512

lib/index.js

@@ -94,3 +94,3 @@ (function webpackUniversalModuleDefinition(root, factory) {

/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 4);
/******/ return __webpack_require__(__webpack_require__.s = 5);
/******/ })

@@ -168,7 +168,2 @@ /************************************************************************/

function limit(n) {
if (magnitude() > n) normalize().multiply(n);
return self;
}
var self = {

@@ -179,3 +174,2 @@ add: add,

get: get,
limit: limit,
magnitude: magnitude,

@@ -328,5 +322,63 @@ multiply: multiply,

module.exports = __webpack_require__(5);
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function Limit(params) {
var min = params.min,
max = params.max;
var loopLimits = {
max: min,
min: max
};
var constrainLimits = {
min: min,
max: max
};
function reachedMin(n) {
return n < min;
}
function reachedMax(n) {
return n > max;
}
function reachedAny(n) {
return reachedMin(n) || reachedMax(n);
}
function reachedWhich(n) {
var isMin = reachedMin(n) && 'min';
var isMax = reachedMax(n) && 'max';
return isMin || isMax || '';
}
function loop(n) {
var which = reachedWhich(n);
return which ? loopLimits[which] : n;
}
function constrain(n) {
var which = reachedWhich(n);
return which ? constrainLimits[which] : n;
}
var self = {
constrain: constrain,
loop: loop,
max: max,
min: min,
reachedAny: reachedAny,
reachedMax: reachedMax,
reachedMin: reachedMin
};
return Object.freeze(self);
}
exports.Limit = Limit;
/***/ }),

@@ -336,2 +388,9 @@ /* 5 */

module.exports = __webpack_require__(6);
/***/ }),
/* 6 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";

@@ -346,9 +405,9 @@

var engine_1 = __webpack_require__(6);
var engine_1 = __webpack_require__(7);
var eventDispatcher_1 = __webpack_require__(21);
var eventDispatcher_1 = __webpack_require__(22);
var eventStore_1 = __webpack_require__(3);
var options_1 = __webpack_require__(22);
var options_1 = __webpack_require__(23);

@@ -598,3 +657,3 @@ var utils_1 = __webpack_require__(2);

/***/ }),
/* 6 */
/* 7 */
/***/ (function(module, exports, __webpack_require__) {

@@ -609,19 +668,19 @@

var alignSize_1 = __webpack_require__(7);
var alignSize_1 = __webpack_require__(8);
var animation_1 = __webpack_require__(8);
var animation_1 = __webpack_require__(9);
var chunkSize_1 = __webpack_require__(9);
var chunkSize_1 = __webpack_require__(10);
var counter_1 = __webpack_require__(10);
var counter_1 = __webpack_require__(11);
var dragBehaviour_1 = __webpack_require__(11);
var dragBehaviour_1 = __webpack_require__(12);
var edgeGuard_1 = __webpack_require__(12);
var edgeGuard_1 = __webpack_require__(13);
var edgeLooper_1 = __webpack_require__(13);
var edgeLooper_1 = __webpack_require__(14);
var infiniteShifter_1 = __webpack_require__(14);
var infiniteShifter_1 = __webpack_require__(15);
var limit_1 = __webpack_require__(15);
var limit_1 = __webpack_require__(4);

@@ -632,8 +691,10 @@ var mover_1 = __webpack_require__(16);

var targetFinder_1 = __webpack_require__(18);
var snapPosition_1 = __webpack_require__(18);
var translate_1 = __webpack_require__(19);
var targetFinder_1 = __webpack_require__(19);
var traveller_1 = __webpack_require__(20);
var translate_1 = __webpack_require__(20);
var traveller_1 = __webpack_require__(21);
var utils_1 = __webpack_require__(2);

@@ -650,27 +711,26 @@

dragFree = options.dragFree,
slidesToScroll = options.slidesToScroll; // Index
slidesToScroll = options.slidesToScroll,
containScroll = options.containScroll; // Index
var indexMin = 0;
var indexMax = Math.ceil(slides.length / slidesToScroll) - 1;
var indexes = Object.keys(slides).map(Number);
var indexGroups = utils_1.groupNumbers(indexes, slidesToScroll);
var indexSpan = limit_1.Limit({
min: indexMin,
max: indexMax
});
var index = counter_1.Counter({
limit: limit_1.Limit({
max: indexMax,
min: 0
}),
loop: loop,
start: startIndex
limit: indexSpan,
start: startIndex,
loop: loop
});
var indexPrevious = index.clone(); // Measurements
var rootSize = utils_1.rectWidth(container);
var chunkSize = chunkSize_1.ChunkSize(rootSize);
var containerSize = utils_1.rectWidth(container);
var chunkSize = chunkSize_1.ChunkSize(containerSize);
var viewSize = chunkSize.root;
var alignSize = alignSize_1.AlignSize({
align: align,
viewSize: viewSize
});
var slideSizes = slides.map(utils_1.rectWidth).map(chunkSize.measure);
var groupedSizes = utils_1.groupNumbers(slideSizes, slidesToScroll);
var groupSizes = groupedSizes.map(function (g) {
var snapSizes = groupedSizes.map(function (g) {
return g.reduce(function (a, s) {

@@ -680,19 +740,22 @@ return a + s;

});
var alignSizes = groupSizes.map(alignSize.measure);
var contentSize = groupSizes.reduce(function (a, s) {
var contentSize = snapSizes.reduce(function (a, s) {
return a + s;
});
var diffSizes = groupSizes.map(function (size, i) {
var next = index.clone().set(i + 1);
return size + alignSizes[i] - alignSizes[next.get()];
var alignSize = alignSize_1.AlignSize({
align: align,
viewSize: viewSize
});
var groupPositions = groupSizes.map(function (s, i) {
var sizes = diffSizes.slice(0, i);
return sizes.reduce(function (a, d) {
return a - d;
}, alignSizes[0]);
var contain = !loop && containScroll;
var snapPosition = snapPosition_1.SnapPosition({
alignSize: alignSize,
contain: contain,
contentSize: contentSize,
index: index,
snapSizes: snapSizes,
viewSize: viewSize
});
var snapPositions = snapSizes.map(snapPosition.measure);
var loopSize = -contentSize + chunkSize.measure(1);
var max = groupPositions[0];
var min = loop ? max + loopSize : groupPositions[index.max];
var max = snapPositions[0];
var min = loop ? max + loopSize : snapPositions[index.max];
var limit = limit_1.Limit({

@@ -731,3 +794,3 @@ max: max,

var animation = animation_1.Animation(update);
var startLocation = groupPositions[index.get()];
var startLocation = snapPositions[index.get()];
var location = vector1d_1.Vector1D(startLocation);

@@ -737,5 +800,4 @@ var target = vector1d_1.Vector1D(startLocation);

location: location,
mass: 1,
maxForce: viewSize * 2,
speed: speed
speed: speed,
mass: 1
});

@@ -746,10 +808,10 @@ var travel = traveller_1.Traveller({

findTarget: targetFinder_1.TargetFinder({
align: align,
contentSize: contentSize,
diffSizes: diffSizes,
dragFree: dragFree,
groupPositions: groupPositions,
groupSizes: groupSizes,
index: index,
limit: limit,
loop: loop,
snapPositions: snapPositions,
snapSizes: snapSizes,
target: target

@@ -767,3 +829,2 @@ }),

events: events,
groupSizes: groupSizes,
index: index,

@@ -775,2 +836,3 @@ limit: limit,

pointer: pointer_1.Pointer(chunkSize),
snapSizes: snapSizes,
target: target,

@@ -801,6 +863,6 @@ travel: travel

shifter: infiniteShifter_1.InfiniteShifter({
alignSizes: alignSizes,
contentSize: contentSize,
location: location,
slideSizes: slideSizes,
snapPositions: snapPositions,
viewSize: viewSize

@@ -818,3 +880,3 @@ }),

/***/ }),
/* 7 */
/* 8 */
/***/ (function(module, exports, __webpack_require__) {

@@ -863,3 +925,3 @@

/***/ }),
/* 8 */
/* 9 */
/***/ (function(module, exports, __webpack_require__) {

@@ -908,3 +970,3 @@

/***/ }),
/* 9 */
/* 10 */
/***/ (function(module, exports, __webpack_require__) {

@@ -938,3 +1000,3 @@

/***/ }),
/* 10 */
/* 11 */
/***/ (function(module, exports, __webpack_require__) {

@@ -1006,3 +1068,3 @@

/***/ }),
/* 11 */
/* 12 */
/***/ (function(module, exports, __webpack_require__) {

@@ -1024,6 +1086,2 @@

function DragBehaviour(params) {
var element = params.element,
pointer = params.pointer,
location = params.location,
events = params.events;
var target = params.target,

@@ -1033,2 +1091,7 @@ mover = params.mover,

animation = params.animation;
var element = params.element,
pointer = params.pointer,
location = params.location,
events = params.events,
limit = params.limit;
var direction = pointer.direction;

@@ -1057,3 +1120,3 @@ var focusNodes = ['INPUT', 'SELECT', 'TEXTAREA'];

};
var dragForceThreshold = 4;
var dragThreshold = 4;
var state = {

@@ -1102,11 +1165,18 @@ isDown: false,

function allowedForce(force) {
var groupSizes = params.groupSizes,
function seekTargetBy(force) {
var travel = params.travel,
snapSizes = params.snapSizes,
index = params.index;
var forceAbs = Math.abs(force);
var halfGroup = groupSizes[index.get()] / 2;
var aboveThreshold = forceAbs > dragForceThreshold;
var belowHalfGroup = forceAbs < halfGroup;
var forceToNext = halfGroup * direction_1.Direction(force).get();
return !dragFree && aboveThreshold && belowHalfGroup ? forceToNext : force;
var halfSnap = snapSizes[index.get()] / 2;
var reachedLimit = limit.reachedAny(target.get() + force);
var seekNext = forceAbs > dragThreshold && forceAbs < halfSnap;
if (!dragFree && !reachedLimit && seekNext) {
var indexDiff = direction_1.Direction(force).get() * -1;
var next = index.clone().add(indexDiff);
travel.toIndex(next.get());
} else {
travel.toDistance(force);
}
}

@@ -1139,7 +1209,5 @@

if (state.preventScroll || state.isMouse) {
var limit = params.limit,
loop = params.loop;
var diff = pointer.move(evt);
var reachedAnyLimit = limit.reachedAny(location.get());
var resist = !loop && reachedAnyLimit ? 2 : 1;
var reachedLimit = limit.reachedAny(location.get());
var resist = !params.loop && reachedLimit ? 2 : 1;
target.addNumber(diff / resist);

@@ -1158,3 +1226,2 @@ evt.preventDefault();

function up() {
var travel = params.travel;
var force = pointer.up() * pointerForceBoost();

@@ -1169,3 +1236,3 @@ var diffToTarget = target.get() - dragStartLocation.get();

mover.useSpeed(movementSpeed());
travel.toDistance(allowedForce(force));
seekTargetBy(force);
events.dispatch('dragEnd');

@@ -1194,3 +1261,3 @@ }

/***/ }),
/* 12 */
/* 13 */
/***/ (function(module, exports, __webpack_require__) {

@@ -1247,3 +1314,3 @@

/***/ }),
/* 13 */
/* 14 */
/***/ (function(module, exports, __webpack_require__) {

@@ -1289,3 +1356,3 @@

/***/ }),
/* 14 */
/* 15 */
/***/ (function(module, exports, __webpack_require__) {

@@ -1306,3 +1373,3 @@

slideSizes = params.slideSizes,
alignSizes = params.alignSizes;
snapPositions = params.snapPositions;
var ascItems = Object.keys(slideSizes).map(Number);

@@ -1368,3 +1435,3 @@ var descItems = ascItems.slice().reverse();

function startPoints() {
var gap = alignSizes[0] - 1;
var gap = snapPositions[0] - 1;
var indexes = shiftItemsIn(gap, descItems);

@@ -1376,3 +1443,3 @@ var start = shiftStart(gap, indexes, 0);

function endPoints() {
var gap = viewSize - alignSizes[0] - 1;
var gap = viewSize - snapPositions[0] - 1;
var indexes = shiftItemsIn(gap, ascItems);

@@ -1408,67 +1475,2 @@ var start = shiftStart(contentSize, ascItems, -viewSize);

/***/ }),
/* 15 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function Limit(params) {
var min = params.min,
max = params.max;
var loopLimits = {
max: min,
min: max
};
var constrainLimits = {
min: min,
max: max
};
function reachedMin(n) {
return n < min;
}
function reachedMax(n) {
return n > max;
}
function reachedAny(n) {
return reachedMin(n) || reachedMax(n);
}
function reachedWhich(n) {
var isMin = reachedMin(n) && 'min';
var isMax = reachedMax(n) && 'max';
return isMin || isMax || '';
}
function loop(n) {
var which = reachedWhich(n);
return which ? loopLimits[which] : n;
}
function constrain(n) {
var which = reachedWhich(n);
return which ? constrainLimits[which] : n;
}
var self = {
constrain: constrain,
loop: loop,
max: max,
min: min,
reachedAny: reachedAny,
reachedMax: reachedMax,
reachedMin: reachedMin
};
return Object.freeze(self);
}
exports.Limit = Limit;
/***/ }),
/* 16 */

@@ -1493,4 +1495,3 @@ /***/ (function(module, exports, __webpack_require__) {

speed = params.speed,
mass = params.mass,
maxForce = params.maxForce;
mass = params.mass;
var velocity = vector1d_1.Vector1D(0);

@@ -1523,3 +1524,3 @@ var acceleration = vector1d_1.Vector1D(0);

direction.set(attraction);
attraction.normalize().multiply(m).subtract(velocity).limit(maxForce);
attraction.normalize().multiply(m).subtract(velocity);
applyForce(attraction);

@@ -1671,40 +1672,110 @@ return self;

var limit_1 = __webpack_require__(4);
function SnapPosition(params) {
var alignSize = params.alignSize,
contentSize = params.contentSize,
snapSizes = params.snapSizes,
viewSize = params.viewSize;
var alignSizes = snapSizes.map(alignSize.measure);
var contentFillsUpView = contentSize >= viewSize;
var betweenDistances = distancesBetweenSnaps();
var bounds = scrollBounds();
function distancesBetweenSnaps() {
return snapSizes.map(function (size, i) {
var next = params.index.clone().set(i + 1);
return size + alignSizes[i] - alignSizes[next.get()];
});
}
function snapPosition(index) {
var sizes = betweenDistances.slice(0, index);
return sizes.reduce(function (a, d) {
return a - d;
}, alignSizes[0]);
}
function scrollBounds() {
var indexMax = params.index.max;
var endGap = viewSize - snapSizes[indexMax];
var gapMinusAlign = endGap - alignSizes[indexMax];
var min = snapPosition(indexMax) + gapMinusAlign;
return limit_1.Limit({
min: min,
max: 0
});
}
function containScroll(position) {
if (contentFillsUpView) {
var min = bounds.min,
max = bounds.max;
if (position < min) return min;
if (position > max) return max;
return position;
}
return alignSize.measure(contentSize);
}
function measure(size, index) {
var position = snapPosition(index);
return params.contain ? containScroll(position) : position;
}
var self = {
measure: measure
};
return Object.freeze(self);
}
exports.SnapPosition = SnapPosition;
/***/ }),
/* 19 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function TargetFinder(params) {
var loop = params.loop,
groupPositions = params.groupPositions,
limit = params.limit,
snapPositions = params.snapPositions,
contentSize = params.contentSize;
var groupBounds = calculateGroupBounds();
var reachedMin = limit.reachedMin,
reachedMax = limit.reachedMax,
reachedAny = limit.reachedAny;
var snapBounds = calculateSnapBounds();
function calculateGroupBounds() {
var groupSizes = params.groupSizes;
var startAt = groupPositions[0] + groupSizes[0] / 2;
return groupSizes.map(function (size, index) {
var sizes = groupSizes.slice(0, index);
var start = sizes.reduce(function (a, i) {
return a - i;
}, startAt);
var end = start - size;
return {
end: end,
start: start
};
});
function calculateSnapBounds() {
var align = params.align,
snapSizes = params.snapSizes;
var counter = params.index.clone();
return snapSizes.reduce(function (bounds, size, i) {
var next = counter.set(i).add(align === 'end' ? 1 : 0);
var end = snapPositions[i] - snapSizes[next.get()] / 2;
var start = !i ? snapPositions[0] : bounds[i - 1].end;
return bounds.concat([{
start: start,
end: end
}]);
}, []);
}
function offsetToTargetGroup(target) {
function offsetToSnap(target) {
var distance = target.distance,
index = target.index;
var lastGroup = groupPositions[params.index.max];
var pastLastGroup = distance < lastGroup;
var addOffset = loop && pastLastGroup && index === 0;
var lastSnap = snapPositions[params.index.max];
var addOffset = loop && distance < lastSnap && index === 0;
var offset = addOffset ? distance + contentSize : distance;
return groupPositions[index] - offset;
return snapPositions[index] - offset;
}
function findTargetGroupAt(targetDistance) {
var _params$limit = params.limit,
reachedMin = _params$limit.reachedMin,
reachedMax = _params$limit.reachedMax;
var distance = targetDistance;
function findTargetSnapAt(distance) {
while (reachedMax(distance)) {

@@ -1718,3 +1789,3 @@ distance -= contentSize;

var index = groupBounds.reduce(function (a, b, i) {
var foundIndex = snapBounds.reduce(function (a, b, i) {
return distance < b.start && distance > b.end ? i : a;

@@ -1724,3 +1795,3 @@ }, 0);

distance: distance,
index: index
index: foundIndex
};

@@ -1734,34 +1805,23 @@ }

function byIndex(index, direction) {
var target = params.target.get();
var distanceToGroup = groupPositions[index] - target;
var targetVector = params.target.get();
var distanceToSnap = snapPositions[index] - targetVector;
var target = {
distance: distanceToSnap,
index: index
};
if (!loop) {
var distance = distanceToGroup;
return {
distance: distance,
index: index
};
} else {
var d1 = distanceToGroup;
var d2 = contentSize + distanceToGroup;
var d3 = distanceToGroup - contentSize;
if (loop) {
var d1 = distanceToSnap;
var d2 = contentSize + distanceToSnap;
var d3 = distanceToSnap - contentSize;
if (direction && params.index.max === 1) {
var shortest = minDistance(d1, direction === 1 ? d2 : d3);
var _distance = Math.abs(shortest) * direction;
return {
distance: _distance,
index: index
};
target.distance = Math.abs(shortest) * direction;
} else {
var _distance2 = minDistance(minDistance(d1, d2), d3);
return {
distance: _distance2,
index: index
};
target.distance = minDistance(minDistance(d1, d2), d3);
}
}
return target;
}

@@ -1772,9 +1832,6 @@

dragFree = params.dragFree,
limit = params.limit,
index = params.index;
var reachedAny = limit.reachedAny,
reachedMax = limit.reachedMax;
var targetDistance = target.get() + force;
var targetGroup = findTargetGroupAt(targetDistance);
var reachedEdge = !loop && reachedAny(targetDistance);
var distance = target.get() + force;
var targetSnap = findTargetSnapAt(distance);
var reachedEdge = !loop && reachedAny(distance);

@@ -1784,4 +1841,4 @@ if (reachedEdge || dragFree) {

max = index.max;
var edgeIndex = reachedMax(targetDistance) ? min : max;
var targetIndex = reachedEdge ? edgeIndex : targetGroup.index;
var edgeIndex = reachedMax(distance) ? min : max;
var targetIndex = reachedEdge ? edgeIndex : targetSnap.index;
return {

@@ -1792,7 +1849,11 @@ distance: force,

} else {
var offset = offsetToTargetGroup(targetGroup);
var snapDistance = targetDistance + offset - target.get();
var currentSnap = {
distance: distance,
index: index.get()
};
var snapPoint = force === 0 ? currentSnap : targetSnap;
var snapDistance = force + offsetToSnap(snapPoint);
return {
distance: snapDistance,
index: targetGroup.index
index: snapPoint.index
};

@@ -1812,3 +1873,3 @@ }

/***/ }),
/* 19 */
/* 20 */
/***/ (function(module, exports, __webpack_require__) {

@@ -1862,3 +1923,3 @@

/***/ }),
/* 20 */
/* 21 */
/***/ (function(module, exports, __webpack_require__) {

@@ -1941,3 +2002,3 @@

/***/ }),
/* 21 */
/* 22 */
/***/ (function(module, exports, __webpack_require__) {

@@ -1995,3 +2056,3 @@

/***/ }),
/* 22 */
/* 23 */
/***/ (function(module, exports, __webpack_require__) {

@@ -2007,2 +2068,3 @@

align: 'center',
containScroll: false,
containerSelector: '*',

@@ -2009,0 +2071,0 @@ dragFree: false,

5

package.json
{
"name": "embla-carousel",
"version": "2.0.3",
"version": "2.1.0",
"author": "David Cetinkaya",

@@ -10,3 +10,4 @@ "private": false,

"carousel",
"lightweight"
"lightweight",
"touch"
],

@@ -13,0 +14,0 @@ "license": "MIT",

54

README.md
<br />
<div align="center">
<p align="center">

@@ -12,2 +13,5 @@ <a href="https://davidcetinkaya.github.io/embla-carousel" target="_blank"><img width="80" height="80" src="https://rawgit.com/davidcetinkaya/embla-carousel/master/docs/assets/embla-logo.svg" alt="Embla Carousel">

</p>
<strong>
<pre>« <a href="https://davidcetinkaya.github.io/embla-carousel">DEMO PAGE</a> »</pre>
</strong>
<p align="center">

@@ -19,39 +23,17 @@ <a href="https://opensource.org/licenses/MIT" target="_blank"><img src="https://img.shields.io/badge/license-MIT-blue.svg"></a>

</p>
<br>
<p align="center">
<strong>
<a href="https://davidcetinkaya.github.io/embla-carousel" target="_blank">« View Demo »</a>
</strong>
<a href="https://github.com/davidcetinkaya/embla-carousel">
<img src="https://rawgit.com/davidcetinkaya/embla-carousel/master/docs/assets/javascript-logo.svg" height="50" alt="Embla Carousel JavaScript" />
</a> &nbsp;
<a href="https://github.com/davidcetinkaya/embla-carousel-react">
<img src="https://rawgit.com/davidcetinkaya/embla-carousel/master/docs/assets/react-logo.svg" height="50" alt="Embla Carousel React" />
</a>
</p>
</div>
<br>
<p align="center"><strong><code><a href="#options">OPTIONS</a></code></strong> — Explore options</p>
<p align="center"><strong><code><a href="#api">API</a></code></strong> — Explore the API</p>
<br>
## Table of contents
- [What's Embla?](#whats-embla)
- [Implementations](#implementations)
- [Features](#features)
- [Installation](#installation)
- [QuickStart](#quickstart)
- [Options](#options)
- [API](#api)
- [Browser Support](#browser-support)
- [Contribution](#contribution)
- [License](#license)
## What's Embla?
Embla’s purpose is to provide a low level carousel and allow developers to extend it by using its available methods. Extend it with some basic JavaScript and build awesome physics simulated carousels. It’s dependency free and 100% open source.
> Try it on the [Demo Page](https://davidcetinkaya.github.io/embla-carousel) or [CodeSandbox](https://codesandbox.io/s/embla-carousel-loop-false-oyols) ✨.
## Implementations
[<img src="https://rawgit.com/davidcetinkaya/embla-carousel/master/docs/assets/javascript-logo.svg" height="60" alt="Embla Carousel JavaScript" />](https://github.com/davidcetinkaya/embla-carousel) &nbsp; &nbsp; [<img src="https://rawgit.com/davidcetinkaya/embla-carousel/master/docs/assets/react-logo.svg" height="60" alt="Embla Carousel React" />](https://github.com/davidcetinkaya/embla-carousel-react)
## Features
- **`Responsive out of the box`** - Choose any **%**-based slide widths.
- **`Seamless loop effect`** - No pauses or previous/next button throttling.
- **`Hardware accelerated`** - Smooth physics simulated animations.
- **`Extensible rich API`** - Comes with a low-level API to control the carousel.
- **`Realistic drag handling`** - Authentic cross device drag behaviour.
## Installation

@@ -135,2 +117,3 @@

slidesToScroll: 1,
containScroll: false,
draggable: true,

@@ -156,2 +139,5 @@ dragFree: false,

**`containScroll`** (boolean)
Contains slides to the carousel viewport to prevent excessive scrolling at the beginning or the end. This has no effect if `loop: true`.
**`draggable`** (boolean)

@@ -158,0 +144,0 @@ Allow mouse and touch interactions to move the carousel.

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc