leaffm / react-infinite-carousel Goto Github PK
View Code? Open in Web Editor NEWReact simple infinite carousel with lazy loading and responsive support
License: MIT License
React simple infinite carousel with lazy loading and responsive support
License: MIT License
Hi,
I want to disable prev arrow on first slide and next arrow at last slide. it would be possible ? can I get current slide index to do it manually ?
Thank you for this awesome library.
Am currently work on a project where am using this library.
Initially the library was working flawlessly. After a month, I am to make changes to the repo. The carousel does not load until page is resized again. Am using carousel and nextjs 6.1
After the component is rendered, cycling between slides doesn't start automatically, despite the 'autoCycle' parameter being set; rather, one has to click on one of the arrows in order to 'kick start' the cycling, which performs as expected thereafter.
Are there plans to fix this issue? Or is there a quick-and-dirty workaround I might be able to employ in the meantime?
HI @gl0gl0, thank you for open sourcing this! I'm seeing the following error:
ReferenceError: window is not defined
at /project-okay/node_modules/react-leaf-carousel/lib/react-infinite-carusel.min.js:6:14225
It seems that there needs to be a check for window
before using it, which will then make it work on the server?
Having 20 elements in total in the carousel in portrait view, Tap the page # 7 to display the last elements of the carousel.
Now flip the device to turn the landscape view on.
See that now the pagination has 5 pages which is perfect because is splitting the 20 items in groups of 4, however the carousel is placing the first element as part of the last set of 4 items.
If you click the Page # 1 you can see that the elements are now properly arranged
Hi, i am Andrew. I liked your carousel. But I noticed one problem. If autoCycle is true, then when you change the resolution (for example, turn the phone), setTimeout is set again and there are two cycles. The more the resolution changes, the faster it starts to switch. I would like you to fix this problem so that I can fully use your library.
Thanks!
See that the same content and element positions are coming up in your mobile device, there should be a mobile version for this carousel with less elements.
see image here:
As the title says when you move your mouse cursor from inside the carousel to an arrow and immediately click on the arrow, it doesn't work.
To reproduce:
You will see that the carousel doesn't move.
The cause of this probably is that in the <ul>
tag on render
function of the component, there is a listener for onMouseLeave
event that is not prevented to be executed when the user is not dragging. (Probably the condition to attach this event and other event listeners related with drag is incorrect: should be dragging && !disableSwipeEvents
and not the current dragging && !disableSwipeEvents
)
I am load the images from an API response but they are not rendering in the carousel. Here is my code- I have added an additional rendering of the images just to show that in fact they are being returned.
import React, { Component } from "react";
import "./App.css";
import InfiniteCarousel from "react-leaf-carousel";
import axios from "axios";
class App extends Component {
constructor(props) {
super(props);
this.state = {
data: []
};
}
componentDidMount() {
axios
.get("https://randomuser.me/api/?results=5")
.then(response => this.setState({ data: response.data.results }));
}
render() {
let images = this.state.data.map(image => {
return <img key={image.cell} src={image.picture.large} alt="" />;
});
if (this.state.data) {
return (
<div className="App">
<InfiniteCarousel
breakpoints={[
{
breakpoint: 500,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 3,
slidesToScroll: 3
}
}
]}
dots={false}
showSides={true}
sidesOpacity={0.5}
sideSize={0.1}
slidesToScroll={4}
slidesToShow={4}
scrollOnDevice={true}
>
{this.state.data.map(image => {
return (
<div key={image.cell}>
<img key={image.cell} src={image.picture.large} alt="" />
</div>
);
})}
</InfiniteCarousel>
{this.state.data.map(image => {
return (
<div key={image.cell}>
<img key={image.cell} src={image.picture.large} alt="" />
</div>
);
})}
</div>
);
} else {
return <div className="App">Loading</div>;
}
}
}
export default App;
images not render with .map()... why?
See that once you start clicking the links, the carousel's elements inverts their direction
Please see the following video for more details:
Thank you for your time and work! I am trying to add my custom arrow buttons but cannot get them to work.
I am adding them as React functional component and they are showing but do not acquire any necessary classes / attributes.
I also tried adding it as icon but same result.
Could you please help? (please forgive my inline styling)
Hi there, I'm looking for a config to jump on to a specific page number instead of starting from the first page. Please advise.
Hello!
Thank you very much for this amazing library, it has been very helpful for our project, but i found a bug realted with the dot navigation, i made a new installation and when I clicked in any button took me to a different slide that the one that I tried to access.
you can check the implementation I did here
![leaf-loader-infinite](https://user-images.githubusercontent.com/65680545/88200436-bfa21b00-cc0b-11ea-8f6f-5aef00616e0e.gif)
Hope you can find a solution!
By using an iPad or a mobile device go to: https://react-infinite-carousel-uszkpdnpia.now.sh/
Place your carousel in Page 1
Click the "Previous" link or swipe to your right.
See that the carousel is showing blank spacing, and then after 2 seconds the items are coming up.
Hi! Is there a way to get this to smoothly slide continuously kinda like a news ticker?
Without the quick jump from slide to slide.
Hi, how to change the point style? http://take.ms/y4LNp
I have anchor tags as children to InfiniteCarousel component. On click of child item its not going to the given href hyperlink.
Hello everybody,
is it a way to slide the carousel with the mouse wheel or for example with the apple magic mouse?
Thanks in advance
The carrousel generate the same id for other components.
The second carousel not it's showing because are using the same id.
When resizing the screen, the carousel is not keeping the same elements positions, it start moving by its own.
Please see the following video for more details:
Hi there,
First, I would just like to say I really like your carousel over many others.
The issue I am having is the swiping doesn't seem to work, I'd like to be able to drag the carousel horizontally on large screens (desktop/laptop) not just on devices. Swipe={true} doesn't work? or is this not what it's intended for? If not, is it possible to implement?
Thanks
Hello everybody,
is it not possible that the carousel is infinite on mobile devices?
Thanks in advance
Using IE11 or Edge 14 and having your browser in full screen open the URL: https://react-infinite-carousel-vrtbcxaige.now.sh/
Reduce the size of the screen until the carousel display 2 elements per page.
Now, click the maximize button from the upper right corner of your browser.
See that the browser is still displaying 2 elements but now is full screen. See attached image:
Now click the minimize button
See that the page is broken, as the titles are not getting smaller:
Hi,
Trying to implement a smooth infinite scroll for a landing page logo animation, what settings could I use to achieve this?
Many thanks,
Sean.
Giving custom next and previous icons are not working. Icons are displaying. They do not follow the default position of default arrows and upon clicking them, carousel is not updated.
nextArrow={<NextIcon /> }
prevArrow={<PreviousIcon />}
Hello from the beginning tell you that I love the carousel is very easy to use and configure, thanks!
On the other hand, I wanted to know how to do so that instead of one row products are shown in 2 rows one below the other with the same amount of objects.
I am using google translator to write this, apologies in advance if something is not understandable
Having your browser is full screen open the URL: https://react-infinite-carousel-vrtbcxaige.now.sh/
Check the first element:
Now, set your browser to: 768px x 880px
See that now only 3 elements are coming up, and the pagination is now 1 to 7.
Click the # 1 from the pagination list.
See that you are in page 1. But as you can see the green element is not longer there. And if you inspect the element and click the page # 3 you can see that the elements are not listed as they should be.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.