Slider in Carousel

Description

08.26c25v8 Slider in Carousel

#1. Install Code

#1.1. Make sure you use Carousel

08.26c25v8 Slider in Carousel

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

#image01-image02-image03#

08.26c25v8 Slider in Carousel

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

08.26c25v8 Slider in Carousel

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

08.26c25v8 Slider in Carousel

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

08.26c25v8 Slider in Carousel

#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>

08.26c25v8 Slider in Carousel

#2. Customize

#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,

#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 edit current page (page where you use Carousel) > Add a Block > Choose Markdown

04.26c10v2 Header Sound Icon

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>

08.26c25v8 Slider in Carousel

Buy me a coffee