I want to create slider in carousel in react native like the example image below
I want three View to be displayed on each slide And the middle slide is bigger than another and show my Text in the middle slide
Does anyone have a solution for creating this slider with FlatList?
enter image description here
It seems you can use https://github.com/meliorence/react-native-snap-carousel for the carousel view.
Related
I am using React with ant design. I am trying to create a page with a list of cards. In each card, there is an image carousel. I would like that when the user clicks on and image, the preview opens and they can swipe (or click on the arrows) to see all the images as a big, fullscreen preview.
I tried this:
<Image.PreviewGroup>
<Carousel autoplay>
{this.images.map(
(image: string, index: number) => {
return <Image key={index} src={image} preview={{ getContainer: '#root' }} />;
}
)}
</Carousel>
</Image.PreviewGroup>
But what happens here is that when the preview is opened, instead of showing 5 images, it is showing 11 (the images are shown twice, one of the images is shown 3 times).
If I place <Image.PreviewGroup> inside the <Carousel>, then instead of having an image carousel, I have multiple images stacked under each other.
How can I get it to show a clickable carousel, which when clicked, opens a fullscreen preview with the correct number of images that can be seen by swiping/clicking on arrows?
Thanks in advance.
just got into same issue and solved it. for the code structure, the first one you tried was fine
MAIN PROBLEM:
the main issue is on the carousel, which is using slick lib. if you inspect your page, you will find that inside the carousel wrapper tag, it generates 2-3 images for each <img> we declare in our code. so automatically, the Image.PreviewGroup that wraps the carousel, will detect more <img> than it should have
SOLUTION:
add infinite={false} props to your carousel component. for more detail , please refer to slick docs
I'm using the react-slick library to make a slider, and I would like to change active slides and the slide which is at the top of the slider. For example, if I click on a button in the current page, I want the current slide at the top of the slider to change.
Do you know if is it possible to do this properly with this library?
I found a solution on the react-slick github (https://github.com/akiran/react-slick/issues/738), which consists of creating a ref to the slideshow and setting the focus via this.slider.innerSlider.list.focus(). However, this does not work very well, because the element I want is not at the very top of the slider. For example, if I set the focus on the second to last slide, the first element of my list is not accessible any more via the arrows.
If this.slider is a ref to your Slick component, you can force the slideshow to show a slide by calling the method slickGoTo() with the index of the desired slide. For example, to show the second slide:
this.slider.current.slickGoTo(1);
For details on the methods that you can call using your ref, see: react-slick API: Methods.
want to create a portfolio/projects page where user click on thumbnail it goes full screen and other page comes in
i guess i can achieve this using pose-flip
https://codesandbox.io/s/fourth-react-pose-example-qj92p problem is how i can do it with multiple elements on page
this is the sample site
i'm new to react, when i click the thumbnail how to remove all others ( fade ), we can do it simply in jquery not selector
In a Codenameone app, I'm trying to develop a carousel with a thumbnail list at the bottom. I've used Tabs control to display files (of diff types like images, video, text, button etc) in carousel style in the center of a form and another Tabs control to display thumbanail images (of the first carousel files) at the bottom of the form. When a user selects a thumbnail image in the bottom carousel, corresponding component should be displayed in the first carousel.
hi.add(BorderLayout.CENTER, mainCarousel);
hi.add(BorderLayout.SOUTH, bottom_tab);
bottom_tab.addSelectionListener((i1, i2) -> {
// bottom_tab.getTabComponentAt(i2).addPointerPressedListener((i) -> {
mainCarousel.getTabComponentAt(i2).setVisible(true);
mainCarousel.getTabComponentAt(i2).repaint();
// });
});
But the component not getting displayed in the central carousel.
Also, I tried to capture the event addPointerPressedListener, but it's not getting fired when I select a thumbnail image.
You can't set tab components to visible/invisible to show/hide them. That won't work. I'm guessing that what you want is a horizontal list for the bottom UI similar to the answer here.
I would suggest using pointer released always. Notice that this will only get delivered to focusable components or the form. To make sure you get the event you can register a pointer release listener on the form.
I am doing basic angular carousel slider. Here we want a separate section, which will slide the slider to particular one. How do we achieve this. I have shown a sample in image. If I click on 1 it should go to 1st slide and so.
Check angular-carousel, see an example here