Jump to content

CSS Testimonial slider with navigation for 7.0

Recommended Posts

Posted

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>

  • Replies 4
  • Views 1.2k
  • Created
  • Last Reply
Posted

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

testimonial-slider1-min.png.c18991a33b2897f4cd361a55c07b56c4.png

 

or this free tool 

testimonial-slider2-min.thumb.png.180c7a600fb2d208820a1d204645aca9.png

testimonial-slider3-min.thumb.png.d2cc09544025f2b5ad3ab1dd566c1d14.png

testimonial-slider4-min.thumb.png.e0f04943fdf9b8377b4872cf89a7e356.png

Let me know if you have any other questions.

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • 1 month later...

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.