d-carousel

This is a carousel plugin based off of the g-carousel that is shown in google search results.

You are able to scroll the x-axis with mouse wheel (if you can scroll sideways with yours), by touch and with the buttons

The carousel will work fine without the javascript if you do not need the buttons

Demo

Setup

NPM

npm install d-carousel

Quick Setup

Add the javascript onto your page

<script src="dist/js/d-carousel.min.js"></script>

Add the required CSS

.d-carousel,.d-carousel *{-webkit-box-sizing:border-box;box-sizing:border-box}.d-carousel{position:relative;overflow-y:hidden}.d-carousel__outer{overflow-x:hidden;overflow-y:hidden;-webkit-overflow-scrolling:touch;position:relative;white-space:nowrap;margin-bottom:-1.5rem}.d-carousel__outer::-webkit-scrollbar{display:none}.d-carousel__inner{padding:1rem 0;display:inline-block}.d-carousel__ul{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0 0 1.5rem;padding:0}.d-carousel__item{display:block;padding:0 .5rem}.d-carousel__next,.d-carousel__prev{position:absolute;top:50%;cursor:pointer;display:block;background:rgba(255,255,255,0.5);border:0;border-radius:50%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:2.5rem;height:2.5rem;z-index:2}.d-carousel__next svg,.d-carousel__prev svg{width:1.5rem;height:1.5rem}.d-carousel__next.disabled,.d-carousel__prev.disabled{opacity:0;pointer-events:none}.d-carousel__next{right:.5rem;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.d-carousel__prev{left:.5rem;-webkit-transform:translateY(-50%) rotate(-180deg);transform:translateY(-50%) rotate(-180deg)}.d-carousel.init .d-carousel__next,.d-carousel.init .d-carousel__prev{-webkit-transition:opacity .5s ease-in-out;transition:opacity .5s ease-in-out}@supports(color:#fff){.d-carousel__outer{overflow-x:auto}}

Add the required HTML for the carousel and replace ${ITEM} with whatever you want to populate the carousel with. Note each <li> is a different item and each item MUST have the same width

<div class="d-carousel">
  <div class="d-carousel__outer">
    <div class="d-carousel__inner">
      <div>
        <ul class="d-carousel__ul">
          <li class="d-carousel__item">${ITEM}</li>
          <li class="d-carousel__item">${ITEM}</li>
          <li class="d-carousel__item">${ITEM}</li>
        </ul>
      </div>
    </div>
  </div>
  <button class="d-carousel__prev">
    <svg focusable="false" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path></svg>
  </button>
  <button class="d-carousel__next">
    <svg focusable="false" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path></svg>
  </button>
</div>

Optional - Set the item widths. Note all items MUST be the same width

.d-carousel__item {
  width: 150px;
}

Add the following javascript

  dCarousel(document.querySelector('.d-carousel'));

Build Tools

The dCarousel script can also be used with build tools by doing the following

import dCarousel from 'd-carousel';

Options

| Option | Type | Default | Description | | ------ | ---- | ------- | ----------- | | paddingLeft | Boolean | false | If there is any padding set on .d-carousel__outer then this needs to be set to true | | outerSelector | String | .d-carousel__outer | The selector used for the outer element | | innerSelector | String | .d-carousel__inner | The selector used for the inner element | | itemsSelector | String | .d-carousel__item | The selector used for the item elements | | nextSelector | String | .d-carousel__next | The selector used for the next button element | | prevSelector | String | .d-carousel__prev | The selector used for the prev button element | | easing | Array | [0.42,0,0.58,1] | The easing used when scrolling from the next or prev element click. See this for common easings values. Default is ease-in-out| | delta | Function, returns Number | () => 8 | Returns the number of pixels an item can be offscreen and still count as within view | | duration | Function, returns Number | () => 500 | Returns the number of milliseconds that the scroll animation should take when next or prev element has been clicked. See usage below |

Usage

All arguments are accessible from the first parameter which is an object

duration option

| Arg Name | Description | | -------- | ----------- | | itemWidth | The current width of the items elements | | containerWidth | The current width of the carousel element | | diff | The number of pixels that will be scrolled |

Methods

Methods are accessible from the returned object of the dCarousel function.

| Methods Name | Description | | ------------ | ----------- | | getItemsShowing | Returns the indexes of elements that are showing, in an array | | forceRefresh | Will force refresh the carousel, so all calculations will be remade. This is called on window resize event anyway | | destroy | Removed event listeners and restores the carousel markup to how it was before it was initialised. |

Events

Arguments are available from event.detail in the callback;

| Event Name | Args | Description | | ---------- | ---- | ----------- | | dCarousel:scroll | scrollLeft - The scrollLeft value of the outer element | This event is fired after the carousel has been scrolled and any nessecary calculations have taken place. |

Hide buttons on mobile/tablet

A possible solution to this would be to add the below to the page. Although this is only a suggestion and hasn't been tested across browsers

<script>
if('orientation' in window && 'ontouchstart' in document.documentElement) document.documentElement.className += ' d-carousel-no-buttons';
</script>
<style>
.d-carousel-no-buttons .d-carousel__prev
.d-carousel-no-buttons .d-carousel__next {
  display: none !important;
}
</style>

Browser Support

d-carousel will work on IE10+ with the polyfills below. However on browsers that do not support @supports css rule x-axis scrolling is disabled, so you will have to use the buttons on these browsers. This is due to wanting to disable x-axis scrolling in IE10 and IE11 in the CSS.

Polyfills

• Array.from
• Object.assign
• Custom Event