# C2 Slider
### Overview
Dynamic horizontal slider that can hold slide items in it and transitions them based on the slide to show amount. Slide speed, indicators, overflow, and gutter width are key options. Default slides to show set will be used on desktop, tablet and mobile. You can also customize a tablet and mobile amount of slides to show if needed.

### Props
| Props					| Type		| Default	|
| --------------------- | --------- | --------- |
| slideTotal			| Number	| 0			|
| slideSpeed			| Number	| 300		|
| slidesToShow			| Number	| 1			|
| slidesToShowTablet	| Number	| null		|
| slidesToShowMobile	| Number	| null		|
| gutter				| Number	| 0			|
| showIndicators		| Boolean	| true		|
| showOverflow			| Boolean	| false		|
| showButtonNav			| Boolean	| 			|
| showNextPrevBtns		| Boolean	| false		|
| mediaTabletQuery		| Number	| 1023		|
| mediaMobileQuery		| Number	| 639		|
| nextBtnClasses		| Sting		| 			|
| prevBtnClasses		| Sting		| 			|
| navClasses			| Sting		| 			|
| indicatorClasses		| Sting		| 			|
| sliderWrapperClasses	| Sting		| 			|
| sliderClasses			| Sting		| 			|
| activeButtonClasses	| Sting		| 			|
| buttonClasses			| Sting		| 			|
| buttonNavWrapperClasses			| Sting		| 			|

### Slots
| Name				|
| ----------------- |
| slide				|
| prev-btn			|
| next-btn			|
| indicator-divider	|

### Code snippet
```
	<c2-slider
		v-if="sliderItems && sliderItems.length > 0"
		:slide-total="sliderItems.length"
		:slides-to-show="3"
		:slides-to-show-tablet="2"
		:slides-to-show-mobile="1"
		:slide-speed="500"
		:gutter="16"
		:media-tablet-query="1023"
		:media-mobile-query="639"
		:show-overflow="true"
		:show-next-prev-btns
		:show-indicators="true"
		:next-btn-classes="'w-12 h-12 flex items-center justify-center absolute right-0 top-1/2 transform -translate-y-1/2'"
		:prev-btn-classes="'w-12 h-12 flex items-center justify-center absolute left-0 top-1/2 transform -translate-y-1/2'"
		:nav-classes="'flex justify-end pt-4 relative'"
		:show-button-nav="true"
		:button-nav-wrapper-classes="'absolute left-1/2 top-1/2 transform -translate-y-1/2 -translate-x-1/2 flex align-center'"
		:button-classes="'h-1 w-9 rounded mx-0.5 bg-grey-300'"
		:active-button-classes="'bg-blue-900'"
		class="relative pl-20 pr-20"
	>
		<template v-slot:slide>
			<div
				v-for="(item, index) in sliderItems"
				:key="index"
			>
				{{ item.name }}
			</div>
		</template>

		<template v-slot:prev-btn>
			<span class="sr-only">
				Previous Slide
			</span>
			<span class="icon">
				prev
			</span>
		</template>

		<template v-slot:next-btn>
			<span class="sr-only">
				Next Slide
			</span>
			<span class="icon">
				next
			</span>
		</template>

		<template v-slot:indicator-divider>
			/
		</template>
	</c2-slider>
```