how to config left and right arrow

[html580]

how to config left and right arrow like the image example

[fengyuanchen]

Unsupported.

[Xavlight]

Hi,

If it's not too late. I've added arrows to the left and right for greater simplicity.

You'll need the 'https://fontawesome.com/' library that I used for the arrows. I also used it to replace the pictos at the bottom (images) with 'fontaweasome' to get much better quality icons.

But there may be other possibilities in CSS.

in 'viewer = new Viewer(imagesviewer[0], { ready() { ...//Here }'

var gallery = $("#gallery img");
var viewer_arrows = '<div id="viewer-arrows" class="hidden">' +
'<a id="viewer-prev" class="fas fa-chevron-left" onclick="viewer.prev(loop=1);"></a>' +
'<a id="viewer-next" class="fas fa-chevron-right" onclick="viewer.next(loop=1);"></a>' +
'</div>';
$('.viewer-footer').append(viewer_arrows);
if (gallery.length > 1) $("#viewer-arrows").removeClass("hidden");

css

#viewer-prev, #viewer-next {
    position: absolute;
    z-index: 2020;
    font-size: 60px;
    bottom: 52px;
    color: rgba(0, 0, 0, 0.6);
    cursor: pointer;
    -webkit-text-stroke-width: 1.5px;
    -webkit-text-stroke-color: white;
}

#viewer-prev {
    left: 2px;
}

#viewer-next {
    right: 2px;
}

#viewer-prev:hover, #viewer-next:hover {
    color: white;
    -webkit-text-stroke-color: black;
}

That's one aspect of the rendering.

If it helps anyone. It would be great if this could be integrated into a future version.

Xav

[XinChou16]

prev and next button in the bottom toolbar is not convenient, look forward to have left and right arrow.