Support for doubles in responsive

[Netail]

Hi, awesome stuff you got there! I would love to have support for doubles (per .25 => 0.25 0.5 0.75) So you can create something like this: When currently trying, the slider doesn't move at all. Thanks! :D

[maxmarinich]

Hi, @Netail! Doubles is not supporting and won't be. Use stage padding for this:

import React, { useState, useEffect, useRef } from 'react';
import AliceCarousel from 'react-alice-carousel';
import 'react-alice-carousel/lib/alice-carousel.css';

const items = [
    <div className="item" data-value="1">1</div>,
    <div className="item" data-value="2">2</div>,
    <div className="item" data-value="3">3</div>,
    <div className="item" data-value="4">4</div>,
    <div className="item" data-value="5">5</div>,
];

const Carousel = () => {
    const percent = 0.3;
    const section = useRef(null);
    const [padding, setPadding] = useState(0);

    const syncState = () => {
        const { current } = section;
        if (current) {
            setPadding(current.offsetWidth * percent);
        }
    };

    useEffect(syncState, []);

    return (
        <div ref={section}>
            <AliceCarousel
                infinite
                mouseTracking
                items={items} 
                paddingRight={padding} 
                onResized={syncState} 
            />
        </div>
    );
   };

Result:

[Netail]

Annoying for responsiveness tho :(