Description
- adding slideshow inside carousel
- view demo – password: abc
- buy me a coffee

#1. Install Code
#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. 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
![]()
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>
