Using Client Side Routing completely breaks my carousel CSS
- Vorherrschende Sprache
- JavaScript
- Sterne
- 11.9k
- Forks
- 2.1k
- PR-Merge-Kennzahlen
- Keine gemergten PRs in 30 T.
Beschreibung
I'm unfortunately unable to replicate this in Codesandbox because I am using Next.js for SSR and client-side rendering, but hoping someone might have insight into what I'm running into.
So far on one of my pages, on initial page load, everything looks great. However, on another page where the carousel is the exact same component, the prev and next arrows are somehow no longer to the left and right of the carousel, but to the top and bottom. Then when I route back to the page that was originally rendered properly, the nextArrow is rendered entirely off the page.
I'm noticing that on the page where the arrows are are the bottom/top instead of left to right, they lack all this default CSS, it just never makes it to the page:
```
.slick-next, .slick-prev {
font-size: 0;
line-height: 0;
top: 50%;
width: 20px;
height: 20px;
-webkit-transform: translate(0,-50%);
-ms-transform: translate(0,-50%);
transform: translate(0,-50%);
cursor: pointer;
color: transparent;
border: none;
outline: 0;
background: 0 0;
```
Another thing I'm noticing is that I have a CSS file that I use to override the carousel's default CSS. When I client side route, some of my CSS rules are overwritten again while some of remain.
I have attached a gif representing the behavior I'm seeing. Thanks a ton for any insight anyone might have.
My carousel code:
```
const SvgWrapper = styled.div`
border-radius: 50px;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.7);
cursor: pointer;
padding-right: ${props => (props.left ? '2px' : 'none')};
padding-left: ${props => (props.right ? '2px' : 'none')};
@media (min-width: 1024px) {
width: 52px;
height: 52px;
}
`;
const StyledFontAwesomeIcon = styled(FontAwesomeIcon)`
font-size: 23px;
color: white;
opacity: 1;
z-index: 1;
@media (min-width: 1024px) {
font-size: 35px;
}
`;
class VideoCarousel extends Component {
state = { currentSlide: 0 };
render() {
const settings = {
slidesToShow: 5 + 0.05,
slidesToScroll: 5,
infinite: false,
lazyLoad: true,
afterChange: current => this.setState(state => ({ currentSlide: current })),
prevArrow:
this.state.currentSlide === 0 ? (
) : (
),
nextArrow:
this.state.currentSlide - 1 >= this.props.videos.length - 5 ? null : (
),
responsive: [
{
breakpoint: 1440,
settings: {
slidesToShow: 4 + 0.05,
slidesToScroll: 4,
nextArrow:
this.state.currentSlide - 1 >= this.props.videos.length - 4 ? null : (
)
}
},
{
breakpoint: 1024,
settings: {
slidesToShow: 3 + 0.05,
slidesToScroll: 3,
nextArrow:
this.state.currentSlide - 1 >= this.props.videos.length - 3 ? null : (
)
}
}
]
};
return (
);
}
}
```
and my styles.css
```
.slick-next {
right: 40px;
}
.slick-next, .slick-prev {
z-index: 10000;
}
.slick-next:before, .slick-prev:before {
display: none;
}
```
Beitragsleitfaden
Bewertung
Dieses Issue wurde noch nicht bewertet.