I have problem with slider in react.
In line 32, I have hover background for each slide, but hover working only on last slide, why?
- url for stackblitz
I trying everything, I spend on this 3 hours, what is wrong?
I found the problem. As I can see, you built a custom slider which is a good thing. But here, the other slides are actually layered relatively on top of each other. Which means the last slide will always be at the top of the stack even if the opacity is 0. I thought of using z-index to control it but I think this is even cleaner:
<div key={key} className={`absolute inset-0 transition duration-500 ease-in-out ${activeIndex === parseInt(key) ? 'visible opacity-100' : 'invisible opacity-0'}`}>
I modified Line 23 in SliderContent.jsx such that, if the current block is not active slide, add Tailwind's 'invisible' class so it pops it from the top of layer and user can hover successfully.
Tried it, it worked. Goodluck :)
Related
I am a beginner in coding and as a challenge, I decided to make my own portfolio website on react.js + tailwind without the use of extra plugins. (I know, I know, as I figured out later, it was not my best idea)
The main complexity was around making a background behind the slider to look similar to the central slide, and to make a smooth transition.
After hosting the website, I found a glitch that is only visible on mobile browsers. Basically, every time when I change a slide, in the moment of changing State, it flicks the next slide in the array of slides for a millisecond.
I was able to see the same issue in dev tools but does not work every time.
100% visible only on mobile browsers
Small clarification: the slider is functioning by rotating elements within the array by the method Splice. So elements [1],[2], and [3] are always visible on the desktop version while elements [0] and [4] exist but have zero opacity (it is made for the sake of the smooth background transitioning).
The glitch itself: On clicking 'left' the image from element [1] is becoming the central image [2] and it flicks somehow the image from [0] for a millisecond. The same behavior is related to the right image from element[3] and background images. Though, it does not affect the left visible slide [1], because its predecessor is only becoming visible after State change.
My best assumption is that the issue is related to the component "Portfolio" 126 line in the code, but I can not find any other solutions which work.
const onChangeSlide = (direction) => {
if (direction === "left") {
setTimeout(() => {
slides.splice(0, 0, slides.splice(length-1, 1)[0]);
setSlider((prev) => ({...prev , ...slides}));
},700);
You can see the hosted website here > https://Othary.github.io/ArtPhoto
Link to the code here > https://github.com/Othary/PortfolioTest.git
GIF of the issue > https://1drv.ms/u/s!ApRsK-vfrh8MrY9guwisAKJl5bJAfA?e=vkjdGX
I will appreciate any help. Thank you in advance.
Regarding the first issue I checked all images, and their order, and removed StrictMode. No luck for me. I can not grasp how the slider shows the element which supposed to be visible only on the next click. And it is not visible on the fast internet desktop version. As stated above, my best guess is that it is related to the way how I change State.
UPDATE: It looks like after scrolling through all carousels BOTH left and right the flick is disappearing.
So, I assume, it somehow connected with the browser's cache, but I don't understand why it needs to be scrolled in both directions first before the issues disappear. All files are supposed to be preloaded after the first scroll in either direction, not both.
Please help🙌
I'm using react-big-calendar with react-sidebar and if the sidebar opens, all the area is covered by overlay but some elements are visible on the top.
What can be the problem?
P.S: I've also given the z-index to both but nothing worked for me!
react-big-calendar with react-sidebar
I don't know the particulars of react-sidebar, but it's definitely a z-index issue. Does react-sidebar provide a Portal option for it's overlay (I'm not seeing one)? RBC is dynamically writing out the events to the page, and using 'auto' z-index, so if your overlay is defined first (like the sidebar is on the left, and calendar on the right), then that's what's happening.
I have a layout which uses flex to resize its internal components to the window size.
Part of the left column has either some "control buttons" or an "event log" of which visibility can be toggled.
I'd like to animate that show/hide so the log messages div slides out from the right. When the log messages div is hidden, it will slide back towards the right.
The system is using AngularJS (not "Angular").
The majority of examples online show how to animate opacity to fade in and out and the few that show sliding animation use position: relative wrapping position: absolute elements. However, using absolute wrapping relative messes up the flex layout: wrong elements are visible and resizing doesn't work properly.
Any idea on how to achieve that effect?
Here is a fiddle showing the layout.
Thanks!
I have two divs one on top of the other.
The top div is revealed with ngAnimate and pushes the second div down.
I want to use a translateY animation to reveal the top div because it looks good.
#keyframes enter_not_smooth {
from {transform: translateY(-100px);} to {transform: translateX(0px);}
}
#keyframes leave_not_smooth {
from {transform: translateY(0px);} to {transform: translateY(-100px);}
}
Problem: The bottom div does not move smoothly as the top div is revealed, it instead jumps to it's final position.
If I use a height animation to reveal the top div the bottom div moves smoothly as the top div is revealed.
#keyframes enter_smooth {
from {height: 0px;} to {height: 100px;}
}
#keyframes leave_smooth {
from {height: 100px;} to {height: 0px;}
}
Please see this jsfiddle if you need clarification https://jsfiddle.net/9bz4Lwxa/105/
Question: Is there any way I can achieve a smooth animation using the translateY property or another property that will achieve a similar reveal animation where the top div does not grow in height but is full sized and just pushes the bottom div out of the way?
Thank You.
This is a tough one and something I've spent hours and hours and hours trying to accomplish. The only working solution I've come up with is really complicated and not worth all the extra code.
The problem is that when you use transform to animate an element, its bounding box remains static (seemingly behind the DOM scenes) and will not animate as to not affect any sibling elements. For reference, I'd read up on: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
As an alternative to animating height/width/etc (because it causes repaints/reflows in the browser) I've resorted to using transform animations that simply feel better given the predicament.
I've created an example based on your fiddle here:
https://jsfiddle.net/tommywhitehead/5q6wec92/1/
Note: It looks like you might be injecting ngAnimate in a non-traditional way so it's not reading the transition timing function (what places .ng-enter and .ng-enter-active at the right times) but I think this should give you the right idea.
I hope the big vendors can fix this somehow because this has been a huge issue for many devs.
Hope that helps!
Having a very strange IE7 issue that I cannot find a fix for. I have created a slideshow with a control nav absolutely positioned at the bottom of it. The nav sits over the slideshows bottom border.
In ie7, hovering over it cause the nav to jump behind the border and hence the top of it disappears. I don't have a clue what is happening and cannot find solutions elsewhere. Here is a link demonstrating the issue:
http://rivaslider.matthewruddy.com/
Anyone have a solution? Pulling my hair out.