To add a dots navigation like this to Gallery Block Slideshow.
#1. First, use this code to Code Injection > Footer
If code doesn’t work, you can comment below, message or email me.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".sqs-gallery").each(function(){
const count = $(this).children().length;
console.log("Count:" + count);
let slide = 0;
$(this).children().each(function(){
let html = "<div class='slide-indicators'>";
for (let i = 0; i < count; i++){
html = html + "<span class='slide-indicator";
console.log("Slide:" + count);
if (slide == i) {
html = html + " active";
}
html = html + "'></span>";
}
html = html + "</div>";
$(this).append(html);
slide++;
});
});
});
</script>
#2. Use this code to Custom CSS.
/* Gallery Block Dots */
.slide-indicators{
position:absolute;
bottom:28px;
width:100%;
height:16px;
display:flex;
justify-content:center;
.slide-indicator{
display:inline-block;
content:"";
width:10px;
height:10px;
border-radius: 8px;
background:white;
margin:8px;
&.active{
background:black;
}
}
}
#3. To change dots size, change these lines.
To change dots color and dot active color, change this.
