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>