Summary Block for Portfolio

To achieve Summary Block for Portfolio, you can do these. This will support Carousel only. And you will need to use plugin.

#1. First, find Portfolio Page URL.

In my example, it is: /project

#2. Next, edit page where you will place Summary Block > Add a Code Block > Paste this code.

<div data-wm-plugin="collection-carousel"
  data-source="/project"
  data-pagination="false"
></div>

#3. Install this plugin.

Plugin will give you some code to add to Code Injection > Header.

and Footer

#4. Result

#5. Customize

To make it Infinite Scroll, you can add this syntax into the Code Block.

data-loop="true"

To make Carousel autoscroll, add this syntax

data-autoplay="3000"

if you need to make it autoscroll continuously, use this code under Plugin code in Code Injection > Footer.

<script>
window.addEventListener('load', function() {
 const wrapper = document.querySelector('.swiper-wrapper')
 const slides = Array.from(wrapper.children)
 
 for(let i = 0; i < 20; i++) {
   slides.forEach(slide => {
     wrapper.appendChild(slide.cloneNode(true)) 
   })
 }
 const swiper = document.querySelector('.swiper')
 swiper.classList.add('infinite-scroll')
})
</script>
<style>
.infinite-scroll {
 overflow: hidden; 
 position: relative;
 width: 100%;
}
.infinite-scroll .swiper-wrapper {
 display: flex;
 width: max-content;
}
.infinite-scroll .swiper-slide {
 flex-shrink: 0;
}
.infinite-scroll .swiper-wrapper {
 animation: slideLeft 100s linear infinite;
}
@keyframes slideLeft {
 0% {
   transform: translate3d(0, 0, 0);
 }
 100% {
   transform: translate3d(calc(-50%), 0, 0);
 }
}
</style>

1 Like