Carousel with text

Hi there

I would like to create a carousel with text or a slider with quotes. How could I do that with Squarespace?

Thank you.

I found this package called Owl Carousel which does exactly what you (and both myself) want and it is very powerful. I'm having trouble setting it up and getting the jQuery files and code on square space to work though.

https://owlcarousel2.github.io/OwlCarousel2/

If anyone know how to set it up that would be amazing!

I copied it onto here so that lives forever, this is not my own work.

This works like a dream Super simple step by step process just for Squarespace!

http://www.muno.space/code-snippets/rotating-testimonials

First, from the Home menu your Squarespace site, click Settings → Advanced → Code Injection. Once on the Code Injection menu, paste the following code into the textbox titled Header:

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

The next thing we want to do is determine the page that we want to post the testimonials on. On the page you choose, click the settings icon and then switch to the Advanced tab. In the box entitled Page Header Code Injection, enter the following code:

<script src="//cdnjs.cloudflare.com/ajax/libs/ResponsiveSlides.js/1.53/responsiveslides.min.js"></script>
 <script type="text/javascript">
   $(document).ready(function() {
     $(".rslides").responsiveSlides({
       timeout: 5000,
       pager: true
     });
     $('.rslides_tabs li a').css('background-color', $('figcaption.source').css('color'));
     var elementHeights = $('.rslides li').map(function() {
       return $(this).height();
     }).get();
     var maxHeight = Math.max.apply(null, elementHeights);
     $('.rslides li').height(maxHeight);
   });
 </script> 

You can edit the above code to customize how your slider works. To change the time that each slide stays, increase or decrease the number next to timeout (measured in milliseconds). To remove the dots from under the screen, switch pager from true to false.

Once that is in, we will put in the Custom CSS. By putting the CSS, the slider will look right once we put our information in. To do this, head to the main menu, then go to Design → Custom CSS. In the box, paste in the following code:

.testimonialSlider {
   position: relative;
 }
 .rslides {
   position: relative;
   list-style: none;
   overflow: hidden;
   width: 100%;
   padding: 0;
   margin: 0;
   li {
     -webkit-backface-visibility: hidden;
     position: absolute;
     display: none;
     width: 100%;
     left: 0;
     top: 0;
     &:first-child {
       position: relative;
       display: block;
       float: left;
     }
   }
   img {
     display: block;
     height: auto;
     float: left;
     width: 100%;
     border: 0;
   }
 }
 .rslides_tabs {
     list-style: none;
     -webkit-margin-before: 0;
     -webkit-margin-after: 0;
     -webkit-padding-start: 0;
     padding: 0;
     text-align: center;
       li {
       display: inline;
       padding: 0 10px;
       a {
         text-indent: -9999px;
         overflow: hidden;
         -webkit-border-radius: 15px;
         -moz-border-radius: 15px;
         border-radius: 15px;
         background: #ccc;
         background: rgba(0,0,0, .2);
         display: inline-block;
         _display: block;
         -webkit-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
         -moz-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
         box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
         width: 6px;
         height: 6px;
       }
     }
     .rslides_here a {
       background-color: #222;
     }
   }

Now that the styling is in, all that is left is for you to enter your testimonials. First, create a code block. Using the code below, enter your testimonials in place of 'Your Text Here' and your sources in place of 'Your Source Here'. If you want to enter more than 4 testimonials, simply follow the pattern and copy and paste the information with the

<li></li>

tags (including the li). If you want to enter less, just delete the

<li>

sections that you are not using.

