schorfes / caroucssel Goto Github PK

The parcel build for the gh-pages and demo pages are failing. The scripts are not executed and the carousel feature(s) are not initialized properly.

Applies for:

• https://schorfes.github.io/caroucssel/
• https://schorfes.github.io/caroucssel/demo/

Implement CSS, SASS and Demo using scroll-padding. Test if it works as expected. See more: https://css-tricks.com/almanac/properties/s/scroll-padding/

This library fails to recognize the elements inside of .scroller right when .scroller is a css grid.
The padding on the right side doesnt work aswell. I think it might be related to the grid-gap.

Here is an example: https://www.moccu.com/about/ (pagination is broken on tablet and padding on the right side is broken on some screensizes aswell)

An option to enable scroll by mouse dragging will be helpful for users without a vertical scroll wheel.

Disable only the first pagination button if multiple slides are shown at once.

The documentation for the option scrollbarsMaskClassName is missing. This should also add a "trouble shooting" section to the docs that explains the appearance of scrollbars depending on OS and OS setting (Example Mac OS X) and why the element that uses scrollbarsMaskClassName is needed.

I came across a situation where I needed an overlay within the .scroller container. This irritated the pagination, as it was counted as "content".

It would be useful to have the possiblity to define a selector that ignores items inside the .scroller container.

Instead to listen on window resizes it would be beneficial to use a ResizeObserver instead: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver

This would prevent to perform unnecessary update actions.

Instead of a heavy calculation of a scroll offset, we can use Use Element.scrollIntoView() instead.

Docs:

• https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

Examples:

• http://iamdustan.com/smoothscroll
• https://codepen.io/askd/pen/jZZEeG

I updated your lib to the latest version and now we have a glitchy behavior in our team slider:
https://www.moccu.com/about/

I'll provide you an example in a seperate repository, since i'll fix the issue on our live website very soon.

Currently the list of pages inside the pagination contains exactly the amount of entries. If there is only one page available, the list contains one entry. This might look strange on websites that uses for example dots for the pagination.

We should add an option to not render pagination if only one page is available.

The first parameter for the scroll hook contains an index property. This one is currently typed as number[] but should use the more specific type Index.

If a template function for buttons or paginations doesn't return an element this should be handled correctly and should not throw an error during rendering:

Example:
Initialize the carousel and test for the items length in the template function of the pagination:

const instance = new Carousel(target, {
  paginationTemplate: ({ items }) => {
    if (items.length <= 0) {
      return '';
    }

    return `<div class="pagination">...</div>`;
  },
});

Results in the following error when items.length = 0.

caroucssel.esm.js:375 Uncaught (in promise) TypeError: Cannot read property 'querySelectorAll' of null
    at Carousel._addPagination (caroucssel.esm.js:375)
    at new Carousel (caroucssel.esm.js:175)
    at Carousel.render (Carousel.js:56)

The carousel errors when there are no items available.

Add a "plugin" mechanism for a better tree shake ability. Create a core bundle and allow to add features. The basic features that can be added should be "buttons" and "pagination". This should reduce the core size drastically and the user can decide which feature to use using tree shaking. Examples:

import {Carousel, Buttons, Pagination} from 'caroucssel';

const carousel = new Carousel(el, {
  features: [
    new Buttons({ /* button options here */ }),
    new Pagination({ /* pagination options here */ }),
  ]
});

or based on requested features for example:

import {Carousel} from 'caroucssel';

const execute = async (withButtons, withPagination) => {
  const [Buttons, Pagination] = await Promise.all([
    withButtons && import('caroucssel/buttons'),
    withPagination && import('caroucssel/pagination'),
  ]);

  const carousel = new Carousel(el, {
    features: [
      Buttons && new Buttons({ /* button options here */ }),
      Pagination && new Pagination({ /* pagination options here */ }),
    ]
  });
};

Use requestIdleCallback instead of debounce. See: https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback