Portfolio Page to Carousel v1

Description

• turn Portfolio Page to Carousel, with infinite scroll + adjacent slides
• support dots/arrow pagination
• send me a coffee if it is useful for you

#1. Install Code

First, make sure you use Portfolio Grid Simple

Next, click on Gear icon on Portfolio Page

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 portfolioGrid = document.querySelector('#gridThumbs.portfolio-grid-basic');
  if (!portfolioGrid) return;
  
  const carouselWrapper = document.createElement('div');
  carouselWrapper.className = 'splide-carousel-wrapper';
  carouselWrapper.innerHTML = `
    <div class="splide" id="portfolio-carousel">
      <div class="splide__track">
        <ul class="splide__list"></ul>
      </div>
    </div>
  `;
  
  portfolioGrid.parentNode.insertBefore(carouselWrapper, portfolioGrid);
  
  const items = portfolioGrid.querySelectorAll('.grid-item');
  const splideList = carouselWrapper.querySelector('.splide__list');
  
  items.forEach(item => {
    const img = item.querySelector('.grid-image img');
    const title = item.querySelector('.portfolio-title');
    const link = item.getAttribute('href');
    
    const slide = document.createElement('li');
    slide.className = 'splide__slide';
    
    const slideContent = document.createElement('div');
    slideContent.innerHTML = `
      <a href="${link}" class="slide-link">
        <img src="${img.src}" 
             srcset="${img.srcset}" 
             alt="${img.alt}" 
             class="slide-image"
             loading="lazy">
        <div class="slide-caption">
          <strong>${title.textContent}</strong>
        </div>
      </a>
    `;
    
    slide.appendChild(slideContent);
    splideList.appendChild(slide);
  });
  
  new Splide('#portfolio-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>
#gridThumbs.portfolio-grid-basic{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-link{display:block;text-decoration:none;color:inherit}.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;font-size:1.2rem}.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}} .splide__arrows{padding:unset!important;top:50%!important}.splide-carousel-wrapper{margin-bottom:30px;margin-top:30px}
</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;
}