While browsing through different carousel designs online, I stumbled upon one with amazing transitions that caught my eye. I thought it would be a great addition to a project I am currently working on:
If you want to check out the code, here's the link: https://codepen.io/joshrodgers/pen/MWBPXBx
However, I noticed that the responsiveness of the design needed some adjustments, especially for smaller screens like phones. Splitting the content into left and right sections didn't seem to work well on such devices; it made the text almost unreadable. To address this, I decided to remove the right-side content altogether.
After implementing this change, everything looked as expected except for one issue...
On the previous version of the carousel, there was a vertical paging feature located on the right side. Clicking on the next or previous circles would rotate the slideshow accordingly. On larger screens (above 900px), the paging area remained on top of the rotating images, which resulted in a visually appealing transition effect. However, when viewed on smaller screens like an iPhone, the images seemed to rotate on top of the paging area before reappearing again.
I believe this problem can be easily resolved with a simple tweak. Is there a way to ensure that the paging area stays on top while the images rotate smoothly through both desktop and mobile screens?
This issue is also present in the original version of the carousel, so I'm not sure how to go about fixing it.
Despite setting the paging area's z-index to 1, the images still appear on top. I even attempted assigning a higher value like z-index: 1000, but that did not yield any results.
If anyone has any suggestions or solutions to this problem, I would greatly appreciate it.
Thank you,
Josh