Attempting to create a unique swiper slider using CSS, here is what has been accomplished so far in terms of HTML:
<section id="lakeSlider" class="carousel vcenter-item py-5">
// More HTML code here
</section>
CSS Styles:
/* lakeSlider styles */
#lakeSlider .carousel {
width: 100%;
padding: 30px;
// Additional styling properties
}
// More CSS classes and rules here
View image here. Current behavior described as follows: Hovering on any card causes elements to move. Desired behavior outlined below.
Desired Behavior:
- Hovering on first two elements moves right elements to the right 100px. *Middle element hover results in left elements moving left 100px, right elements moving right 100px. *Hovering on last two elements shifts left elements to the left 100px. Thank you for your assistance and patience.
An attempt was made to customize the CSS by altering this line:
@media (min-width:960px) {
#lakeSlider .carousel-item:hover~.carousel-item {
-webkit-transform: translate3d(100px, 0, 0);
transform: translate3d(100px, 0, 0);
}
Adjustment made but did not yield desired result. Need further guidance to achieve intended functionality.