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>