Text Testimonial Carousel in Squarespace with Text Block

Pro Tips Other Tips
1

To add a text testimonial carousel in Squarespace with Text Block only, like this.

image
image1056×337 14.7 KB

#1.1. First, you need to add some Text Blocks, like this (here I use 4 Text Blocks)

image
image700×479 49.3 KB

#1.2. Hover on top right of section > Click Edit Section

image
image496×427 42.9 KB

at Anchor Link, enter: text-carousel

text-carousel

image
image455×700 76.7 KB

#1.3. Hover on page where you added Text Blocks > Click Gear icon

image
image505×416 58.5 KB

Click Advanced > Paste this code

If you don’t want to use complex code, you can also use this free tool to add testimonial carousels

<!-- 03.26c02v3 - Text Carousel -->
<script>
var defined_textCarousel = {
  desktop: 1,
  mobile: 1,
  arrows: true,
  dots: false,
  autoplay: true,
  autoplayDelay: 4000,
  loop: true,
  allowTouchMove: true,
  mousewheel: true,
  keyboard: true,
  effect: 'fade'
  // effect options: 'slide', 'fade', 'cube', 'coverflow', 'flip', 'cards', 'creative'
};
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="https://code.beaverhero.com/textblock/0326c02v3textcarousel.js"></script>

image
image700×519 36 KB

#1.4. Use this code to Custom CSS

/* 03.26c02v3 */
section[id*="text-carousel"] {.html-block {opacity: 0;}.swiper-wrapper .html-block {opacity: 1;}.tc-swiper {width: 100%;overflow: hidden;--swiper-navigation-size: 20px !important;}.tc-swiper .swiper-slide {height: auto;display: flex;align-items: center;}.tc-swiper .swiper-slide .html-block {width: 100%;text-align: center;padding-left: 3vw;padding-right: 3vw;}.tc-swiper .swiper-button-next, .tc-swiper .swiper-button-prev {color: var(--primaryButtonBackgroundColor, #000);} .tc-swiper .swiper-pagination-bullet-active {background: var(--primaryButtonBackgroundColor, #000);}}

image
image406×700 51.6 KB

#2. Customize

You can see all options here

var defined_textCarousel = {
  desktop: 1,
  mobile: 1,
  arrows: true,
  dots: false,
  autoplay: true,
  autoplayDelay: 4000,
  loop: true,
  allowTouchMove: true,
  mousewheel: true,
  keyboard: true,
  effect: 'fade'
  // effect options: 'slide', 'fade', 'cube', 'coverflow', 'flip', 'cards', 'creative'
};
1 Like