Feature request : Carousel

[Nzent]

Mantine is beautiful 😍 modern UI library
It would be better if it's have a Carousel/Slide show component (feature request)
with horizontal and vertical nav 😎
Eg:

1. https://ant.design/components/carousel/#header
2. https://getuikit.com/docs/slideshow

[rtivital]

Hi @Nzent, thanks for feedback, we will be adding carousel in one of 3.x releases. Can you also share features that are important for you in Carousel component?

[Shibly-Noman]

@rtivital
Mantine is awesome. I just found out it recently one of fireship.io's video.
One thing I just want to add with @Nzent that,
Using Owl or Slick carousel with react is real pain. Owl carousel still has dependency with jQuery and both are real hard to customize.
One feature is really important to me (and I think most other front-end'ers) that dynamically call API on next/previous navigation. To be more specific Carousel with Dynamic Pagination.

[ajnart]

Hi @Nzent, thanks for feedback, we will be adding carousel in one of 3.x releases. Can you also share features that are important for you in Carousel component?

Any updates on ETA for a carousel component ?

[rtivital]

No, we've changed the plans, Carousel is not the priority.

[Nzent]

@rtivital

1. Switch slides with arrow navigation (Left, Right)
2. Slides direction (Verticle, Horizontal)
3. Image thumb nav like eBay items slider
4. Dots indicator
5. Slide transition animations (fade, slide)
6. Slide interval
7. Slides autoplay
8. Looping slides

[itsmichaeldiego]

How are we looking into the Carousel component? Would love to use mantine's!!

[jordanpinski]

+1 would love to use mantine's carousel. Hoping this can be added back into the roadmap.

[giffordgshane]

+1 would love to see this added to mantine's arsenal.

[alexandraj777]

+1 For a mantine carousel!

[Nzent]

@rtivital thank you very much for adding this feature to the Mantine library💖 it's a very useful component 🔥😍😍

[ajnart]

Mark the discussion as solved :)

[webdiller]

How can I change current slide with API?

[sandromileno]

Is there a way to control the navigation via methods?
like this:
https://ant.design/components/carousel/#header

[rtivital]

https://www.embla-carousel.com/api/methods/

[MadaShindeInai]

How can i implement autoplay opportunity with Carousel?

[aarav-classiebit]

Which version of embla-autoplay plugin are you using?

[SaiSugeethKamineni]

I had the same issue. Upon checking package.json, I discovered that the latest embla-carousel-autoplay 8.0.0-rc05 was installed instead of the stable 7.1.0 version. Downgrading it to the stable version fixed the issue.

[AshutoshDash1999]

This worked. Make sure to use npm i after changing the version and restart the server.

[AC-Agiir]

Hello, I'm working on a React-Typescript project, and I have a type error when I'm passing [autoplay.current] in props plugins of Carousel, just like the documentation :

Type 'AutoplayType' is not assignable to type 'CreatePluginType<LoosePluginType, {}>'.

Here is my component MyCarousel.tsx :

import React, {useRef} from "react";
import Autoplay from 'embla-carousel-autoplay';
import { Carousel } from '@mantine/carousel';

type Props = {}

export const MyCarousel: React.FC<Props> = () => {
    const autoplay = useRef(Autoplay({ delay: 2000 }));

    return (
            <Carousel
                mx="auto"
                my="md"
                height={300}
                withIndicators
                plugins={[autoplay.current]}
                onMouseEnter={autoplay.current.stop}
                onMouseLeave={autoplay.current.reset}
            >
                {/* ...slides */}
            </Carousel>
    )
}

My dependencies in package.json :

