Carousel Style 01

Description

• turn list section to Carousel, with infinite scroll + adjacent slides
• support dots/arrow pagination
• support caption under image
• view demo – password: abc
• send me a coffee if it is useful for you

#1. Install Code

First, you need to add a section > Choose Team > Choose section with (i) icon

Make sure you set Simple List design

Remember to add your desired image, text

Next, hover on Page > Click Gear icon

Click Advanced > Paste this code

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/css/splide.min.css">
<script src="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
  const listContainer = document.querySelector('.user-items-list-simple');
  if (!listContainer) return;
  
  const carouselWrapper = document.createElement('div');
  carouselWrapper.className = 'splide-carousel-wrapper';
  carouselWrapper.innerHTML = `
    <div class="splide" id="fish-carousel">
      <div class="splide__track">
        <ul class="splide__list"></ul>
      </div>
    </div>
  `;
  
  listContainer.parentNode.insertBefore(carouselWrapper, listContainer);
  
  const items = listContainer.querySelectorAll('.list-item');
  const splideList = carouselWrapper.querySelector('.splide__list');
  
  items.forEach(item => {
    const img = item.querySelector('.list-image');
    const description = item.querySelector('.list-item-content__description');
    
    const slide = document.createElement('li');
    slide.className = 'splide__slide';
    
    const slideContent = document.createElement('div');
    slideContent.innerHTML = `
      <img src="${img.src}" 
           srcset="${img.srcset}" 
           alt="${img.alt}" 
           class="slide-image"
           loading="lazy">
      <div class="slide-caption">
        ${description.innerHTML}
      </div>
    `;
    
    slide.appendChild(slideContent);
    splideList.appendChild(slide);
  });
  
  new Splide('#fish-carousel', {
    type: 'loop',
    perPage: 1,
    perMove: 1,
    focus: 'center',
    gap: '2rem',
    padding: { left: '25%', right: '25%' },
    arrows: true,
    pagination: false,
    breakpoints: {
      1024: {
        padding: { left: '20%', right: '20%' },
        gap: '1.5rem',
      },
      767: {
        padding: { left: '15%', right: '15%' },
        gap: '1rem',
      }
    }
  }).mount();
});
</script>
<style>
section[id*="spile"] .user-items-list-simple{display:none!important}.splide-carousel-wrapper{width:100%;margin:0 auto}.splide__slide{opacity:.4;transition:opacity 0.3s ease}.splide__slide.is-active{opacity:1}.slide-image{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:8px}.slide-caption{margin-top:20px;padding:0 20px;text-align:center;opacity:0;transition:opacity 0.3s ease}.splide__slide.is-active .slide-caption{opacity:1}.slide-caption strong{display:block;margin-bottom:10px;font-size:1.2rem}.slide-caption p{font-size:.9rem;line-height:1.6}.splide__arrows{position:absolute;top:0;left:0;right:0;height:0;padding-bottom:75%;pointer-events:none}.splide__arrow{background:rgb(0 0 0 / .5);width:50px;height:50px;top:50%;transform:translateY(-50%);pointer-events:auto}.splide__arrow--prev{left:10px}.splide__arrow--next{right:10px}.splide__arrow{background-color:#fff!important;opacity:1!important}.splide__pagination{bottom:-40px}@media (max-width:767px){.splide-carousel-wrapper{padding:20px 10px}.slide-caption{padding:0 10px}.splide__arrow{width:40px;height:40px}}
</style>

#2. Customize

If you need more support, you can email me.

#2.1. To remove image round corners, use this to Custom CSS

li.splide__slide img {
    border-radius: 0px !important;
}

#2.2. To change image size, use this to Custom CSS

li.splide__slide img {
    aspect-ratio: 3 / 5 !important;
}