Event Carousel

Description

• event carousel with date (left), event title, event excerpt, button (right), active item in middle
• view demo – password: abc
• buy me a coffee

#1. Install Code

#1.1. First, make sure you use Summary Block Carousel

#1.2. Enable these options

and this

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

#1.4. at Design > Anchor Link > enter word: event-carousel

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

#1.6. Click Advanced > Paste this code

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

<!-- 08.26c21v8 Event Carousel -->
<script>
window.EC_CONFIG = {
  scope: 'section[id*="event-carousel"]',
  mobileBreakpoint: 767,
  mobileSingle: true,
  arrowGap: 24,
  activeColor: '#111111',
  inactiveColor: '#bbbbbb',
  button: {
    text: 'BOOK NOW',
    textSize: '10px',
    padding: '1px 16px',
    borderColor: '#111111',
    textColor: '#111111',
    backgroundColor: 'transparent',
    spaceAbove: '8px'
  }
};
</script>
<script src="https://code.beaverhero.com/summaryblockcarousel/0826c21v8eventcarousel.js"></script>

#2. Customize

#2.1. To change button text, change line 11

text: 'BOOK NOW',

#2.2. To change button style, change line 12 – 17

textSize: '10px',
padding: '1px 16px',
borderColor: '#111111',
textColor: '#111111',
backgroundColor: 'transparent',
spaceAbove: '8px'

#2.3. 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 extra Markdown block under Summary Block

Paste this code into Markdown

<script>
window.EC_CONFIG = {
  scope: 'section[id*="event-carousel"]',
  mobileBreakpoint: 767,
  mobileSingle: true,
  arrowGap: 24,
  activeColor: '#111111',
  inactiveColor: '#bbbbbb',
  button: {
    text: 'BOOK NOW',
    textSize: '10px',
    padding: '1px 16px',
    borderColor: '#111111',
    textColor: '#111111',
    backgroundColor: 'transparent',
    spaceAbove: '8px'
  }
};
</script>
<script src="https://code.beaverhero.com/summaryblockcarousel/0826c21v8eventcarousel.js"></script>