Options object

The options object is an optional parameter you can pass when calling a new component function. Have a look at the list below to see the available component properties you can customise.

const easyCarousel = new EZ.Carousel(
// put in the images you want inside the array
  [
			'<https://picsum.photos/500/300?random=1>',
			'<https://picsum.photos/500/300?random=2>',
			'<https://picsum.photos/500/300?random=3>',
			'<https://picsum.photos/500/300?random=4>',
			'<https://picsum.photos/500/300?random=5>',
  ],
// select the parent element you created
  document.querySelector('.parentEl'),
// customise the component with the options array, view methods bellow
  {
    overflow: true,
    pagination: true,
    navigation: false,
  }
);

Common options

dragResist: accepts integer value in the range of 0.0 - 1 . Applies continuous resistance to an element when dragged.

easeVal: the drag animations ease profile. Accepts GSAP's easing functions.

animationSpeed: sets the animation's duration measured in seconds. Default value is 0.5 .

easeVal2: ease profile for the feedback animations. Accepts GSAP's easing functions.

pagination: true/false value. If set to false it will disable the pagination for the given carousel.

Hero section options

cta: Call-to-Action button text. Accepts a string value.

backgroundColor: sets the background colour of the right side container. Accepts a string value.

backgroundColor2: sets the background colour of the right side container. Accepts a string value.

Carousel options

overflow: true/false value. If set to true is will show previous and upcoming slides.

navigation: true/false value. If set to true it will create navigation arrows the user can interact with.

<aside> 💡 TIP: try it out for yourself in the codepen.

</aside>

https://codepen.io/marin0ff/pen/gOwVPxO