Leandrowd from React-responsive-carousel Repository

MIT License

04 Oct 2022

AishwaryVishwakarma

started

Started On 04 Oct 2022 at 08:30:42

Reuben-Ekow-Yawson

React.js Responsive Carousel (with Swipe)

Forked On 04 Oct 2022 at 03:36:58

Reuben-Ekow-Yawson

started

Started On 04 Oct 2022 at 03:36:49

Kiedff

React.js Responsive Carousel (with Swipe)

Forked On 04 Oct 2022 at 01:38:16

Ondairos

started

Started On 04 Oct 2022 at 12:01:24

Stale

Typescript error

TS2607: JSX element class does not support attributes because it does not have a 'props' property. TS2786: 'Carousel' cannot be used as a JSX component.   Its instance type 'Carousel' is not a valid JSX element.     Type 'Carousel' is missing the following properties from type 'ElementClass': context, setState, forceUpdate, props, and 2 more.

Forked On 04 Oct 2022 at 04:04:14

Stale

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

Commented On 04 Oct 2022 at 04:04:14

Stale

Next.JS: Applied style jsx, but not working

I am trying to change the UI using style jsx, but it does not work even after giving the className.

How can I customize it?

import { Carousel } from 'react-responsive-carousel';
import 'react-responsive-carousel/lib/styles/carousel.min.css';

const ItemsBanner = ({ carousel, ...rest }) => {
  const router = useRouter();

  const moveToProduct = item => {
    router.push(`/product/${item.node.slug}`);
  };
  return (
    // <Banner carousel={carousel} className="h-full" isSmall={true} showThumbs={false} showIndicators={false} showStatus={false} showArrows={false} selectedItem={2} />

    <div className={`flex relative is-small`}>
      <Carousel className="h-full" isSmall={true} emulateTouch showThumbs={false} showIndicators={false} showStatus={false} showArrows={false} selectedItem={2}>
        {carousel.length !== 0 &&
          carousel?.map((item, idx) => (
            <div className={`cursor-pointer`} key={idx} onClick={() => moveToProduct(item)}>
              <p className="mb-4 -mt-2 leading-none">
                <b>{idx + 1}</b> / {carousel.length}
              </p>
              <div className={`test-div`}>
                <img src={item?.node?.image.mediaItemUrl} alt="banner" />
              </div>
              <>
                <div className="text-[1.2rem] font-semibold text-left mt-4 mb-2 leading-none">{item.node.name}</div>
                <div className="text-sm tracking-wide text-left" dangerouslySetInnerHTML={{ __html: item.node.shortDescription }}></div>
              </>
            </div>
          ))}
      </Carousel>

      <div className="mx-10 mt-[200px] h-[40px] uppercase bg-black text-white py-2 px-4 rounded-full ">
        <Link href={`/category/${carousel[0].node.productCategories.edges[0].node.slug}`}>More</Link>
      </div>

      <style jsx>{`
        .is-small {
          background: black;
        }
        .carousel .slider-wrapper {
          overflow: visible !important;
          width: 20% !important;
        }
        .carousel .slide {
          padding: 25px;
          border: solid 1px #777;
          border-left: none;
        }
        .carousel .slide:first-child {
          border-left: solid 1px #777;
        }
      `}</style>
    </div>
  );
};

export default ItemsBanner;``` 

Forked On 04 Oct 2022 at 04:04:12

Stale

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

Commented On 04 Oct 2022 at 04:04:12

Kiedff

React.js Responsive Carousel (with Swipe)

Forked On 03 Oct 2022 at 11:55:47

D-ban

started

Started On 03 Oct 2022 at 10:34:43

Sb-hyejin

autoplay doesn't work when start, only work when i click nev/prev one time

here are my option: autoPlay={true} interval={2000} infiniteLoop={true} and it seems doesn't work correctly, please help!

Forked On 30 Sep 2022 at 05:50:34

Sb-hyejin

Same problem on ^3.2.23

Commented On 30 Sep 2022 at 05:50:34

One-god

started

Started On 30 Sep 2022 at 02:00:49

XSallus

started

Started On 29 Sep 2022 at 02:22:29

Stale

Library seems to be broken

I just downloaded the library and when I try to implement the component it seems like the carousel doesn't load CSS styles.

To reproduce:

  1. Install the library with yarn
  2. Try adding the component with images
  3. See that CSS doesn't get loaded

Expected behaviour The library should correctly show the slider

Screenshots Screenshot 2022-03-17 at 12 47 49

Forked On 28 Sep 2022 at 06:19:54

Stale

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

Commented On 28 Sep 2022 at 06:19:54

Sandy13869

started

Started On 27 Sep 2022 at 04:26:27

Stale

Vertical scroll on on mobile affects changes the slide

Hi all. I want to submit an issue. When carousel is opened on a mobile, on android/chrome for example, vertical swiping on mobile screen causes carousel slide to be changed: swiped to next or prev.

Forked On 27 Sep 2022 at 01:03:35

Stale

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

Commented On 27 Sep 2022 at 01:03:35

Tjg184

started

Started On 25 Sep 2022 at 10:33:50

Tjg184

started

Started On 25 Sep 2022 at 10:32:13

Cadu

started

Started On 23 Sep 2022 at 03:44:39

Shoreasg

started

Started On 22 Sep 2022 at 04:33:33

Loiclegoff

started

Started On 22 Sep 2022 at 09:03:25

Misitebao

started

Started On 20 Sep 2022 at 09:42:17

Maingocanh2302

started

Started On 20 Sep 2022 at 06:23:02

Dengzhaofun

started

Started On 20 Sep 2022 at 10:22:31

NavarKartalian

started

Started On 19 Sep 2022 at 08:31:53

Nadirhussainnn

reverse carousel

how to slide carousel reverse in vertical direction? the slide should move from bottom to top direction.

Forked On 19 Sep 2022 at 11:08:14

Nadirhussainnn

Same issue. Could not find answer yet!

Commented On 19 Sep 2022 at 11:08:14

Ilhamgum

Support for clickable slides, with hyperlinks

From what I can tell it is not possible currently to add a hyperlink to a slide, such that when clicking on it would follow the referenced page?

For example:

 <div>
            <a href="http://github.com/"><img src="images/2.jpeg" /></a>
            <p className="legend">Legend 1</p>
        </div>
        <div>
            <a href="http://localhost:2020/"><img src="images/2.jpeg" /></a>
            <p className="legend">Legend 2</p>
        </div>
        <div>
            <img src="images/3.jpeg" />
            <p className="legend">Legend 3</p>
        </div>
        <div>
            <img src="images/4.jpeg" />
            <p className="legend">Legend 4</p>
        </div>
        <div>
            <img src="images/5.jpeg" />
            <p className="legend">Legend 5</p>
        </div>
        <div>
            <img src="images/6.jpeg" />
            <p className="legend">Legend 6</p>
        </div> 

The expectation here is click on slide 1 and 2 would take me to referenced page.

I did try using onClickItem, to hoping this could help, but it just returns the slide number, when doesn't allow me to access the content to process myself.

I did also try in the sandbox: https://codesandbox.io/s/rql0ovl5m

Forked On 19 Sep 2022 at 08:02:11

Ilhamgum

onClickItem={(index) => { window.open(art.imageUrls[index].url) }}

it doesn't work if using animationHandler="fade"

Commented On 19 Sep 2022 at 08:02:11

About Repository

React.js Responsive Carousel (with Swipe)
Language: TypeScript
Star: 2238
Fork: 589
Watchers: 2238
Open Issues: 18
https://github.com/leandrowd/react-responsive-carousel
MIT License
Last updated: 04 Oct 2022
Tropics: