embla-carousel - npm Package Compare versions

Comparing version 0.9.4 to 1.0.0

lib/components/eventDispatcher.d.ts

 export declare type Callback = () => void;
-export declare type Event = 'init' | 'select' | 'dragStart' | 'dragEnd' | 'destroy';
+export declare type Event = 'init' | 'select' | 'dragStart' | 'dragEnd' | 'destroy' | 'resize';
 export declare type EventDispatcher = {
@@ -4,0 +4,0 @@ dispatch: (evt: Event) => EventDispatcher;

lib/components/options.d.ts

@@ -9,5 +9,5 @@ import { Alignments } from './alignSize';
     draggingClass: string;
-    groupSlides: number;
     loop: boolean;
     selectedClass: string;
+    slidesToScroll: number;
     speed: number;
@@ -23,5 +23,5 @@ startIndex: number;
     draggingClass: string;
-    groupSlides: number;
     loop: boolean;
     selectedClass: string;
+    slidesToScroll: number;
     speed: number;
@@ -28,0 +28,0 @@ startIndex: number;

lib/index.d.ts

@@ -13,6 +13,4 @@ import { Callback as EmblaCallback, Event as EmblaEvent } from './components/eventDispatcher';
     groupedIndexes: () => number[][];
-    hasNextIndex: () => boolean;
-    hasPreviousIndex: () => boolean;
-    isFirstIndex: () => boolean;
-    isLastIndex: () => boolean;
+    canScrollNext: () => boolean;
+    canScrollPrevious: () => boolean;
     on: (evt: EmblaEvent, cb: EmblaCallback) => void;
@@ -19,0 +17,0 @@ off: (evt: EmblaEvent, cb: EmblaCallback) => void;

lib/index.js

@@ -460,3 +460,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
     var focus = function focus() {
-      var groupIndex = Math.floor(index / options.groupSlides);
+      var groupIndex = Math.floor(index / options.slidesToScroll);
       var selectedGroup = index ? groupIndex : index;
@@ -512,2 +512,3 @@ sliderRoot.scrollLeft = 0;
       reActivate();
+      events.dispatch('resize');
     }
@@ -551,19 +552,13 @@ }
 
