Cara menggunakan automatic slideshow css only

Question

The carousel component can be used to cycle through a set of elements using custom options, controls, and indicators based on the JavaScript object from Flowbite.

Nội dung chính Show

Default slider
JavaScript behaviour
Object parameters
HTML Markup
TypeScript

Default slider

The carousel component can be initialized by using the

2 data attribute and by applying a unique

3 attribute to the parent element.

4 to prevent the carousel sliding by default

5 to infinitely cycle through the items

You can add as many carousel items as you want, but make sure that you add the

6 data attribute to each of them and set a single item to active by applying the

7 value to the data attribute.

Use the

8 and the animation classes from Tailwind CSS to apply custom effects to the carousel items and don’t forget to set the

9 class by default to prevent flickering.

Toggle full view Toggle tablet view Toggle mobile view


    
    

         
        

            First Slide
            
        
        
        
            
        
        
        
            
        
    
    
    
        
        
        
    
    
    
        
            
            Previous
        
    
    
        
            
            Next

Expand code

Controls

Use the

0 and

1 data attribute to listen to click events which will trigger the slide event from the carousel component to each direction.

You can customize the control elements with the classes from Tailwind CSS anyhow you want.

Toggle full view Toggle tablet view Toggle mobile view

Expand code

Show the carousel indicators by adding the

2 to any number or style of indicator elements where the value equals the position of the slider element.

Toggle full view Toggle tablet view Toggle mobile view

Expand code

Animation

You can easily customize the duration and animation style of the carousel component by using the

8 and

4 utility classes from Tailwind CSS.

Toggle full view Toggle tablet view Toggle mobile view

Expand code

JavaScript behaviour

Use the Carousel class from Flowbite to create an object that you can use to apply custom styles, change the active slide item, set callback functions directly from JavaScript.

Object parameters

Pass the object parameters for the Carousel object to set the carousel items and options.

ParameterTypeRequiredDescription

5ArrayRequiredPass an array of carousel item objects including the position and the element.

6ObjectOptionalPass an object of options to set the interval, indicators, and callback functions.

Options

Use these options for the Carousel object to set the default position, interval, indicators, custom styles, and callback functions.

OptionTypeDescription

7IntegerSet the default active slider item based on its position (starts from [0-x]).

8IntegerSet the interval duration in miliseconds when the carousel is cycling.

9ArrayAn optional object of indicator elements and custom classes.

0FunctionSet a callback function when the next carousel item has been shown.

1FunctionSet a callback function when the previous carousel item has been shown.

2FunctionSet a callback function when the position of the carousel item has been changed.

Methods

Use the following methods on the Carousel object to programmatically manipulate the behaviour.

MethodDescription

3Use this method to go to the next slide of the carousel component.

4Use this method to go to the previous slide of the carousel component.

5Use this method to go the carousel with the position that you set as a parameter.

6Use this method to start cycling the carousel component based on the default interval duration.

7Use this method to stop the automatic cycling of the carousel component.

Example

Check out the following example to learn how to programmatically create a new Carousel object by passing the parameters, using the methods, and the callback functions.

const items = [
    {
        position: 0,
        el: document.getElementById('carousel-item-1')
    },
    {
        position: 1,
        el: document.getElementById('carousel-item-2')
    },
    {
        position: 2,
        el: document.getElementById('carousel-item-3')
    },
    {
        position: 3,
        el: document.getElementById('carousel-item-4')
    },
];

const options = {
    defaultPosition: 1,
    interval: 3000,
    
    indicators: {
        activeClasses: 'bg-white dark:bg-gray-800',
        inactiveClasses: 'bg-white/50 dark:bg-gray-800/50 hover:bg-white dark:hover:bg-gray-800',
        items: [
            {
                position: 0,
                el: document.getElementById('carousel-indicator-1')
            },
            {
                position: 1,
                el: document.getElementById('carousel-indicator-2')
            },
            {
                position: 2,
                el: document.getElementById('carousel-indicator-3')
            },
            {
                position: 3,
                el: document.getElementById('carousel-indicator-4')
            },
        ]
    },
    
    // callback functions
    onNext: () => {
        console.log('next slider item is shown');
    },
    onPrev: ( ) => {
        console.log('previous slider item is shown');
    },
    onChange: ( ) => {
        console.log('new slider item has been shown');
    }
};

Create a new carousel object using the options set above.

import { Carousel } from 'flowbite';

const carousel = new Carousel(items, options);

Use the

3 and

4 public methods on the carousel object to jump to the left or right carousel slide item based on the position of the current active item.

// goes to the next (right) slide
carousel.next()

// goes to the previous (left) slide
carousel.prev()

Use the

5 public method to jump to the carousel slide item with the specified position.

// jumps to the 3rd position (position starts from 0)
carousel.slideTo(2)

Use the

6 method to start an automated cycling where the duration is the miliseconds of time between each slide and the

7 method to clear the cycle event.

// starts or resumes the carousel cycling (automated sliding)
carousel.cycle()

// pauses the cycling (automated sliding)
carousel.pause()

HTML Markup

Here is an example of the HTML markup that you can use for the JavaScript example above. Please note that you should use the

9 class from Tailwind CSS to hide the carousel items by default.


    
    

         
        

            First Slide
            
        
        
        
            
        
        
        
            
        
        
        
            
        
    
    
    
        
        
        
        
    
    
    
        
            
            Previous
        
    
    
        
            
            Next

If you want to set trigger the next or previous slide item for the any button, just add some event listeners and call the

3 and

4 methods on the Carousel object.

0

TypeScript

If you’re using the TypeScript configuration from Flowbite then you can import the types for the Carousel class, parameters and its options.

kode css

Cara menggunakan automatic slideshow css only

Default slider

Controls

Animation

JavaScript behaviour

Object parameters

Options

Methods

Example

HTML Markup

TypeScript

Bài Viết Liên Quan

Có thể bạn quan tâm

Xem Nhiều

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội