maxmarinich / react-alice-carousel Goto Github PK

I was just upgrading react-alice-carousel from 1.13.1 to 1.13.8, and after doing so I get the following error message: Module not found: Can't resolve 'react-hot-loader' in 'node_modules/react-alice-carousel/lib'.

Installing the latest version of the react-hot-loader package fixes this.

If this is a new dependency of react-alice-carousel, could it be made either a dependency or peerDependency in the package.json file?

Hi,
I'm using the Carousel and I can't find a way to avoid the "mouseDrag" event to trigger on drag of an element inside the carousel.

`<AliceCarousel
mouseDragEnabled
responsive={{
0: { items: 1 },
900: { items: 2 },
1124: { items: 3 },
1500: { items: 4 },
}}
items={ [

If I click any of the divs, and I drag the click, it won't move the carousel right away, because of the stopPropagation(), but as soon as I release it, it will move the carousel.

Any ideas?

Is there any way to prevent autoplay from stopping when the mouse is hovering over the component?

In the example image, it shows the padding between those items, but I couldn't find any props to do that

Is there any support for variable width slides so as to avoid irregular gaps appearing between slides when items have different widths? Here is a screenshot:

Thanks for the awesome component!

Hi there, I've basically followed the examples verbatim and am experiencing a problem.

The tl;dr is that I have custom buttons wired up, I click them, the slide advances one, and then immediately snaps back to the first slide.

Here is my code:

class MyScroller extends React.Component {
	state = {
		currentIndex: 0,
	}

	onSlideChanged = (e) => {
		this.setState({ currentIndex: e.item });
	}

	render () {
		const classes = cn({
			'in-progress': this.state.currentIndex !== 8
		});

		return (
			<div className={classes}>
				<button onClick={() => this.carousel._slidePrev()}>Prev button</button>
				<button onClick={() => this.carousel._slideNext()}>Next button</button>
				<AliceCarousel
					mouseDragEnabled={true}
					dotsDisabled={true}
					buttonsDisabled={true}
					infinite={false}
					onSlideChanged={this.onSlideChanged}
					ref={(el) => { this.carousel = el; }}
					responsive={{
						0: {
							items: 2
						},
						600: {
							items: 3
						},
						900: {
							items: 4
						},
						1200: {
							items: 5
						}
					}}
				>
					<MyThing />
					<MyThing />
					<MyThing />
					<MyThing />
					<MyThing />
					<MyThing />
					<MyThing />
					<MyThing />
					<MyThing />
				</AliceCarousel>
			</div>
		);
	}
}

Not an issue but a question.

I want to know when user has browsed all the current items and then trigger a fetch from backend for new data. What event can tell me if all the card have been viewed?

Any other approach?

Hi, I tried using the lib with React 16 and it crashes when you are navigating between slides.

Here is the error: http://prntscr.com/gzfzzw

I want to show small part of the next slide if exists, how can I do that? via css or some other parms?

Hi,
I am using this component to render different images from which user can chose and select . If user is on third slide and clicks on any image. It goes back to first slide. Dont know how to fix it. Any help will be appreciated

Hey,

Is this a bug or did I implement it wrong?

The slide stays in the current position on click.

import React from 'react'
import AliceCarousel from 'react-alice-carousel'
import { Link } from 'react-router-dom'
import { Col, Row, Card, CardHeader, CardBody } from 'reactstrap'
import styled from 'react-emotion'
import categories from '../../static/categories'
import EmptyList from '../EmptyList'

const Heading = styled('h3')`
  color: #777;
`

const Header = styled(CardHeader)`
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  padding: 0.5rem 0.75rem;
`

const Body = styled(CardBody)`
  display: flex;
  height: 270px;
`

const RowDiv = styled(Row)`
  position: relative;
`

const ImageContainer = styled('div')`
  width: 100%;
  margin: auto;
  height: auto;
  line-height: 135px;
  float: left;
  text-align: center;
`

const NextButton = styled('button')`
  position: absolute;
  background-color: transparent;
  border: none;
  top: 50%;
  left: 98.7%;
  z-index: 1;
`

const PreviousButton = styled('button')`
  position: absolute;
  background-color: transparent;
  border: none;
  left: -1.5%;
  top: 50%;
  z-index: 1;
