Summary Block Left Image Right Text Background

Description

Summary Block with Left Image – Right Text Background (white background), you can click arrows to slide to other items
view demo – password: abc
buy me a coffee

#1. Install Code

#1.1. First add a Summary Block Carousel

#1.2. Next, connect a Blog Page

#1.2-1. Make sure Blog Page has Title/Excerpt on each item

#1.3. Next, enable Title, Excerpt, Featured image

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

#1.5. at Design > Anchor Link > enter word: sb-left-right

#1.6. Hover on Page where you use Summary Carousel > Click Gear icon

#1.7. Click Advanced > Paste this code

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

<!-- 08.26c28v2 Summary Block Left Image Right Text Background -->
<script>
window.SBLRConfig = {
  scope: 'section[id*="sb-left-right"]',
  loop: true,
  autoplay: false,
  autoplayDelay: 4000,
  pauseOnHover: true,
  swipe: true,
  swipeThreshold: 50,
  linkEnabled: false,
  transitionSpeed: 450,
  minHeight: '420px',
  imageWidth: '30%',
  textBackground: '#ffffff',
  textPadding: '40px',
  textAlign: 'left',
  titleSize: '30px',
  titleColor: '#111111',
  titleSpaceBelow: '18px',
  excerptSize: '15px',
  excerptColor: '#333333',
  excerptLineHeight: 1.6,
  excerptMaxLines: 0,
  arrowSpace: '56px',
  arrowOffset: '0px',
  arrowSize: '34px',
  arrowColor: '#111111',
  mobileBreakpoint: 767,
  mobileImageRatio: '4/3',
  mobileMinHeight: 'auto',
  mobileTextPadding: '24px',
  mobileArrowSpace: '30px',
  mobileArrowOffset: '0px',
  mobileTitleSize: '22px'
};
</script>
<script src="https://code.beaverhero.com/summaryblockcarousel/0826c28v2leftimagerighttextbg.js"></script>

#2. Customize

#2.1. To enable Title link, change line 11

linkEnabled: false,

linkEnabled: true,

#2.2. To enable autoscroll, change line 05, 06

false = disable
true = enable

autoplay: false,
autoplayDelay: 4000,

#2.3. To change image width, change line 14

imageWidth: '30%',

#2.4. To change text style (title, excerpt) change line 15 – 24

textBackground: '#ffffff',
 textPadding: '40px',
 textAlign: 'left',
 titleSize: '30px',
 titleColor: '#111111',
 titleSpaceBelow: '18px',
 excerptSize: '15px',
 excerptColor: '#333333',
 excerptLineHeight: 1.6,
 excerptMaxLines: 0,

#2.5. To change arrow style, change line 25 – 28

arrowSpace: '56px',
  arrowOffset: '0px',
  arrowSize: '34px',
  arrowColor: '#111111',

and line 33 – 34

mobileArrowSpace: '30px',
mobileArrowOffset: '0px'

#2.6. If you need to tweak more you can use this AI Assistant (designed for Squarespace sites)

#3. Other

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

Add this code into Markdown

<script>
window.SBLRConfig = {
  scope: 'section[id*="sb-left-right"]',
  loop: true,
  autoplay: false,
  autoplayDelay: 4000,
  pauseOnHover: true,
  swipe: true,
  swipeThreshold: 50,
  linkEnabled: false,
  transitionSpeed: 450,
  minHeight: '420px',
  imageWidth: '30%',
  textBackground: '#ffffff',
  textPadding: '40px',
  textAlign: 'left',
  titleSize: '30px',
  titleColor: '#111111',
  titleSpaceBelow: '18px',
  excerptSize: '15px',
  excerptColor: '#333333',
  excerptLineHeight: 1.6,
  excerptMaxLines: 0,
  arrowSpace: '56px',
  arrowOffset: '0px',
  arrowSize: '34px',
  arrowColor: '#111111',
  mobileBreakpoint: 767,
  mobileImageRatio: '4/3',
  mobileMinHeight: 'auto',
  mobileTextPadding: '24px',
  mobileArrowSpace: '30px',
  mobileArrowOffset: '0px',
  mobileTitleSize: '22px'
};
</script>
<script src="https://code.beaverhero.com/summaryblockcarousel/0826c28v2leftimagerighttextbg.js"></script>