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.

[see2ever]

my solution:

ready() {
  const viewerInst = viewerRef! as any;

  const imgsCount = viewerInst.length;

  if (imgsCount > 1) {
    const arrows = document.createElement('div');
    const prevBtn = document.createElement('div');
    const nextBtn = document.createElement('div');

    prevBtn.onclick = () => {
      viewerRef!.prev(true);
    };

    nextBtn.onclick = () => {
      viewerRef!.next(true);
    };

    arrows.className = 'viewer-navs';
    prevBtn.className = 'nav-btn nav-pre';
    nextBtn.className = 'nav-btn nav-next';
    arrows.appendChild(prevBtn);
    arrows.appendChild(nextBtn);

    viewerInst.viewer.appendChild(arrows);
  }
},
hidden() {
  viewerRef.destroy();
  (viewerRef as any) = null;
},

css:

.viewer-navs {
  display: flex;
  justify-content: space-between;
  position: absolute;
  width: 100%;
  padding: 0 100px;
  top: 50%;
  left: 0;
}

.nav-btn {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMTEuNDEzOSAxNi45OTkxTDE2LjQ1NjkgMjIuMDM5MUwxNS4wNDI5IDIzLjQ1OTFMNy41ODU5NCAxNS45OTkxTDE1LjA0MjkgOC41MzkwNkwxNi40NTY5IDkuOTU5MDZMMTEuNDEzOSAxNC45OTkxSDI0Ljk5OTlWMTYuOTk5MUgxMS40MTM5WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+);
  width: 32px;
  height: 32px;
  border-radius: 99px;
  background-color: rgba(var(--color-black-rgba), 0.4);
  cursor: pointer;
}

.nav-next {
  rotate: 180deg;
}