Squarespace Slideshow inside Carousel

[tuanphan]

Description

• adding slideshow inside carousel
• view demo – password: abc

#1.1. Make sure you use Carousel

#1.2. In each item > edit Description > Enter text/image url with format like this

#image01-image02-image03#

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

#1.4. at Format > Anchor Link, enter word: slider-carousel

#1.5. Hover on Page where you use Carousel > 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.26c25v8 Slider in Carousel -->
<script>
window.SliderInCarouselConfig = {
  targetSelector: '[id*="slider-carousel"] .user-items-list-carousel', /* or .user-items-list-simple */
  effect: 'fade',
  speed: 600,
  loop: true,
  autoplay: false,
  autoplayDelay: 4000,
  pauseOnHover: true,
  enableArrows: true,
  enableDots: true,
  enableDrag: true
};
</script>
<script src="https://code.beaverhero.com/listcarousel/0826c25v8sliderincarousel.js"></script>

#2.1. To enable/disable autoscroll, change this line 08, 09

• true = enable
• false = disable

autoplay: false,
autoplayDelay: 4000,

#2.2. To enable dots/arrows navigation, change line 11, 12

• true = enable
• false = disable

enableArrows: true,
enableDots: true,

#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 Block > Choose Markdown

Add this code into Markdown

<script>
window.SliderInCarouselConfig = {
  targetSelector: '[id*="slider-carousel"] .user-items-list-carousel', /* or .user-items-list-simple */
  effect: 'fade',
  speed: 600,
  loop: true,
  autoplay: false,
  autoplayDelay: 4000,
  pauseOnHover: true,
  enableArrows: true,
  enableDots: true,
  enableDrag: true
};
</script>
<script src="https://code.beaverhero.com/listcarousel/0826c25v8sliderincarousel.js"></script>