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.
Related
I'm implementing a carousel and I want to target the element at the center of the slider. So, I can make it pop a little.
How can I target this component? I have found ways to know if the element is inside the viewport or not but I want to know if it's horizontally centered.
Original Problem
Horizontal scroll and set state
Since you have no code my answer will be more theoretically how to do it.
So first off you should have a boolean state that you can toggle for the active state. This state should be controlled by the container. That way you can only activate one at a time.
Next you should get 2 values, the X scroll position of the container and the center point of the visible area of the gallery.
Then you can just calculate an offset on mount and then X scroll of the gallery.
So in theory it starts at 0 and your container is 500px you know that the active slide is at the 250px mark so you can calculate that with the position of the slide, it should be the last slide that passed that point. then just recalculate this value on scroll. (maybe throttle)
Possibly able to use react-hook-inview
I've used this react hook before on the Y axis. I'm not 100% sure that it works on the X scroll. But it can be a great way to trigger a state change on each of the slides. The only issue is that you'll be adding a event listener to each of your slides (possible performance hit).
You can see that lib here
This one lets each slide control it's own inView state.
I have simple react app that contains 3 components: app, ul and li. The app holds an array of items.
Every 5 seconds (with set interval) the app slices 3 consecutive items and send them to the ul component to be displayed. If we start with:
item 3
item 2
item 1
after 5 seconds the list will be:
item 4
item 3
item 2
I'm trying to create an animation that once the props to the ul are updated, will push down the current list, until the bottom item is hidden, and after that it the next item should appear on top.
I thought about using the getDerivedStateFromProps method to activate the animation, use async await to hold the app until the animation will end (translateY) and then apply another animation of opacity on the new item.
I don't think it's a good solution and I think there must be simpler way to do it.
I also tried using the react transition group, but it only works when the item appear and not when content is changing.
I would love if anyone could point me in the right direction.
There are a ton of options to animate this type of event in React.
It's usually referred to as a Transition, because you need to animate a component before it unmounts. You can either:
Implement it yourself:
By using state in the <ul> component. Your ul should keep track
of every item it has rendered in its state and only remove an item
from the list when that item has called a callback at the end of its
animation.
Make your li components be able to receive a shouldGoAway prop as
a boolean and an animationCallback that will be called when the
animation is over. The li should check if prop.shouldGoAway and if
it is true is should animate itself to fall out of view (use a react
animation library like react-spring, a js animation library
like animejs or pure CSS animations) and call the
animationCallback when it is done.
Use one of the many React animation libraries that support Transition animations.
The choices that come to mind are react-transition-group, react-spring and react-motion.
Good luck.
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'm working on a mapping app using ionic and leaflet. Note that I am not using the leaflet angular directive, I am using straight JS for the leaflet map (I know, I know...).
The initial state in my app loads the leaflet map just fine. If I switch to another state and back to the map everything is also fine. However, if I launch the app, switch to a different state and open a modal window in that state, then return to the original state, the map is broken and displays a number of grey tiles. The map will not update until the browser window resizes or the orientation of the mobile device is changed.
Here's a demo on Plunker: http://plnkr.co/edit/w67K2b?p=preview. To reproduce:
Click the button at the right side of the navbar which will take you to a different state.
Click the 'Back to map' button to go back to the original state. The map looks just fine.
Click the button in the navbar again.
Click the 'Open modal' button and then close the modal.
Click the 'Back to map' button and you will see that the map is now broken.
I've seen other people report issues with grey tiles, which typically can be resolved with a call to:
map.invalidateSize()
Unfortunately this does not resolve my issue. I'm pretty much a newb, but I think the problem is that when the modal opens, the invalidateSize() method in the leaflet source code is run, since the map div is not visible, the 'size' gets set to x:0, y:0 which ends up breaking the map when I transition back to the original state.
I'm not really sure where to go from here. Perhaps I can use JS to dynamically resize the div and trick leaflet into thinking a resize event has occurred? How would I do this? Any other thoughts?
Thanks!
I have a basic plunker which shows the problem: http://plnkr.co/edit/L3rhEIdrnTucG0M7yGhO?p=preview. When you click on the button the first element is shown/hidden with a bouncy animation. This works fine, but the problem is that the items below it just jump to the new place which is quite ugly and jarring.
So, if you click on the button, item One slides away and then a second later items Two and Three jump up. I'd like everything to slide up while item One slides away. How can this be done? Do I need to drop animate.css and write my own custom animations? How would that work? (I don't really care about the bouncy animation, it should just slide away / back into view.)
The current bouncy animation that you have is using a transform property which isn't going to effect sibling elements. If you did something like animate the margin, other elements would move as well.
You could either change the animation method on your target element, or leave it and additionally animate the target's adjacent sibling. I modified your Plunker demonstrating the latter:
http://plnkr.co/edit/hMaPgRDYC8Z0EeCs6SHQ?p=preview
*This also demonstrations using transitions on the hide and keyframes on the show.
To select the adjacent sibling next to the one being effected by ng-hide, make a css selector with the + symbol:
.item.ng-hide-add + .item {...}
Then by transitioning/animating margin-top, the remaining item elements will get pushed around too.