This carousel works well when set with default rows and cols as properties inside the tag:

<Carousel
      cols={5}
      rows={2}
      gap={10}
      loop
      autoplay={undefined}
      responsiveLayout={[
        {
          breakpoint: 1024,
          cols: 4,
          rows: 2,
          gap: 10,
          loop: true,
          autoplay: undefined,
        },
      ]}
      mobileBreakpoint={479}
    >

But when it comes to reducing cols or other properties in smaller breakpoints, the slider automatically slides back to the first slide instantly no matter how many times you click on arrows or dots and having my autoplay disabled:

Check video of this issue: https://drive.google.com/file/d/1ZZhxR1vaSFle793Ur0aX3xLzVOPt5KCa/view?usp=drive_link

Not working, it working when you use the pages[0] but no change

export const Carousel = <T extends any>({
    items,
    renderItem,
}: CarouselProps<T>) => {
    const {
        scrollRef,
        pages,
        activePageIndex,
        prev,
        next,
        goTo,
        snapPointIndexes,
    } = useSnapCarousel();
    console.log(pages); // is array inside array

    return (
        <div style={styles.root} class="text-white">
            <ul style={styles.scroll} ref={scrollRef}>
                {items.map((item, i) => {
                    return renderItem({
                        item,
                        isSnapPoint: snapPointIndexes.has(i),
                    });
                })}
            </ul>
            <div style={styles.controls} aria-hidden>
                <button
                    type="button"
                    style={{
                        ...styles.nextPrevButton,
                        ...(activePageIndex === 0
                            ? styles.nextPrevButtonDisabled
                            : {}),
                    }}
                    onClick={() => prev()}
                >
                    {String.fromCharCode(8592)}
                </button>
                {pages[0].map((_, i) => (
                    <button
                        type="button"
                        key={i}
                        style={{
                            ...styles.paginationButton,
                            ...(activePageIndex === i
                                ? styles.paginationButtonActive
                                : {}),
                        }}
                        onClick={() => goTo(i)}
                    >
                        {i + 1}
                    </button>
                ))}
                <button
                    type="button"
                    style={{
                        ...styles.nextPrevButton,
                        ...(activePageIndex === pages[0].length - 1
                            ? styles.nextPrevButtonDisabled
                            : {}),
                    }}
                    onClick={() => next()}
                >
                    {String.fromCharCode(8594)}
                </button>
            </div>
            <div style={styles.pageIndicator}>
                {activePageIndex + 1} / {pages[0].length}
            </div>
        </div>
    );
};

Hello. Thank you for sharing your perfect library.
It really helps to me as a beginner developer.

I would like to use this library with map() function but I have a problem with "key"
How can I use this with map()?

<Carousel.Item key={id}>

because of key error, I could get data from backend but it doesn't showing on the browser.

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

import '../css/bootstrap.min.css';
import '../css/style.css';
import '../css/carousel.css';
import { useEffect, useState } from 'react';

import axios from 'axios';
import Carousel from 'better-react-carousel';
import { baseUrl } from '../components/commonApi/mainApi';

const NewestSmall = () => {
const [book, setbook] = useState([]);
const addr = baseUrl + '/newest';
console.log(addr);

useEffect(() => {
getbook();
}, []);

async function getbook() {
await axios
.get(addr)
.then((response) => {
setbook(response.data);
})
.catch((error) => {
console.log(error);
});
}

return (
<div className='neweast container col-xl-6 col-lg-6'
<div className='carousel container-fluid mt-4'
<Carousel cols={2} rows={1} gap={15} loop
<div
{book.map((book) => {
return (
<Carousel.Item key={book.book_num}
<div id='book-image'
<a href={'/book/' + book.book_num}
<img src={book.book_image} alt={book.book_title} /
</a
</div
<div

#1</p

{book.book_title}</p

{book.category_code}</p
</div
</Carousel.Item
);
})}
;
</div
</Carousel
</div
</div
);
};

export default NewestSmall;

