1---
2category: Utilities
3---
4 
5# useCycleList
6 
7Cycle through a list of items.
8 
9<CourseLink href="https://vueschool.io/lessons/create-an-image-carousel-with-vueuse?friend=vueuse">Learn how to use useCycleList to create an image carousel with this FREE video lesson from Vue School!</CourseLink>
10 
11## Usage
12 
13```ts
14import { useCycleList } from '@vueuse/core'
15 
16const { state, next, prev, go } = useCycleList([
17  'Dog',
18  'Cat',
19  'Lizard',
20  'Shark',
21  'Whale',
22  'Dolphin',
23  'Octopus',
24  'Seal',
25])
26 
27console.log(state.value) // 'Dog'
28 
29prev()
30 
31console.log(state.value) // 'Seal'
32 
33go(3)
34 
35console.log(state.value) // 'Shark'
36```
37 
38## Type Declarations
39 
40```ts
41export interface UseCycleListOptions<T> {
42  /**
43   * The initial value of the state.
44   * A ref can be provided to reuse.
45   */
46  initialValue?: MaybeRef<T>
47  /**
48   * The default index when
49   */
50  fallbackIndex?: number
51  /**
52   * Custom function to get the index of the current value.
53   */
54  getIndexOf?: (value: T, list: T[]) => number
55}
56/**
57 * Cycle through a list of items
58 *
59 * @see https://vueuse.org/useCycleList
60 */
61export declare function useCycleList<T>(
62  list: MaybeRefOrGetter<T[]>,
63  options?: UseCycleListOptions<T>,
64): UseCycleListReturn<T>
65export interface UseCycleListReturn<T> {
66  state: ShallowRef<T>
67  index: WritableComputedRef<number>
68  next: (n?: number) => T
69  prev: (n?: number) => T
70  /**
71   * Go to a specific index
72   */
73  go: (i: number) => T
74}
75```
76