# midwest-slick-slides



<!-- Auto Generated Below -->


## Usage

### Coverflow

<midwest-slides id="example-slides" slides-per-view="3" effect="coverflow">
  <midwest-slide>
    <midwest-card>
      <copy-wrap>
        <h1 class="flex white items-center"><ion-icon name="rocket" class="db mr4 mt1"/>Hello!</h1>
      </copy-wrap>
    <midwest-starscape></midwest-starscape>
    </midwest-card>
  </midwest-slide>
  <midwest-slide>
    <midwest-card>
      <copy-wrap>
        <h1 class="flex white items-center"><midwest-avatar name="William M. Riley" shape="star" class="db mr4 mt1"></midwest-avatar>Hello!</h1>
      </copy-wrap>
    <midwest-starscape></midwest-starscape>
    </midwest-card>
  </midwest-slide>
  <midwest-slide>
    <midwest-card>
      <copy-wrap>
        <h1 class="flex white items-center"><ion-icon name="rocket" class="db mr4 mt1"/>Hello!</h1>
      </copy-wrap>
    <midwest-starscape></midwest-starscape>
    </midwest-card>
  </midwest-slide>
  <midwest-slide>
    <midwest-card>
      <copy-wrap>
        <h1 class="flex white items-center"><ion-icon name="rocket" class="db mr4 mt1"/>Hello!</h1>
      </copy-wrap>
    <midwest-starscape></midwest-starscape>
    </midwest-card>
  </midwest-slide>
  <midwest-slide>
    <midwest-card>
      <copy-wrap>
        <h1 class="flex white items-center"><ion-icon name="rocket" class="db mr4 mt1"/>Hello!</h1>
      </copy-wrap>
    <midwest-starscape></midwest-starscape>
    </midwest-card>
  </midwest-slide>
  <midwest-slide>
    <midwest-card>
      <copy-wrap>
        <h1 class="flex white items-center"><ion-icon name="rocket" class="db mr4 mt1"/>Hello!</h1>
      </copy-wrap>
    <midwest-starscape></midwest-starscape>
    </midwest-card>
  </midwest-slide>
</midwest-slides>


### Default

<midwest-slides id="example-slides">
  <midwest-slide>
    <midwest-card>
      <copy-wrap>
        <h1 class="flex white items-center"><ion-icon name="rocket" class="db mr4 mt1"/>Hello!</h1>
      </copy-wrap>
    <midwest-starscape></midwest-starscape>
    </midwest-card>
  </midwest-slide>
  <midwest-slide>
    <midwest-card>
      <copy-wrap>
        <h1 class="flex white items-center"><midwest-avatar name="William M. Riley" shape="star" class="db mr4 mt1"></midwest-avatar>Hello!</h1>
      </copy-wrap>
    <midwest-starscape></midwest-starscape>
    </midwest-card>
  </midwest-slide>
  <midwest-slide>
    <midwest-card>
      <copy-wrap>
        <h1 class="flex white items-center"><ion-icon name="rocket" class="db mr4 mt1"/>Hello!</h1>
      </copy-wrap>
    <midwest-starscape></midwest-starscape>
    </midwest-card>
  </midwest-slide>
  <midwest-slide>
    <midwest-card>
      <copy-wrap>
        <h1 class="flex white items-center"><ion-icon name="rocket" class="db mr4 mt1"/>Hello!</h1>
      </copy-wrap>
    <midwest-starscape></midwest-starscape>
    </midwest-card>
  </midwest-slide>
  <midwest-slide>
    <midwest-card>
      <copy-wrap>
        <h1 class="flex white items-center"><ion-icon name="rocket" class="db mr4 mt1"/>Hello!</h1>
      </copy-wrap>
    <midwest-starscape></midwest-starscape>
    </midwest-card>
  </midwest-slide>
  <midwest-slide>
    <midwest-card>
      <copy-wrap>
        <h1 class="flex white items-center"><ion-icon name="rocket" class="db mr4 mt1"/>Hello!</h1>
      </copy-wrap>
    <midwest-starscape></midwest-starscape>
    </midwest-card>
  </midwest-slide>
</midwest-slides>


### Multiple items

