Кнопка «Предыдущая / Следующая» не работает для моего стола

Question

У меня есть table, в который я хочу добавить предыдущий / следующий button, чтобы пользователь мог пролистать. Но, похоже, он не работает, так как, возможно, мне нужно связать buttons с моим table, который я не уверен как.

Также стрелки должны появиться над моим table, вместо этого это идущий сверху слева и сверху вниз. Любая помощь будет оценена. Спасибо.

a {
  text-decoration: none;
  display: inline-block;
  padding: 8px 16px;
}

a:hover {
  background-color: #ddd;
  color: black;
}

.previous {
  background-color: #f1f1f1;
  color: black;
}

.next {
  background-color: #4CAF50;
  color: white;
}

.round {
  border-radius: 50%;
}

<a href="#" class="previous round" align="left">&#8249;</a>
<table cellpadding="0" cellspacing="0" width="100%" id="quicklink" class="widgetstart">
  <tr>
    <td>
      <table cellpadding="0" cellspacing="0" width="100%">
        <tr>
          <xsl:choose>
            <xsl:when test="//faml/response/quicklinkresponsedto/quicklink">
              <xsl:for-each select="//faml/response/quicklinkresponsedto/quicklink/quicklinkdto">
                <div>
                  <td style="padding-right: 10px">
                    <xsl:variable name="txn_desc"><xsl:value-of select="desc" /></xsl:variable>
                    <xsl:variable name="txn_url"><xsl:value-of select="url" /></xsl:variable>
                    <xsl:variable name="txn_search"><xsl:value-of select="search" /></xsl:variable>
                    <xsl:variable name="txn_img"><xsl:value-of select="img" /></xsl:variable>
                    <a href="https://www.google.com" target="_blank"><img srcset="https://i.kym-cdn.com/entries/icons/original/000/015/163/narutoooh.jpg" height="100" title="{$txn_desc}" align="center" class="ToggleImage" /></a>
                    
							<div><input name="fldsearch" value="{$txn_search}" align="center" maxlength="15" size="30"  disabled="true" /></div>
                    <a href="https://www.google.com" target="_blank"><img srcset="https://i.kym-cdn.com/entries/icons/original/000/015/163/narutoooh.jpg" height="100" title="{$txn_desc}" align="center" class="ToggleImage" /></a>
                    
							<div><input name="fldsearch" value="{$txn_search}" align="center" maxlength="15" size="30"  disabled="true" /></div>
                    <a href="https://www.google.com" target="_blank"><img srcset="https://i.kym-cdn.com/entries/icons/original/000/015/163/narutoooh.jpg" height="100" title="{$txn_desc}" align="center" class="ToggleImage" /></a>
                    <div><input name="fldsearch" value="{$txn_search}" align="center" maxlength="15" size="30" disabled="true" /></div>
                  </td>
                </div>
              </xsl:for-each>
            </xsl:when>
            <xsl:otherwise>
            </xsl:otherwise>
          </xsl:choose>
        </tr>
      </table>
    </td>
  </tr>
</table>
<a href="#" class="next round" align="right">&#8250;</a>

Answer 1

Вы можете создать карусель для поворота по изображениям.

Просто добавьте предыдущую и следующую кнопку, которая будет вращаться по изображениям.

(function($) {
  $.fn.shiftChildrenRight = function(selector) {
    return this.prepend(this.find(selector).last().detach());
  };
  $.fn.shiftChildrenLeft = function(selector) {
    return this.append(this.find(selector).first().detach());
  };
})(jQuery);

$('.btn-prev').on('click', function(e) { navigate(-1); });
$('.btn-next').on('click', function(e) { navigate(+1); });

function navigate(direction) {
  switch (direction) {
    case -1: $('.frames').shiftChildrenRight('.frame') ; break;
    case  1: $('.frames').shiftChildrenLeft('.frame')  ; break;
  }
}

.carousel {
  position: relative;
  width: 600px;
  border: thin solid grey;
  background: #222;
}

.frames { text-align: center; }

.frame {
  position: relative;
  display: inline-block;
  margin: 0 0.1em;
}

.caption {
  position: absolute;
  bottom: 0.5em;
  text-align: center;
  margin: 0 auto;
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
  color: rgba(255, 255, 255, 0.9);
  padding: 0.333em 0;
}

.btn {
  position: absolute;
  z-index: 100;
  height: 1.5em;
  width: 1.5em;
  top: calc(50% - 0.75em);
  font-size: 3em;
  background: rgba(0, 0, 0, 0.1);
  border: 2px solid rgba(0, 0, 0, 0.2);
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
}

.btn:focus { outline: none; }

.btn:hover {
  background: rgba(0, 0, 0, 0.333);
  border: 2px solid rgba(0, 0, 0, 0.5);
  color: rgba(255, 255, 255, 0.8);
}

.btn-prev { left: 12.5%; }

.btn-next { right: 12.5%; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="carousel">
  <div class="frames">
    <div class="frame">
      <img src="http://placekitten.com/200/160" />
      <div class="caption">Img #1</div>
    </div>
    <div class="frame">
      <img src="http://placekitten.com/160/160" />
      <div class="caption">Img #2</div>
    </div>
    <div class="frame">
      <img src="http://placekitten.com/180/160" />
      <div class="caption">Img #3</div>
    </div>
  </div>
  <button class="btn btn-prev">&#8634;</button>
  <button class="btn btn-next">&#8635;</button>
</div>