Web Pro Dragons

Internal Dev Library

Carousel with 50% hidden on first and last item

Text

Text

Text

Text

Text

Text

  1. Add class to carousel (e.g. partial-carousel)
  2. Add CSS below either on page or Elementor -> Custom CSS
				
					<style>
	.partial-carousel .swiper-wrapper {
    display: flex;
    gap: 0;
    padding-left: 50%;
    padding-right: 50%;
    transition: transform 0.3s ease;
}

.partial-carousel .swiper-slide {
    width: calc(100% - 50%);
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.partial-carousel .swiper-slide-active {
    opacity: 1;
}
</style>