Carousel

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

Initialization

To initialise the carousel component you have to create a new instance of EZ.Carousel() and create a parent element for the carousel.

<!-- Create a parent element to append the carousel too -->
<div class="parentEl"></div>

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,
  }
);

<aside> 💡 TIP: Try it yourself in the Codepen.

</aside>

Have a look at the available Customisation options

Hero section

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

Initialization

To Initialise the hero section component you have to create a new instance of EZ.HeroCarousel() and create a parent element for the carousel.

<!-- Create a parent element to append the carousel too -->
<div class="parentEl"></div>

const heroCarousel = new EZ.HeroCarousel(
// put in the images you want inside the array
  [
    '<https://picsum.photos/id/141/900/500>',
    '<https://picsum.photos/id/1057/900/500>',
    '<https://picsum.photos/id/1063/900/500>',
  ],
// Add the headlines you want displayed
  ['Swipe down', 'click the dots', 'You got it'],
// Add links for the Call-to-Action button
  ['#', '#', '#'],
// Add text in the right side carousel
  [
    `"Lorem ipsum dolor sit amet."`,
    `"Lorem ipsum dolor sit amet."`,
    `"Lorem ipsum dolor sit amet."`,
  ],
// select the parent element you created
  document.querySelector('.parentEl'),
// customise the component with the options array, view methods bellow
    {
		cta: 'Learn more'
    pagination: true,
    speed: 0.5,
  }
);

Have a look at the available Customisation options