Summary Carousel Coverflow Portfolio

Description

• adding Summary Block Carousel Portfolio with large item (center) and small items (left/right), autoscroll feature
• view demo – password: abc
• buy me a coffee

#1. Install Code

#1.1. First, you need to find Portfolio Page URL Slug

In my example, it is /portfolio2

#1.2. Make sure you added Summary Block (you can connect with any pages, this is not important)

#1.3. Make sure you choose Carousel

#1.4. Hover on top right of section > Click EDIT SECTION

#1.5. at Design > Anchor Link > Enter word with format: summary-portfoliopageurlslug

If Portfolio Page URL is /portfolio2 – we will enter this: summary-portfolio2

If Portfolio Page URL is /work – we will enter: summary-work

#1.7. Hover on Page where you added Summary Block > Click Gear icon

Click Advanced > Paste this code

• If you use Personal/Basic Plan and your plan doesn’t support Injection, see #3.1

<!-- 06.26c01v3(v2) Summary Carousel Coverflow Portfolio -->
<script>
  window.ScCarouselConfig = {
    syncWithPortfolio: true,
    imageFormat: '1000w',
    mobileBreakpoint: 767,
    singleColumnMobile: true,
    mobileTextPadding: '4%',
    transitionMs: 450,
    centerScale: 1,
    sideScale: 0.72,
    arrowSize: 60,
    arrowColor: '#1a1a1a',
    arrowStrokeWidth: 1.5,
    navMarginTop: 16,
    autoplay: true,
    autoplayDelayMs: 3000,
    pauseOnHover: true
  };
</script>
<script src="https://code.beaverhero.com/summaryblock/0626c01v3v2summarycarouselcoverflowportfolio.js"></script>

#1.8. Final, use this code to Custom CSS

/* 06.26c01v3(v2) Summary Carousel Coverflow Portfolio */
  section[id*="summary-"] {.summary-block-header {display: none;}.summary-item-list{opacity:0;}.summary-block-wrapper[data-design="carousel"].sc-ready .summary-item-list{opacity:1;transition:opacity .3s ease;}.sc-spinner{position:absolute;top:50%;left:50%;width:36px;height:36px;margin:-18px 0 0 -18px;border:3px solid rgba(0,0,0,.15);border-top-color:rgba(0,0,0,.6);border-radius:50%;animation:sc-spin .8s linear infinite;z-index:2;pointer-events:none;}.summary-block-wrapper[data-design="carousel"].sc-ready .sc-spinner{opacity:0;transition:opacity .2s ease;}
  @keyframes sc-spin{to{transform:rotate(360deg);}}}

#2. Customize

#2.1. To change autoscroll speed, change Line 17

autoplayDelayMs: 3000,

#2.2. To disable autoscroll, change Line 16

autoplay: true,

to

autoplay: false,

#2.3. To change size of first – third items, change Line 11

sideScale: 0.72,

#2.4. To change style of arrows, change Line 12 to Line 14

arrowSize: 60,
arrowColor: '#1a1a1a',
arrowStrokeWidth: 1.5,

#2.5. To enable mobile layout same as desktop layout, change Line 17

singleColumnMobile: true,

to

singleColumnMobile: false,

#3. Other

#3.1. If you use Personal/Basic Plan and your plan doesn’t support Injection, you can add extra block under Summary Block

Choose Markdown

Paste this code into Markdown

<script>
  window.ScCarouselConfig = {
    syncWithPortfolio: true,
    imageFormat: '1000w',
    mobileBreakpoint: 767,
    singleColumnMobile: true,
    mobileTextPadding: '4%',
    transitionMs: 450,
    centerScale: 1,
    sideScale: 0.72,
    arrowSize: 60,
    arrowColor: '#1a1a1a',
    arrowStrokeWidth: 1.5,
    navMarginTop: 16,
    autoplay: true,
    autoplayDelayMs: 3000,
    pauseOnHover: true
  };
</script>
<script src="https://code.beaverhero.com/summaryblock/0626c01v3v2summarycarouselcoverflowportfolio.js"></script>