<midwest-slides id="example-slides" slides-per-view="3">
  <midwest-slide>
    <midwest-card>
      <copy-wrap>
        <h1 class="flex white items-center"><ion-icon name="rocket" class="db mr4 mt1"/>Hello!</h1>
      </copy-wrap>
    <midwest-starscape></midwest-starscape>
    </midwest-card>
  </midwest-slide>
  <midwest-slide>
    <midwest-card>
      <copy-wrap>
        <h1 class="flex white items-center"><midwest-avatar name="William M. Riley" shape="star" class="db mr4 mt1"></midwest-avatar>Hello!</h1>
      </copy-wrap>
    <midwest-starscape></midwest-starscape>
    </midwest-card>
  </midwest-slide>
  <midwest-slide>
    <midwest-card>
      <copy-wrap>
        <h1 class="flex white items-center"><ion-icon name="rocket" class="db mr4 mt1"/>Hello!</h1>
      </copy-wrap>
    <midwest-starscape></midwest-starscape>
    </midwest-card>
  </midwest-slide>
  <midwest-slide>
    <midwest-card>
      <copy-wrap>
        <h1 class="flex white items-center"><ion-icon name="rocket" class="db mr4 mt1"/>Hello!</h1>
      </copy-wrap>
    <midwest-starscape></midwest-starscape>
    </midwest-card>
  </midwest-slide>
  <midwest-slide>
    <midwest-card>
      <copy-wrap>
        <h1 class="flex white items-center"><ion-icon name="rocket" class="db mr4 mt1"/>Hello!</h1>
      </copy-wrap>
    <midwest-starscape></midwest-starscape>
    </midwest-card>
  </midwest-slide>
  <midwest-slide>
    <midwest-card>
      <copy-wrap>
        <h1 class="flex white items-center"><ion-icon name="rocket" class="db mr4 mt1"/>Hello!</h1>
      </copy-wrap>
    <midwest-starscape></midwest-starscape>
    </midwest-card>
  </midwest-slide>
</midwest-slides>


### Slide

<midwest-slides id="example-slides" effect="slide">
  <midwest-slide>
    <midwest-card>
      <copy-wrap>
        <h1 class="flex white items-center"><ion-icon name="rocket" class="db mr4 mt1"/>Hello!</h1>
      </copy-wrap>
    <midwest-starscape></midwest-starscape>
    </midwest-card>
  </midwest-slide>
  <midwest-slide>
    <midwest-card>
      <copy-wrap>
        <h1 class="flex white items-center"><midwest-avatar name="William M. Riley" shape="star" class="db mr4 mt1"></midwest-avatar>Hello!</h1>
      </copy-wrap>
    <midwest-starscape></midwest-starscape>
    </midwest-card>
  </midwest-slide>
  <midwest-slide>
    <midwest-card>
      <copy-wrap>
        <h1 class="flex white items-center"><ion-icon name="rocket" class="db mr4 mt1"/>Hello!</h1>
      </copy-wrap>
    <midwest-starscape></midwest-starscape>
    </midwest-card>
  </midwest-slide>
  <midwest-slide>
    <midwest-card>
      <copy-wrap>
        <h1 class="flex white items-center"><ion-icon name="rocket" class="db mr4 mt1"/>Hello!</h1>
      </copy-wrap>
    <midwest-starscape></midwest-starscape>
    </midwest-card>
  </midwest-slide>
  <midwest-slide>
    <midwest-card>
      <copy-wrap>
        <h1 class="flex white items-center"><ion-icon name="rocket" class="db mr4 mt1"/>Hello!</h1>
      </copy-wrap>
    <midwest-starscape></midwest-starscape>
    </midwest-card>
  </midwest-slide>
  <midwest-slide>
    <midwest-card>
      <copy-wrap>
        <h1 class="flex white items-center"><ion-icon name="rocket" class="db mr4 mt1"/>Hello!</h1>
      </copy-wrap>
    <midwest-starscape></midwest-starscape>
    </midwest-card>
  </midwest-slide>
</midwest-slides>



## Properties

| Property                | Attribute                 | Description                                                                                  | Type                                                   | Default        |
| ----------------------- | ------------------------- | -------------------------------------------------------------------------------------------- | ------------------------------------------------------ | -------------- |
| `autoHeight`            | `auto-height`             |                                                                                              | `boolean`                                              | `false`        |
| `autoplay`              | `autoplay`                |                                                                                              | `boolean`                                              | `false`        |
| `centeredSlides`        | `centered-slides`         |                                                                                              | `boolean`                                              | `true`         |
| `direction`             | `direction`               |                                                                                              | `"horizontal" \| "vertical"`                           | `"horizontal"` |
| `effect`                | `effect`                  |                                                                                              | `"coverflow" \| "cube" \| "fade" \| "flip" \| "slide"` | `"slide"`      |
| `initialSlide`          | `initial-slide`           |                                                                                              | `number`                                               | `0`            |
| `loop`                  | `loop`                    |                                                                                              | `boolean`                                              | `false`        |
| `nested`                | `nested`                  |                                                                                              | `boolean`                                              | `false`        |
| `options`               | `options`                 | Options to pass to the swiper instance. See http://idangero.us/swiper/api/ for valid options | `any`                                                  | `undefined`    |
| `pagination`            | `pagination`              |                                                                                              | `boolean`                                              | `false`        |
| `responsive`            | `responsive`              |                                                                                              | `boolean`                                              | `undefined`    |
| `slidesPerView`         | `slides-per-view`         |                                                                                              | `number`                                               | `3`            |
| `spaceBetween`          | `space-between`           |                                                                                              | `number`                                               | `30`           |
| `speed`                 | `speed`                   |                                                                                              | `number`                                               | `300`          |
| `watchSlidesProgress`   | `watch-slides-progress`   |                                                                                              | `boolean`                                              | `false`        |
| `watchSlidesVisibility` | `watch-slides-visibility` |                                                                                              | `boolean`                                              | `false`        |