-  function isFirstIndex() {
-    return selectedIndex() === slider.index.min;
+  function canScrollPrevious() {
+    return !options.loop && selectedIndex() !== slider.index.min;
   }
 
-  function isLastIndex() {
-    return selectedIndex() === slider.index.max;
+  function canScrollNext() {
+    return !options.loop && selectedIndex() !== slider.index.max;
   }
 
-  function hasPreviousIndex() {
-    return !options.loop && !isFirstIndex();
-  }
-
-  function hasNextIndex() {
-    return !options.loop && !isLastIndex();
-  }
-
   var self = {
+    canScrollNext: canScrollNext,
+    canScrollPrevious: canScrollPrevious,
     changeOptions: changeOptions,
@@ -574,6 +569,2 @@ containerNode: containerNode,
     groupedIndexes: groupedIndexes,
-    hasNextIndex: hasNextIndex,
-    hasPreviousIndex: hasPreviousIndex,
-    isFirstIndex: isFirstIndex,
-    isLastIndex: isLastIndex,
     next: next,
@@ -645,7 +636,7 @@ off: off,
       dragFree = options.dragFree,
-      groupSlides = options.groupSlides; // Index
+      slidesToScroll = options.slidesToScroll; // Index
 
-  var indexMax = Math.ceil(slides.length / groupSlides) - 1;
+  var indexMax = Math.ceil(slides.length / slidesToScroll) - 1;
   var indexes = Object.keys(slides).map(Number);
-  var indexGroups = utils_1.groupNumbers(indexes, groupSlides);
+  var indexGroups = utils_1.groupNumbers(indexes, slidesToScroll);
   var index = counter_1.Counter({
@@ -668,3 +659,3 @@ limit: limit_1.Limit({
   var slideSizes = slides.map(utils_1.rectWidth).map(chunkSize.measure);
-  var groupedSizes = utils_1.groupNumbers(slideSizes, groupSlides);
+  var groupedSizes = utils_1.groupNumbers(slideSizes, slidesToScroll);
   var groupSizes = groupedSizes.map(function (g) {
@@ -1904,2 +1895,3 @@ return g.reduce(function (a, s) {
     init: [],
+    resize: [],
     select: []
@@ -1957,5 +1949,5 @@ };
   draggingClass: 'is-dragging',
-  groupSlides: 1,
   loop: false,
   selectedClass: 'is-selected',
+  slidesToScroll: 1,
   speed: 10,
@@ -1962,0 +1954,0 @@ startIndex: 0

package.json

 {
   "name": "embla-carousel",
-  "version": "0.9.4",
+  "version": "1.0.0",
   "author": "David Cetinkaya",
@@ -5,0 +5,0 @@ "private": false,

README.md

@@ -32,4 +32,5 @@ <br />
 - [API](#api)
+- [Browser Support](#browser-support)
 - [Implementations](#implementations)
-- [Contributing](#contributing)
+- [Contribution](#contribution)
 - [License](#license)
@@ -128,3 +129,3 @@
   containerSelector: '*',
-  groupSlides: 1,
+  slidesToScroll: 1,
   draggable: true,
@@ -147,4 +148,4 @@ dragFree: false,
 
-**`groupSlides`** (number)  
-Groups slides together into groups of given size and makes each group act as a single slide.
+**`slidesToScroll`** (number)  
+Scrolls past given number of slides whether scroll is triggered by **next()**, **previous** or **goTo()** methods as well as drag interactions.
 
@@ -170,3 +171,3 @@ **`draggable`** (boolean)
 **`draggableClass`** (string)  
-Classname that will be applied to the wrapper when the carousel mounts if `draggable` is `true`.
+Classname that will be applied to the wrapper when the carousel mounts if `draggable: true`.
 
@@ -196,30 +197,30 @@ **`draggingClass`** (string)
 **`next()`**  
-Moves to next item. If `loop` option is `false` and the carousel is on the last slide this method will do nothing.
+Moves to next item. If `loop: false` and the carousel is on the last slide this method will do nothing.
 
 **`previous()`**  
-Moves to previous item. If `loop` option is `false` and the carousel is on the first slide this method will do nothing.
+Moves to previous item. If `loop: false` and the carousel is on the first slide this method will do nothing.
 
 **`goTo(index: number)`**  
-Moves to item that matches passed index. If `loop` option is `true` the carousel will seek the closest way to the passed index.
+Moves to item that matches passed index. If `loop: true` the carousel will seek the closest way to the passed index.
 
 **`selectedIndex()`**  
-Returns the current selected index. Each index contains multiple slides if `groupSlides` options is more than `1`. If `groupSlides` is `1` each slide has its own index. Zero-based.
+Returns the current selected index. Each index contains multiple slides if `slidesToScroll > 1`. If `slidesToScroll: 1` each slide has its own index. Zero-based.
 
 **`previousIndex()`**  
-Returns the previous selected index. Each index contains multiple slides if `groupSlides` options is more than `1`. If `groupSlides` is `1` each slide has its own index. Zero-based.
+Returns the previous selected index. Each index contains multiple slides if `slidesToScroll: > 1`. If `slidesToScroll: 1` each slide has its own index. Zero-based.
 
 **`groupedIndexes()`**  
-Returns an array of all slide indexes grouped into arrays according to the `groupSlides` option, i.e. if the total number of slides is `4` and `groupSlides` is `2`, it will return `[[0, 1], [2, 3]]`.
+Returns an array of all slide indexes grouped into arrays according to the `slidesToScroll` option, i.e. if the total number of slides is `4` and `slidesToScroll: 2`, it will return `[[0, 1], [2, 3]]`.
 
-**`isFirstIndex()`**  
-Returns if selected index is first possible index. If `loop` option is `false`, it's not possible to slide to previous index from here.
+**`isStartScroll()`**  
+Returns if the carousel is at its start position, meaning if selected index is first possible index. If `loop: false` it's not possible to scroll to previous from here.
 
-**`isLastIndex()`**  
-Returns if selected index is last possible index. If `loop` option is `false`, it's not possible to slide to next index from here.
+**`isEndScroll()`**  
+Returns if the carousel is at its start position, meaning if selected index is last possible index. If `loop: false`, it's not possible to scroll to next from here.
 
-**`hasPreviousIndex()`**  
-Returns if it's possible to slide to previous index from here. Note that if `loop` option is `true` this will always return `true`.
+**`canScrollPrevious()`**  
+Returns if it's possible to scroll to previous from here. Note that if `loop: true` this will always return `true`.
 
-**`hasNextIndex()`**  
-Returns if it's possible to slide to next index from here. Note that if `loop` option is `true` this will always return `true`.
+**`canScrollNext()`**  
+Returns if it's possible to scroll to next from here. Note that if `loop: true` this will always return `true`.
 
@@ -232,7 +233,8 @@ **`changeOptions(options: options)`**
 
-- **`init`** - Triggers after the carousel has been initialised for the first time.
-- **`destroy`** - Triggers after the carousel has been destroyed.
-- **`select`** - Triggers when a new target slide has been selected.
-- **`dragStart`** - Triggers when carousel dragging begins.
-- **`dragEnd`** - Triggers when carousel dragging ends.
+- **`init`** - When the carousel has been initialised for the first time.
+- **`destroy`** - When the carousel has been destroyed.
+- **`select`** - When a new target slide has been selected.
+- **`resize`** - When window size changes.
+- **`dragStart`** - When carousel dragging begins.
+- **`dragEnd`** - When carousel dragging ends.
 
@@ -245,2 +247,9 @@ **`off(event: string, callback: function)`**
 
+## Browser Support
+
+- <img src="https://rawgit.com/davidcetinkaya/embla-carousel/master/docs/assets/ie-logo.svg" height="30" alt="Embla Carousel Internet Explorer support" /> IE 11
+- <img src="https://rawgit.com/davidcetinkaya/embla-carousel/master/docs/assets/chrome-logo.svg" height="30" alt="Embla Carousel Chrome support" />Latest 3 versions
+- <img src="https://rawgit.com/davidcetinkaya/embla-carousel/master/docs/assets/firefox-logo.svg" height="30" alt="Embla Carousel Firefox Suport" />Latest 3 versions
+- <img src="https://rawgit.com/davidcetinkaya/embla-carousel/master/docs/assets/firefox-logo.svg" height="30" alt="Embla Carousel Safari Suport" />Latest 3 versions
+
 ## Implementations
@@ -250,8 +259,9 @@
 
-## Contributing
+## Contribution
 
-Do you like this project and want to contribute to it? Fantastic! How do you want to contribute?
+Thank you to all the people who already contributed to Embla Carousel 🙏!
+Do you like this project and want to contribute to it?
 
-- **`I just want to support it`**: Thank you! Give it a **star** ⭐.
-- **`I want to spread the word`**: You're a star! Spread the word on **twitter** or similar 📣.
+- **`I just want to support it`**: Thank you! Give it a **star** maybe ⭐?
+- **`I want to spread the word`**: You're a star! Why not **twitter** or similar 📣?
 - **`I want to get my hands dirty`**: Awesome! Read the [contribution guidelines](https://github.com/davidcetinkaya/embla-carousel/blob/master/CONTRIBUTING.md) first 📋.
@@ -261,2 +271,2 @@
 
-Embla is [MIT licensed](./LICENSE).
+Embla is [MIT licensed](./LICENSE). Copyright © 2019-present, David Cetinkaya

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

69204

increased by0.96%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

264

increased by3.94%

Worsened metrics

Lines of code

1936

decreased by-0.41%

No dependency changes