I am trying to generate multiple items without having to hard code those but it shows an empty carousel for some reason.

Here is the code

const items = useMemo(
    () =>
      Array(12)
        .fill(0)
        .map((_, i) => {
          return (
            <div>
              <Carousel.Item>
                <img
                  width="100%"
                  src="https://picsum.photos/800/600?random=1"
                />
              </Carousel.Item>
            </div>
          );
        }),
    []
  );

  return (
    <div>
      <Carousel
        autoplay={autoplay}
        cols={cols}
        rows={rows}
        gap={gap}
        showDots={showDots}
        hideArrow={hideArrow}
        loop
      >
        {items}
      </Carousel>
    </div>
  );

First - thanks for your work on this! 👍🏻

The ability to have arrows and/or dots remain visible on mobile resolutions below 1024px would be very helpful. There are situations where a) the content that's able to be scrolled won't have the off-canvas content visible on either side, and b) simply situations where the visual indicator(s) of dots and/or arrows is simply another helpful UI tool for navigating the content in the carousel.

Example of scenario (a) above
1024 px and above:

620 px (content is available to be scrolled but there is not visual indication of that)

• Version: 1.1.2
• Env: vite@latest + react 18.2.0

I know that yesterday you pushed a change to solve this but it didn't work. As far as I am aware, those new options are part of RollUp v3 and I see you're using 1.29.1 so I don't really know if they were supposed to work in the first place.

Hii,
Thank you for the amazing package.But i am facing an issue,my navigation arrows are working fine on desktop but on mobile responsive it not working.http://noplan.maastrixdemo.com/step-two.

This is my code.Any help will be appreciated

`
{characters.map((char, index) => (
<Carousel.Item key={index}>

                                <a
                                  style={{ border: "1px solid red" }}
                                  className={
                                    Object.keys(selectedCharObj).length ===
                                    0
                                      ? ""
                                      : char.id == selectedCharObj.id ||
                                        char.id == selectedCharObj2.id
                                      ? "active"
                                      : "grayScaled"
                                  }
                                  style={{ cursor: "pointer" }}
                                  onClick={(e) => {
                                    selectCharacter(char);
                                  }}
                                >
                                  <img src={char.image} alt="char" />
                                </a>
                              </div>
                            </Carousel.Item>
                          ))}
                        </Carousel>`

Issue

I am using the better-react carousel, it's one of the best in the carousels but, I am facing some issues in changing the cols property for the mobile screen. I want to show 5 pictures in small size on a mobile screen but cannot access the depth of the cols property. Am I doing it wrong, or is there another way? I am using Next Js (TypeScript), TailwindCSS.
I've included for you the attached images. The first image shows the gap, I want to remove. The second image shows the property I want to apply for mobile screen by default it is, "grid-template-columns:repeat(5,100%)". I want to change it to, "grid-template-columns:repeat(5,30%)". Please guide me.
Thanks

TypeError: Cannot read properties of undefined (reading 'displayName')

how can i customize the arrows?
and how can i adjust the total container size to avoid x-overflow

Worked fine in development but the second I ran a production build, I get Cannot read properties of undefined (reading 'withConfig') error and the site breaks. Remove your carousel and the site works again, yours is the only sttyle component I have.

Any advice would be great because this is the best carousel I found during development tests.

First off I just want to say how amazing this is. Spent all day today trying to get different carousels to work with no luck. Yours is the first that works perfectly.

My issue is with trying to custom style the components. I tried to mimic your dot example // your custom dot component with prop isActive`
const MyDot = ({ isActive }) => (
<span
style={{
display: 'inline-block',
height: isActive ? '8px' : '5px',
width: isActive ? '8px' : '5px',
background: '#1890ff'
}}

)

// set custom dot
` but the dots just disappear. Any advice would be welcome. II tried looking at your JS dot file but it's incredibly complex compared to the readme example.

It's not a huge deal because the default functionality works fine but I'd like to make them slightly larger and include a hover background change.

Thanks again for the amazing component!