## Events

| Event                     | Description                                         | Type               |
| ------------------------- | --------------------------------------------------- | ------------------ |
| `ionSlideDidChange`       | Emitted after the active slide has changed.         | `CustomEvent<any>` |
| `ionSlideDrag`            | Emitted when the slider is actively being moved.    | `CustomEvent<any>` |
| `ionSlideNextEnd`         | Emitted when the next slide has ended.              | `CustomEvent<any>` |
| `ionSlideNextStart`       | Emitted when the next slide has started.            | `CustomEvent<any>` |
| `ionSlidePrevEnd`         | Emitted when the previous slide has ended.          | `CustomEvent<any>` |
| `ionSlidePrevStart`       | Emitted when the previous slide has started.        | `CustomEvent<any>` |
| `ionSlideReachEnd`        | Emitted when the slider is at the last slide.       | `CustomEvent<any>` |
| `ionSlideReachStart`      | Emitted when the slider is at its initial position. | `CustomEvent<any>` |
| `ionSlideTouchEnd`        | Emitted when the user releases the touch.           | `CustomEvent<any>` |
| `ionSlideTouchStart`      | Emitted when the user first touches the slider.     | `CustomEvent<any>` |
| `ionSlideTransitionEnd`   | Emitted when the slide transition has ended.        | `CustomEvent<any>` |
| `ionSlideTransitionStart` | Emitted when the slide transition has started.      | `CustomEvent<any>` |
| `ionSlideWillChange`      | Emitted before the active slide has changed.        | `CustomEvent<any>` |


## Methods

### `getActiveIndex() => Promise<number>`

Get the index of the active slide.

#### Returns

Type: `Promise<number>`



### `getPreviousIndex() => Promise<number>`

Get the index of the previous slide.

#### Returns

Type: `Promise<number>`



### `instance() => Promise<any>`



#### Returns

Type: `Promise<any>`



### `isBeginning() => Promise<boolean>`

Get whether or not the current slide is the first slide.

#### Returns

Type: `Promise<boolean>`



### `isEnd() => Promise<boolean>`

Get whether or not the current slide is the last slide.

#### Returns

Type: `Promise<boolean>`



### `length() => Promise<number>`

Get the total number of slides.

#### Returns

Type: `Promise<number>`



### `lockSwipeToNext(shouldLockSwipeToNext: boolean) => Promise<any>`

Lock or unlock the ability to slide to the next slides.

#### Returns

Type: `Promise<any>`



### `lockSwipeToPrev(shouldLockSwipeToPrev: boolean) => Promise<any>`

Lock or unlock the ability to slide to the previous slides.

#### Returns

Type: `Promise<any>`



### `lockSwipes(shouldLockSwipes: boolean) => Promise<any>`

Lock or unlock the ability to slide to change slides.

#### Returns

Type: `Promise<any>`



### `slideNext(speed?: number, runCallbacks?: boolean) => Promise<void>`

Transition to the next slide.

#### Returns

Type: `Promise<void>`



### `slidePrev(speed?: number, runCallbacks?: boolean) => Promise<void>`

Transition to the previous slide.

#### Returns

Type: `Promise<void>`



### `slideTo(index: number, speed?: number, runCallbacks?: boolean) => Promise<void>`

Transition to the specified slide.

#### Returns

Type: `Promise<void>`



### `startAutoplay() => Promise<void>`

Start auto play.

#### Returns

Type: `Promise<void>`



### `stopAutoplay() => Promise<void>`

Stop auto play.

#### Returns

Type: `Promise<void>`



### `update() => Promise<void>`

Update the underlying slider implementation. Call this if you've added or removed
child slides.

#### Returns

Type: `Promise<void>`




----------------------------------------------

*Built with [StencilJS](https://stenciljs.com/)*