Description
- turn gallery on Cover Page to Slideshow with Left/Right Arrows
- buy me a coffee
You can use this code to Cover Page Header Injection
<script>
document.addEventListener('DOMContentLoaded', function() {
var slides = document.querySelectorAll('.sqs-gallery-design-stacked-slide');
if (!slides.length)
return;
function getActiveIndex() {
var byZIndex = -1;
var byClass = -1;
for (var i = 0; i < slides.length; i++) {
if (slides[i].classList.contains('sqs-active-slide'))
byClass = i;
if (slides[i].style.zIndex === '889')
byZIndex = i;
}
console.log('byClass:', byClass, '| byZIndex:', byZIndex);
return byZIndex !== -1 ? byZIndex : byClass;
}
function goTo(targetIndex) {
var cur = getActiveIndex();
var next = (targetIndex + slides.length) % slides.length;
console.log('cur:', cur, '-> next:', next);
slides.forEach(function(slide) {
slide.classList.remove('sqs-active-slide');
slide.style.opacity = '0';
slide.style.zIndex = '888';
slide.style.visibility = 'hidden';
slide.style.pointerEvents = 'none';
});
slides[next].classList.add('sqs-active-slide');
slides[next].style.opacity = '1';
slides[next].style.zIndex = '889';
slides[next].style.visibility = 'visible';
slides[next].style.pointerEvents = 'auto';
}
var container = document.querySelector('.layer-back');
if (!container)
return;
var arrowStyles = ['position:absolute', 'top:50%', 'transform:translateY(-50%)', 'z-index:9999', 'cursor:pointer', 'background:rgba(0,0,0,0)', 'border:none', 'padding:12px 0px', 'display:flex', 'align-items:center', 'justify-content:center'].join(';');
var svgStyle = 'width:18px;height:32px;stroke:#fff;stroke-width:1.5;';
var btnLeft = document.createElement('button');
btnLeft.setAttribute('style', arrowStyles + ';left:40px');
btnLeft.innerHTML = '<svg style="' + svgStyle + '" viewBox="0 0 9 16"><polyline fill="none" stroke-miterlimit="10" points="7.3,14.7 2.5,8 7.3,1.2"></polyline></svg>';
btnLeft.addEventListener('click', function() {
goTo(getActiveIndex() - 1);
});
var btnRight = document.createElement('button');
btnRight.setAttribute('style', arrowStyles + ';right:40px');
btnRight.innerHTML = '<svg style="' + svgStyle + '" viewBox="0 0 9 16"><polyline fill="none" stroke-miterlimit="10" points="1.6,1.2 6.5,7.9 1.6,14.7"></polyline></svg>';
btnRight.addEventListener('click', function() {
goTo(getActiveIndex() + 1);
});
container.style.position = 'relative';
container.appendChild(btnLeft);
container.appendChild(btnRight);
});
</script>