<div class="testimonialSlider">
     <ul class="rslides">
       <li>
         <div class="sqs-widget sqs-block-modelsync sqs-block-quote sqs-block quote-block">
           <div class="sqs-block-quote-content sqs-block-content">
             <figure>
               <blockquote>
                 <span>“</span>
                   Your Text Here
                 <span>”</span>
               </blockquote>
               <figcaption class="source">—
                 Your source here
               </figcaption>
             </figure>
           </div>
         </div>
       </li>
       <li>
         <div class="sqs-widget sqs-block-modelsync sqs-block-quote sqs-block quote-block">
           <div class="sqs-block-quote-content sqs-block-content">
             <figure>
               <blockquote>
                 <span>“</span>
                   Your Text Here
                 <span>”</span>
               </blockquote>
               <figcaption class="source">—
                 Your source here
               </figcaption>
             </figure>
           </div>
         </div>
       </li>
       <li>
         <div class="sqs-widget sqs-block-modelsync sqs-block-quote sqs-block quote-block">
           <div class="sqs-block-quote-content sqs-block-content">
             <figure>
               <blockquote>
                 <span>“</span>
                   Your Text Here
                 <span>”</span>
               </blockquote>
               <figcaption class="source">—
                 Your source here
               </figcaption>
             </figure>
           </div>
         </div>
       </li>
       <li>
         <div class="sqs-widget sqs-block-modelsync sqs-block-quote sqs-block quote-block">
           <div class="sqs-block-quote-content sqs-block-content">
             <figure>
               <blockquote>
                 <span>“</span>
                   Your Text Here
                 <span>”</span>
               </blockquote>
               <figcaption class="source">—
                 Your source here
               </figcaption>
             </figure>
           </div>
         </div>
       </li>
     </ul>
   </div>

Did this work @Squaresly? I'm having trouble installing it on the Pacific template. The first testimonial text appears, but the dots below do not, and there is no rotating animation.

@elliotw, it worked for me. The dots are there and the testimonials rotate beautifully.

Thank you so much! This was awesome! However, would love to know how to make a few tweaks:

• I want to create a slider with just text (no quotes), so I want to remove the quotes and the the source info (and the line underneath it). How?
• Could not find how to edit the font type and size (I'm new to coding).
• Is there a way to make the text actually slide? This fades from text to text.

Thanks!

hello friends Please check this out and you will find most of the answers from there . I had my issues resolved very easily.Try it now :

Hello,

I have to suggest you these peoples becuase they help me too.so please you can tryout this link :

and comment there so they help you

Thanks I also tried this and it works great on several of my pages, but for some reason the dots don't show up on my index page and the testimonials don't scroll. I can't figure out what I'm doing wrong. Does anyone else have this problem?

I'm using this successfully; however, I now seem to have a larger pad between the bottom edge of the text and the next section. I've been reading through cheat sheets to see how I can modify various lines of code but am not having luck. Any help anyone who can provide an answer to this problem would be appreciated. The buffer is present on all sections except the About Us page. Our website is here : https://my-pets-friend.com.

Here's a simpler solution:

1. Create a summary block linked to a "Blog" and set it to display 1 post at a time.

2. Now just make each testimonial be the title of a different blog post, and put the name of who wrote the testimonial as an excerpt.

3. Set the summary block to only display "Title" and "Excerpt." Turn off the "Thumbnail."

@sylvainamatoury

I used your code and it was fantastic thank you! 

I just had a few questions about altering it as it is leaving a large gap underneath the section, I also had to remove the pager as they were creating an even larger gap. I can't find anywhere on either the code injection or css where I can successfully fix the height of the section, and don't know whats pushing it down! 

also, is it possible to change the animation? I tried adding stuff but i couldnt get it to work. 

https://animate.style/

'slide in left' 

any help, much appreciated. 
 

On 4/30/2017 at 9:06 PM, TheGoodeApple said:

@elliotw, it worked for me. The dots are there and the testimonials rotate beautifully.

Did you encounter a spacing issue where there's too much padding below? 

thanks

On 12/16/2021 at 6:40 PM, daniellemoonlit said:

@sylvainamatoury

 

I used your code and it was fantastic thank you! 

 

I just had a few questions about altering it as it is leaving a large gap underneath the section, I also had to remove the pager as they were creating an even larger gap. I can't find anywhere on either the code injection or css where I can successfully fix the height of the section, and don't know whats pushing it down! 

 

also, is it possible to change the animation? I tried adding stuff but i couldnt get it to work. 

 

https://animate.style/

 

'slide in left' 

any help, much appreciated. 
 

Can you share link to page in screenshto? We can take a look

Hi, great code thanks for the upload. 
How do you change the font size of the text? 

 

On 3/7/2022 at 3:25 PM, tonton said:

Hi, great code thanks for the upload. 
How do you change the font size of the text? 

 

Can you share link to page where you added carousel? We can help easier