Fancyapps carousel react problem

[akifaykan]

https://fancyapps.com/docs/ui/carousel/react

Hello there. I have a list of ul/li tags. Can I help you return this list as carousel?

[fancyapps]

Hi,

Can you make your question more clear? You have a HTML element with some content that you want to make to work as Carousel?

Then why don't you simply import Carousel like this:

import { Carousel } from "YOUR_PATH_TO/carousel.esm.js";

and then

const instance = new Carousel (YOUR_HTML_ELEMENT, YOUR_OPTIONS);

Anyway, please, create some code when asking questions, use any Playground you prefer, for example, https://codesandbox.io/

[fancyapps]

Actually, I still do not understand your issue/question. What is the problem with this sample code? https://fancyapps.com/docs/ui/carousel/react/

[akifaykan]

My code

import { IconLeft } from '../icons/IconLeft';
import { IconRight } from '../icons/IconRight';
import React, { useState } from 'react';
import Fancybox from './Fancybox';
import { Carousel } from "@fancyapps/ui/dist/carousel.esm.js";

export const Slider = () => {
    const slideItems = [
        {
            id: 1,
            bigImg: 'https://lipsum.app/id/36/1024x768',
            smallImg: 'https://lipsum.app/id/36/200x150',
        },
        {
            id: 2,
            bigImg: 'https://lipsum.app/id/35/1024x768',
            smallImg: 'https://lipsum.app/id/35/200x150',
        },
        {
            id: 3,
            bigImg: 'https://lipsum.app/id/34/1024x768',
            smallImg: 'https://lipsum.app/id/34/200x150',
        },
        {
            id: 4,
            bigImg: 'https://lipsum.app/id/33/1024x768',
            smallImg: 'https://lipsum.app/id/33/200x150',
        },
    ];

    const [activeClass, setActiveClass] = useState(1);

    const smallItemClick = (e) => {
        setActiveClass(e);
    };

    const leftClick = () => {
        slideSettings(activeClass - 1);
    };

    const rightClick = () => {
        slideSettings(activeClass + 1);
    };

    const slideSettings = (e) => {
        setActiveClass(e);
        if (e > slideItems.length) {
            setActiveClass(1);
        }
        if (e < 1) {
            setActiveClass(slideItems.length);
        }
    };

    return (
        <section className="section__slider h-screen grid items-center justify-center bg-gray-800 text-white">
            <div className="container mx-auto">
                <div className="slider__wrapper inline-block relative">
                    <div className="slider__arrows absolute flex items-center right-0 gap-1">
                        <a className="cursor-pointer p-2 bg-gray-600 hover:bg-gray-900 transition-colors text-white mt-2" onClick={leftClick}>
                            <IconLeft />
                        </a>
                        <a className="cursor-pointer p-2 bg-gray-600 hover:bg-gray-900 transition-colors text-white ml-1 mt-2 mr-2" onClick={rightClick}>
                            <IconRight />
                        </a>
                    </div>
                    <Fancybox options={{ zoomFriction: 0.25 }}>
                        <ul className="slider__big">
                            {slideItems.map((item) => {
                                return (
                                    <li key={item.id} className={`slider__big-item w-600 h-450 ${activeClass === item.id ? 'show' : 'hidden'}`}>
                                        <a data-fancybox="gallery" href={item.bigImg}>
                                            <img className="w-full object-cover" src={item.bigImg} alt={`slider ${item.id}`} />
                                        </a>
                                    </li>
                                );
                            })}
                        </ul>
                    </Fancybox>
                    {/* I want to make the bur area in the form of carousel */}
                    <ul className="slider__small w-600 flex flex-wrap">
                        {slideItems.map((item) => {
                            return (
                                <li key={item.id} className={`slider__small-item w-150 ${activeClass === item.id ? 'active' : 'deactive'}`}>
                                    <img className="w-full object-cover" src={item.smallImg} alt={`Slider ${item.id}`} onClick={() => smallItemClick(item.id)} />
                                </li>
                            );
                        })}
                    </ul>
                    {/* end carousel */}
                </div>
            </div>
        </section>
    );
};

[akifaykan]

{/* I want to make the bur area in the form of carousel */}
{/* end carousel */}

I try to do this part carousel.

[fancyapps]

Then it would be smth like this - https://codesandbox.io/s/carousel-react-demo-forked-c8l4k?file=/src/carousel.js

import React, { useRef, useEffect } from "react";
import { Carousel as NativeCarousel } from "@fancyapps/ui/src/Carousel/Carousel.js";

import "@fancyapps/ui/dist/carousel.css";

function ReactCarousel(props) {
  const wrapper = useRef(null);

  useEffect(() => {
    const opts = props.options || {};
    const instance = new NativeCarousel(wrapper.current, opts);

    return () => {
      instance.destroy();
    };
  });

  return (
    <div className={`carousel ${props.class || ""}`} ref={wrapper}>
      {props.children}
    </div>
  );
}

export default ReactCarousel;

and then use like this:

<ReactCarousel class="slider__small w-600 flex flex-wrap">
        {slideItems.map((item) => {
          return (
            <li
              key={item.id}
              className={`carousel__slide slider__small-item w-150`}
            >
              <img
                className="w-full object-cover"
                src={item.smallImg}
                alt={`Slider ${item.id}`}
              />
            </li>
          );
        })}
      </ReactCarousel>

[akifaykan]

Jānis you are great! Thank you. I've got a better result now.

[akifaykan]

[fancyapps]

What do you mean by "How do I determine". This is the same variable as a few lines above - reference to the Carousel instance. You just have to figure out how to pass the variable.