`

const responsive = {
  0: { items: 1 },
  600: { items: 3 },
  1024: { items: 4 },
}

const ProductImage = styled('img')`
  max-width: 150px;
  max-height: 150px;

  @media (max-width: 768px) {
    max-width: 175px;
    max-height: 175px;
  }

  @media (min-width: 992px) and (max-width: 1146px) {
    max-width: 125px;
    max-height: 125px;
  }
`

const displayImage = attachments => (
  <ImageContainer>
    <ProductImage
      src={
        attachments && attachments.length
          ? attachments[0]
          : 'https://s3-sa-east-1.amazonaws.com/ofornecedor-images/noImage300.png'
      } // @TODO set enviroment variable
      alt="Produto"
    />
  </ImageContainer>
)
const category = value => categories.find(cat => cat.value === value)
const galleryItems = product => (
  <Card key={product.id}>
    <Header>
      <Link to={`/product/${product.id}`}>{product.title}</Link>
    </Header>
    <Body>
      <Row>
        <Col xs="12">
          <Link to={`/product/${product.id}`}>{displayImage(product.attachments)}</Link>
        </Col>
        <Col xs="12">
          <span>
            <b>Ordem mínima</b> : {product.minorder ? product.minorder : ' -'}
          </span>
          <br />
          <span>
            <b>Preço</b> : {product.price ? product.price : ' -'}
          </span>
          <br />
          <span>
            <b>Categoria</b> : {product.category ? category(product.category).name : ' -'}
          </span>
        </Col>
      </Row>
    </Body>
  </Card>
)

class AliceGallery extends React.PureComponent {
  constructor(props) {
    super(props)

    this.slideNext = this.slideNext.bind(this)
    this.slidePrev = this.slidePrev.bind(this)
    this.onSlideChanged = this.onSlideChanged.bind(this)

    this.state = {
      currentIndex: 0,
      products: this.props.products && this.props.products.length > 0 ? this.props.products : [],
    }
  }

  onSlideChanged(e) {
    this.setState({ currentIndex: e.item })
  }

  slideNext() {
    this.setState({ currentIndex: this.state.currentIndex + 1 })
  }

  slidePrev() {
    this.setState({ currentIndex: this.state.currentIndex - 1 })
  }

  render() {
    const { title } = this.props
    const { products, currentIndex } = this.state

    return (
      <React.Fragment>
        <Row>
          <Col xs="12">
            <Heading>{title}</Heading>
            <hr />
          </Col>
        </Row>
        <RowDiv>
          {products && products.length > 0 ? (
            <React.Fragment>
              <PreviousButton onClick={() => this.slidePrev()}>
                <i className="fa fa-chevron-left fa-2x" aria-hidden="true" />
              </PreviousButton>
              <NextButton onClick={() => this.slideNext()}>
                <i className="fa fa-chevron-right fa-2x" aria-hidden="true" />
              </NextButton>
              <AliceCarousel
                items={products.map(product => galleryItems(product))}
                duration={400}
                autoPlay
                fadeOutAnimation
                mouseDragEnabled
                buttonsDisabled
                dotsDisabled
                slideToIndex={currentIndex}
                onSlideChanged={this.onSlideChanged}
                autoPlayInterval={2000}
                autoPlayDirection="rtl"
                responsive={responsive}
              />
            </React.Fragment>
          ) : (
            <Col xs="12">
              <EmptyList />
            </Col>
          )}
        </RowDiv>
      </React.Fragment>
    )
  }
}

export default AliceGallery

https://gyazo.com/aa6ed69bb1392d87f113a5900370afbd

the buttons are not on the sides of the slider instead they're at the bottom in a text form.

Thank you for this great Library, Does the API already offer Zoom capability? i.e:

When triggering a zoom icon contained in the carousel, a given image would expand in a modal.

Even if you're using multiple elements, only one elements gets class __active.

Would it be possible to use custom SVG arrows in place of the CSS arrows? How would I go around doing so? Thanks in advance!

When I yarn add this package, I get version 1.7.1 according to the package.json, as opposed to what's in master currently. Could you push the latest to npm?

The onSlideChanged props is not getting triggered for the first counter (ie) when the index is 0, it is not getting triggered

Hello there, I did an small change to set the 'Prev' and 'Next' buttons labels, I tried to do a PR but I have no access, let me know if you are interested on this, thanks!

hi!

i built a react-app
source code here:
https://github.com/zoltanalmodo/purpose-react-app

it works fine when I run it on my local repository with npm start...

HOWEVER
when I deploy to heroku it gives me the following ERROR :

Failed to compile
./src/Components/Home/HomeGallery/HomeGallery.js
Module not found: Can't resolve 'react-alice-carousel' in '/app/src/Components/Home/HomeGallery'

can you please resolve?
I am using the latest updated version on all associated software packages.
+updated react-alice-carousel 2x

thank you.
zoltan

Hello, Thanks for this work!
I've already read #18 ! but i need some help!
this is my code for slider:

constructor(props) {
    super(props)
    this.state = {
      items: props.items,
      index: 0,
    }
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.items !== prevState.items) {
      return { items: nextProps.items }
    } else return null
  }

  sliderNext = () => {
    this.setState(prevState => ({
      index: prevState.index + 1,
    }))
  }

  sliderPrev = () => {
    this.setState(prevState => ({
      index: prevState.index - 1,
    }))
  }

  onSlideChanged = o => {
    const end = this.props.end + 1
    if (o.item === this.state.items.length - end) {
      this.props.onEndReached()
    }
  }

  render() {
    const { classes } = this.props
    const { items, index } = this.state

    return (
      <Grid container direction="row" alignItems="center">
        <Grid item xs className={classes.arrows}>
          <IconButton onClick={this.sliderPrev}>
            <LeftArrowIcon color="inherit" />
          </IconButton>
        </Grid>
        <Grid item xs={10}>
          <AliceCarousel
            ref={el => (this.slider = el)}
            dotsDisabled={true}
            buttonsDisabled={true}
            items={items}
            infinite={false}
            onSlideChanged={this.onSlideChanged}
            mouseDragEnabled
            slideToIndex={index}
          />
        </Grid>
        <Grid item xs className={classes.arrows}>
          <IconButton onClick={this.sliderNext}>
            <RightArrowIcon color="inherit" />
          </IconButton>
        </Grid>
      </Grid>
    )
  }

Parent Class:

loadMoreContacts = () => {
    const newItems = [
      <Card>
        <Typography>Hello 7</Typography>
      </Card>,
      <Card>
        <Typography>Hello 8</Typography>
      </Card>,
      <Card>
        <Typography>Hello 9</Typography>
      </Card>,
      <Card>
        <Typography>Hello 10</Typography>
      </Card>,
      <Card>
        <Typography>Hello 11</Typography>
      </Card>,
      <Card>
        <Typography>Hello 12</Typography>
      </Card>,
    ]
    this.setState(prevState => ({
      contacts: [...prevState.contacts, ...newItems],
    }))
  }

<Slider
          items={this.state.contacts}
          end={2}
          onEndReached={this.loadMoreContacts}
        />

When new prop received from parent, Slider goes to its first element and when i click once more on the next arrow, i will be in the next position. for example, first there's 6 items, when i scroll to 4th item, state got updated and slider goes to 1th item then when i click on next, it goes to 5th item.

Is there any solve?
Thank you!

I added the slider with this configuration:
const responsiveSettings = { 0: { items: 1 }, 600: { items: 2 }, 992: { items: 4 } }; <AliceCarousel duration={400} responsive={responsiveSettings} buttonsDisabled={false} dotsDisabled={true} autoPlay={this.props.autoPlay} autoPlayInterval={2000} startIndex = {1} autoPlayDirection="ltr" className="tile-slider" > slides go here </AliceCarousel>

Single slide look like this:
<div className="tile-slider__item"> <Link to={this.props.link.url}>{this.props.link.name}</Link> <img src={this.props.image.src} alt={this.props.image.alt}/> <footer> <h6>{this.props.title}</h6> <p>{this.props.description}</p> </footer> </div>

What I get in browser is not equal slides:

When I resize window everything scaled to fit slides number. But the problem remains on page onload. I tried to use styles for this problem and it also didn't work

Hi,

I'm using you lib with success so far. Thanks for your job here. 🎉

I'm using the lib to display a carousel of products. I have configured some values for responsive widths.

Everything is OK if the number of products is equals or greater than that number. But when the number of items is less, then I have an issue by having the items resized.

Can we have an option to add "transparent/fake" items in order to maintain the width?
Ideally they should be centered (ideally the alignment should be configured).

Another option would be to have an optional property for the maximum width for items.

As per title I couldn't find a way to prevent the slider from swiping when scrolling the page.
I tried using CSS3 property touch-action: pan-y but it's not making any difference. The issue is pretty annoying especially on mobile devices, when you scroll down the page and your finger is on top of the slider, it starts moving and makes the interaction confusing.
Any idea on how to solve the issue?
Thanks

hey, how to change view to vertical slider?

I have a website that i am building. I am using react-alicee-carousel.
Here users can upload images and see them in a carousel. Thing is when I update the children inside the carousel, nothing happens, only if i refresh the page do the new images appear. I am using redux.

My Code:

const carouselSettings = {
  buttonsDisabled: true,
  mouseDragEnabled: true,
  responsive: {
    0: { items: 2 },
    600: { items: 3 }
  }
};

renderImages() {
    const images = this.props.images.map((e, index) => {
      console.log(e);
      return (
        <div key={e.photo_id} className="carousel-container">
          <img src={e.full_size_url} className="carousel-image" />
          {index}
        </div>
      );
    });
    return (
      <AliceCarousel  {...carouselSettings}>
        {images}
      </AliceCarousel>
    );
  }

Render images is then called in the render function of the class.
How can i update the number of slides on the carousel?

First of all, really nice repo. It seems pretty rare to find a React 16 compliant slider that supports infinite scroll and multi-visibility items.

I have run across an issue where the number of indicators (dots) doesn't accurately show the number of items being passed in.

Example:
Given 5 slides, with 3 visible at any given time, there are 2 indicators ( 5/3 rounded up, I get that).

Code Example:
https://codesandbox.io/s/q3j7w1qxzq

I submit that this is a bug, as showing 2 indicators doesn't seem helpful a majority of the time, especially since the arrows scroll one by one. However, if that functionality is useful in other cases, perhaps a prop can be exposed to choose if you want to show all 5 indicators (each item), or just 2 indicators (each section) as per the example above.

Hey! i'm using alice carousel to recreate this slider.

The problem is that i want to have that active item behavior(green one) i thought in having a component which has an active state, so clicking on the item activates it and it changes the component bellow with react-router-dom but onClick isnt working in the given item.

Here's the code.

HCarouselItem Component

Here's the actual Carousel

Please tell me if this is allowed in Alice Carousel or i messed up with the code, i dont know how to work with codepen but if you really need it i'll try my best. Thanks in advance.

I just installed this library and the latest typescript defs. When I import AliceCarousel it says the import should be named 'reactAliceCarousel' instead of 'AliceCarousel' when I try to compile, but if I change it then it says that property reactAliceCarousel is not a JSX.IntrinsicElement. I expect this to work out of the box, any idea why it is not? I removed my node_modules folder and did an update and install and it is still having the same problem.

wondering what the best way would be to adapt the height of the container to adjust to the height of the current slide... my initial thought was to maybe use refs and tap into the onSlideChanged method to maybe set an explicit height but not sure if this is recommended or not... looking for suggestions, thanks!

Hi there,

Maybe I'm wrong, but after upgrade from 1.10.1 arrows controls just disappear and I couldn't find how to show/enabled them.

Cheers,
Timur Ramazanov

To repro
Use a form element in one of the slides (children)
Have an onChange handler on that input that causes the state of a container component to change and pass new props to the slide

Expected

• The input is updated with the changed prop value

Actual

• The input is not re-rendered

I think this if statement needs to also check if this.props.children have changed (since children can either be in props.children or props.items.

Are there any plans on adding freescroll to this component (like in flickity slider)? If you have dynamic items it would be better to have this option instead of manually setting one slide with n items.

When using SSR items inside the carousel are not being rendered.

In react-alice-carousel.d.ts

items?: Array;

Should be

items?: {}[];
or
items?: Array<{}>;

Otherwise this error is raised:
Generic type Array<T> requires 1 type arguments.

Can you add new endpoint to carousel's API to display specific slide on component's load?
Thanks!

Currently if there are multiple buttons spanning multiple slides, tabbing between them causes the carousel to get stuck halfway between slides.

Please add @types

I would love to be able to call something like: this.Carousel._slidePrevPage() or this.Carousel._slidePage(count) to slide the entire # of slides designated for the responsive setting instead of navigating one slide at a time. Would this be a doable and/or reasonable feature to request?

My current solution was to write a function like this:

  pageHandler = (slideCount) => {
    // If the current number of slide items are just 1, do not divide by 2. If current number is > 1, slide page by # items/2.
    let responsiveSlideCount = slideCount > 1 ? slideCount/2 : 1;
    // Alternative version:
    // let responsiveSlideCount = slideCount > 5 ? slideCount/2 : slideCount;
    let itemIndex = this.Carousel.state.currentIndex + responsiveSlideCount;
    if (itemIndex < 0) {
      itemIndex = 0;
    }

    this.Carousel._slideToItem(itemIndex);
  }

<button className="slide-button-back" onClick={() => this.pageHandler(this.Carousel.state.items * -1)}>
  <i className="fa fa-caret-left" />
</button>
<button className="slide-button-next" onClick={() => this.pageHandler(this.Carousel.state.items)}>
  <i className="fa fa-caret-right" />
</button>

Hi, me again, I'm having an issue right now where I've got a carousel full of cards that are also links. We're noting an issue where when we do drag-scrolling on desktop, the carousel doesn't trap that click event and stop propagation, so the click travels through to the card and after swiping is done, it causes navigation to happen.

Are there hooks I can access via the API to prevent this from happening or does this require a change to the library? I'm happy to open a PR if need be, just wanted to get feedback before diving in.

hi, why do you not play the controls automatically after the mouse is dragged?

I forked your repo, and tried to add it as git dependency at package.json at create-react-app, added install script to being run after install, similar to build:lib.
It fails, unable to locate webpack:

>[email protected] install /Users/madsaylor/Projects/new_realty/node_modules/react-alice-carousel
>webpack --config webpack.lib.config.js --colors
internal/modules/cjs/loader.js:583
    throw err;
    ^
Error: Cannot find module 'webpack'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
    at Function.Module._load (internal/modules/cjs/loader.js:507:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.<anonymous> (/Users/madsaylor/Projects/new_realty/node_modules/react-alice-carousel/webpack.lib.config.js:2:17)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)

Any ways to avoid that?
Thanks for you work

Upon rendering, the carousel shows a tiny piece of the next slide and right after its parent component's state changes, the image gets into place as desired. What can I do to fix this?

It would be great to allow you to customize all of the options at every breakpoint. I sometimes want to hide the toggles and only show the dots on mobile and vice versa.

Just a thought. Thanks!

Hi, I'm being super chatty, but this is just a quick question:

How do I build the project, like, if I wanted to symlink it into my own project?

I understand how I can run it locally, but I can't find anything that builds it to its final dist output.

Hi! Just want to report that mouseDragEnabled doesn't seem to be working. I created a sample app using codesandbox. You can see the bug here: https://codesandbox.io/s/8zymljmp40

Am I using it wrong?

Hi there,

I have a strange issue with changing slides. I have a website that uses alice-carousel on few subpages. The issue is:

1. I load the page with component that uses alice-slider
2. I go to another subpage with the same component, but I pass different slides.
3. On that page new slides are passed, but somehow slides from previous page are displayed.

I double checked passed data, and when I display slides withous slider ( just in raw div ) everything works, so it's probably library issue.

Could you please help me with this one?

If I say have 4 thumbnails I want to scroll, is it possible to scroll via the width of all 4 items, rather than the 1 item at a time?

So, the whole carousel bar does a quick scroll and the display items are in the same order once it's completed?

Hi Max,

I currently have an unexpected behavior while using carousel in the same page as a semantic-ui-react search component where if I type a space bar in the search component, the carousel begins to auto play. Do you have any idea how I can remedy this? I don't see anywhere in the docs about managing space bar controls and I already have tried autoplay disabled (default and prop change didnt make a difference).

Thanks again.

Hi @maxmarinich! Thank you for creating this library - as I'm using it, I am feeling the need for lazy loading the content. I'm wondering if that is possible with the current props in the library, if it should be part of the library or if there is a specific way non-library way that you'd recommend?

I am using the carouself to render a few components, not just simple img tags.

These components use lifecycle methods and are stateful, because depending on some props from redux store, they change the URL of the image they render.

The issue im having is that by using the responsive property, the carousel appears to be remounting all components multiple times, which causes multiple triggers on componentDidMount(), which are often async GET fetches, resulting in multiple fetches.

It is not consistent in the sense that if i pass it 3 items it will mounts each twice, but rather, i pass it 3 items and it will remount all of them twice, then some of them a third time but not all.

My expected behavior was simply not multiple mounting of components. Is there a property i might be missing, or another way of passing stateful components to the carousel?