CSS Testimonial slider with navigation for 7.0

Site URL: https://sanctuarymediagroup.squarespace.com/#testimonials

Hi there,

I have created a testimonial slider in 7.0 (Brine) with the testimonials set up in a hidden Blogs page and the code below.

Is there a way to change the navigation from the existing arrows at the top to a 'dots navigation' below the testimonials, which would make it easier for users to understand there is more than one testimonial.

This is the web address 
https://sanctuarymediagroup.squarespace.com/#testimonials
Password SMG

Many thanks!
 

********CSS********

#block-yui_3_17_2_1_1630433547364_2252 .summary-thumbnail {
  overflow: visible !important;
  border: none;
}
#block-yui_3_17_2_1_1630433547364_2252 .summary-item-list {
  pointer-events: none;
}
#block-yui_3_17_2_1_1630433547364_2252 .summary-item-list img {
  height: 150px !important;
  width: 150px !important;
}
#block-yui_3_17_2_1_1630433547364_2252 .summary-thumbnail-outer-container {
  height: 150px !important;
  width: 150px !important;
  margin: 0 auto;
}
#block-yui_3_17_2_1_1630433547364_2252 .summary-excerpt {
  margin-top: 30px !important;
}
#block-yui_3_17_2_1_1630433547364_2252 .summary-excerpt p {
  font-size: 24px !important;
  line-height: 1.6em !important;
  text-align: left !important;
}
#block-yui_3_17_2_1_1630433547364_2252 .sqs-gallery-design-carousel .sqs-gallery-controls .next:before {
  color: #FC0061 !important;
  font-size: 40px;
  width: 40px;
  height: 40px;
  line-height: 40px;
}
#block-yui_3_17_2_1_1630433547364_2252 .sqs-gallery-design-carousel .sqs-gallery-controls .previous:before {
  color: #292933 !important;
  font-size: 40px;
  width: 40px;
  height: 40px;
  line-height: 40px;
}
#block-yui_3_17_2_1_1630433547364_2252 .sqs-gallery-design-carousel .sqs-gallery-controls {
  width: 100%;
  padding-right: 20px;
}
 

Also just to flag that I am currently using also this header code injection for automatic rotation of the testimonials

********HEADER CODE INJECTION********

<script>
Y.on('domready', function () {
var galleries = Y.Squarespace.GalleryManager.getGalleries();
var duration = 15000;
var gallery=galleries[0];
var carousel=gallery["gallery-design"];
var totalGroups=carousel.get('totalGroups');
var currentGroup=0
var container=gallery.get("container");
var nextBtn=Y.one(gallery.get("elements.next")._nodes[0]).on("click",function(e){
e.preventDefault();
e.stopPropagation();
advanceCarousel()
})
var prevBtn=Y.one(gallery.get("elements.previous")._nodes[0]).on("click",function(e){
e.preventDefault();
e.stopPropagation();
backupCarousel()
})
Y.one(container._node).get('parentNode').on("mouseover",function(){
clearInterval(myInterval)
})
Y.one(container._node).get('parentNode').on("mouseout",function(){
clearInterval(myInterval)
setMyInterval()
})
var myInterval;
function setMyInterval(){
myInterval = setInterval(function(){
advanceCarousel()
},duration)
}
setMyInterval();
function advanceCarousel(){
if(currentGroup==(totalGroups-1)){
currentGroup=0;
}else{
currentGroup++;
} 
carousel.goToGroup(currentGroup);
}
function backupCarousel(){
if(currentGroup==0){
currentGroup=totalGroups-1
}else{
currentGroup--;
}
carousel.goToGroup(currentGroup);
}
});
</script>

Hi,

You want

• change arrows to circle dots
• move circle dots under testimonial name

is this right?

On 9/19/2021 at 10:27 AM, tuanphan said:

Hi,

You want

• change arrows to circle dots
• move circle dots under testimonial name

is this right?

Hi Tuanphan,

Yes that's correct, thank you.

Hi,

To move arrows under name, add this CSS

section#testimonials .summary-carousel-pager.sqs-gallery-controls {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    align-items: center !important;
    justify-content: center !important;
}

With arrows to dots

Quote

change 2 arrows to 2 dots?

or the number of dots will depend on the number of testimonial items? (This is not possible)?

You can also use this plugin to achieve dots navigation

or this free tool 

Let me know if you have any other questions.

On 9/26/2021 at 3:36 AM, tuanphan said:

Quote

Hi Tuanphan,

Thank you very much for your help, sorry I only just saw your reply!!