kotix-carousel-vue

Simple usage developed for vue ts apps via gsap

Parameters

• [x] Responsive
• [x] draggable
• [x] scroll
• [x] ease (https://gsap.com/docs/v3/Eases/)
• [x] ease duration
• [x] startFrom
• [x] autoPlay
• [x] autoPlayDuration

Getting started

Installation

First step is to install it using npm:

npm i kotix-carousel-vue

Usage

<script setup lang="ts">
   import { KotixSection, SectionItem } from 'kotix-carousel-vue';

</script>

<template>
   <KotixSection
            :scroll="true"      
            :controls="true"
            :autoPlay="true"
            :autoPlayDuration="1500"
   >
      <SectionItem>
         Your first section
      </SectionItem>
      <SectionItem>
         Your second section
      </SectionItem>
   </KotixSection>
</template>

<style>
   @import "kotix-carousel-vue";
   
</style>

Props

Name	Type	Required	Default	Description
draggable	Boolean	No	false	Determines whether the carousel can be dragged horizontally.
scroll	Boolean	No	true	Enables automatic scrolling through the carousel items.
ease	String	No	'power2.inOut'	The easing function used for animations for more info check out https://gsap.com/docs/v3/Eases/.
duration	Number	No	0.75	The duration of slide transitions in seconds.
startFrom	Number	No	0	The index of the item to start from initially.
controls	Boolean	No	false	Displays navigation controls (e.g., buttons) for the carousel.
autoPlay	Boolean	No	false	Automatically plays the carousel by scrolling through items at a specified interval.
autoPlayDuration	Number	No	3500	The duration in milliseconds between auto-play transitions.

KotixSection Component Defaults

This table lists the default values for each prop of the KotixSection component.

Name	Default Value
draggable	false
scroll	true
ease	'power2.inOut'
duration	0.75
startFrom	0
controls	false
autoPlay	false
autoPlayDuration	3500

Css customization

• Customization: Describes available CSS variables (--ktx-progress-color, --ktx-btn, --carousel-control-bg, --ktx-progress-bg) and how users can override them in their applications.