Squarespace 3 Columns Carousel (Focus on Center Slide)

[tuanphan]

Description: Carousel with 3 Columns, Focus on Center Slide. Support: autoscroll, drag scroll, trackpad scrolling, clickable image, title, description, button..

#1. Install Code

#1.1. First add Section > Choose Team > Choose Section with (i) icon

#1.2. Hover on top right of section > Click EDIT CONTENT

#1.3. at Design > Choose Carousel

#1.4. at Elements > enable any elements what you want. In my case, we will enable Section Title, Item Image, Item button only

#1.5. at Content, add your desired text/image

To make image clickable, you can add URL to Button

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

#1.7. at Format > Anchor Link, enter word: carousel-center-slide

#1.8. Hover on Page where you use Carousel section > Click Gear icon

#1.9. Click Advanced > Paste this code

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

<!-- 07.26c05v3 3 Columns Carousel (Focus on Center Slide) -->
<script>
window.CenterSlideConfig = {
  sectionIdKeyword: "center-slide",
  slidesPerView: 2,
  slidesPerViewMobile: 1.4,
  mobileBreakpoint: 768,
  loop: true,
  speed: 600,
  autoplay: { enabled: false, delay: 4000, pauseOnHover: true },
  mousewheel: true,
  keyboard: true,
  drag: true,
  imageLink: true,
  titleLink: false,
  hideButton: true,
  arrowWidth: "44px",
  arrowColor: "",
  maxWidth: "",
  paddingX: ""
};
</script>
<script src="https://code.beaverhero.com/list/0726c05v3carousel3columnsfocuscenter.js"></script>

#2.1. To enable Autoscroll, change Line 10

autoplay: { enabled: false, delay: 4000, pauseOnHover: true },

to

autoplay: { enabled: true, delay: 3000, pauseOnHover: true },

#2.2. To change space between Images, change this option

#2.3. To change Image size, change this option

#2.4. To move Arrows from under center Image to left/right of Carousel, you can change this option

#3.1. If you use Personal/Basic Plan and your plan doesn’t support Injection, you can edit current page (page where you use Carousel) > Add a Markdown Block

Add this code into Markdown

<script>
window.CenterSlideConfig = {
  sectionIdKeyword: "center-slide",
  slidesPerView: 2,
  slidesPerViewMobile: 1.4,
  mobileBreakpoint: 768,
  loop: true,
  speed: 600,
  autoplay: { enabled: false, delay: 4000, pauseOnHover: true },
  mousewheel: true,
  keyboard: true,
  drag: true,
  imageLink: true,
  titleLink: false,
  hideButton: true,
  arrowWidth: "44px",
  arrowColor: "",
  maxWidth: "",
  paddingX: ""
};
</script>
<script src="https://code.beaverhero.com/list/0726c05v3carousel3columnsfocuscenter.js"></script>