Currently in the process of developing a website, I have implemented a jquery-based carousel on the homepage sourced from here. However, substantial modifications were made to tailor its appearance specifically for the site. The issue at hand is that I have manually specified the positions of each carousel item in CSS to ensure they are centered properly around a circular background for all screen resolutions. For example:
@media (device-width: 1680px) {
.flipster-carousel .flip-past {
-webkit-transform: translateX(-22%) translateY(-15%) translateZ(0) scale(0.30);
-moz-transform: translateX(-22%) translateY(-15%) translateZ(0) scale(0.30);
-o-transform: translateX(-22%) translateY(-15%) translateZ(0) scale(0.30);
-ms-transform: translateX(-22%) translateY(-15%) translateZ(0) scale(0.30);
transform: translateX(-22%) translateY(-15%) translateZ(0) scale(0.30);
}
}
This approach feels like a bit of a hack and certainly not the most optimal solution. The major drawback I've encountered is that when the browser window is not at full screen, the carousel elements become misaligned and off-center compared to the rest of the site. It's imperative that I rectify this issue so that the carousel remains centered with the page content even when the browser window is resized. Unfortunately, I'm unsure where to start with coding a solution for this problem. Could someone provide guidance or offer advice on how to proceed? The website I'm currently working on can be found here. Thank you!