"dependencies": {
	"@mantine/carousel": "^6.0.16",
	"@mantine/core": "^6.0.16",
	"@mantine/form": "^6.0.16",
	"@mantine/hooks": "^6.0.16",
	"@mantine/styles": "^6.0.16",
	"@tabler/icons-react": "^2.24.0",
	"clay": "^2.24.1",
	"embla-carousel-autoplay": "^7.1.0",
	"liferay-module-config-generator": "^1.3.3",
	"react": "^18.2.0",
	"react-dom": "^18.2.0",
	"react-icons-kit": "^2.0.0",
	"react-redux": "^8.1.1",
	"react-router-dom": "^6.14.1",
	"react-transition-group": "^4.4.5",
	"redux-thunk": "^2.4.2"
},

I tried downgrading embla-carousel-autoplay to stable version 6, but it doesn't solve my problem, any ideas?

[Akbaroke]

I succeeded after using the code and packege "embla-carousel-autoplay": "^7.1.0",

[egl74]

Is there a way to horizontally scroll the Carousel with Magic Mouse/Trackpad?

[giffordgshane]

import { Carousel } from '@mantine/carousel';

function Demo() {
  return (
    <Carousel dragFree>
      {/* ...slides */}
    </Carousel>
  );
}

With this configuration, you should be able to scroll horizontally through the slides by swiping left or right on the Magic Mouse or Trackpad. The slides will smoothly follow the swipe gesture without snapping to specific positions.

[Asoft123]

Autoplay with Mantine using embla-carousel-autoplay does not work for me

[Asoft123]

How it was used

import { Carousel } from "@mantine/carousel"

const autoplay = useRef(Autoplay({delay:200}));

plugins={[autoplay.current ]}

[Bidhan-Bajracharya]

Assuming you were using TS, I was getting an error as well. The error was as mentioned in above discussion:
Type 'AutoplayType' is not assignable to type 'CreatePluginType<LoosePluginType, {}>'

I solved it by downgrading the version of embla-carousel-autoplay to "^7.1.0". After installing this version and restarting the server, the error was gone and everything worked as expected. Here is the code snippet:

import { Carousel } from '@mantine/carousel';
import Autoplay from 'embla-carousel-autoplay';
import { useRef } from 'react';

const TrustedBy = () => {
  const autoplay = useRef(Autoplay({ delay: 2000 }));
  return (
    <>
      <section className="flex min-h-[50vh] min-w-full flex-col items-center overflow-x-clip  bg-[#F6F6F6] pt-5 dark:bg-[#253e49]">
        <div className="w-full overflow-hidden">
          <Carousel
            height={310}
            slideSize={{ base: '100%', sm: '50%', md: '25.333333%' }}
            slideGap={{ base: 0, sm: 'md' }}
            align="start"
            loop
            dragFree
            withControls={false}
            plugins={[autoplay.current]}
            onMouseEnter={autoplay.current.stop}
            onMouseLeave={autoplay.current.reset}
          >
            {...slides}
          </Carousel>
        </div>
      </section>
    </>
  );
};

[due23]

Is there a way to change the value of the withControls and draggable options for different breakpoints like you can do with slideSize. I want to be able to disable/hide the controls when there are not enough slides to fill the number of slides the carousel allows at each breakpoint.

Ideally I would like to do something like the following but it doesn't seem possible given withControls and draggable only take one boolean value....

function Demo() {
  const slidesList = [1, 2, 3, 4];
  return (
    <Carousel
    slideSize={{
      base: "33.333333%", // show 3 slides at a time
      xs: "25%", // show 4 slides at a time
      sm: "20%", // show 5 slides at a time
      md: "16.66666666%", // show 6 slides at a time
    }}
    maw={{
      base: "306px",
      xs: "376px",
      sm: "446px",
      md: "516px",
    }}
    withControls={{
      base: slidesList.length <= 3 ? false : true,
      xs: slidesList.length <= 4 ? false : true,
      sm: slidesList.length <= 5 ? false : true,
      md: slidesList.length <= 6 ? false : true,
    }}
    align="start"
    loop
    pr="3em"
    pl="3em"
  >
    {slidesList.map((slide) => (
      <Carousel.Slide>{slide}</Carousel.Slide>
    ))}
  </Carousel>
  
  );
}