Question

我想知道如何获取bootstrap轮播的下一个和上一个图像src并在src img标签中显示类preivmage和nextimage。

由于

编辑：

这是我的HTML：

<div id="slideshow-homepage" class="carousel slide swiper-container" data-ride="carousel" data-interval="5000">

  <!-- Slides Container -->
  <div class="carousel-inner swiper-wrapper">

    <div class="item active swiper-slide">
     <a href="#" title="">
        <img src="" alt="" class="img-responsive">
     </a>
      <div class="caption">

        <div class="text"></div>

      </div>
    </div>
    <div class="item swiper-slide">
      <img src="" alt="" class="img-responsive">
      <div class="caption">

        <div class="text"></div>
      </div>
    </div>
    <div class="item swiper-slide">
      <img src="" alt="" class="img-responsive">
      <div class="caption">

        <div class="text"> </div>
      </div>
    </div>

  </div>
<nav class="nav-diamond">
      <a class="prev leftButton" href="#slideshow-homepage" role="button" data-slide="prev">
        <span class="icon-wrap">
          <svg class="icon" width="28" height="28" viewBox="0 0 64 64">
          <svg width="64" height="64" viewBox="0 0 64 64">
    <path id="arrow-left-1" d="M46.077 55.738c0.858 0.867 0.858 2.266 0 3.133s-2.243 0.867-3.101 0l-25.056-25.302c-0.858-0.867-0.858-2.269 0-3.133l25.056-25.306c0.858-0.867 2.243-0.867 3.101 0s0.858 2.266 0 3.133l-22.848 23.738 22.848 23.738z" />
          </svg>
          </svg>
        </span>
        <div><img class="previmage" src="images/10.png" alt="Previous thumb"></div>
      </a>
      <a class="next rightButton" href="#slideshow-homepage" role="button" data-slide="next">
        <span class="icon-wrap"><svg class="icon" width="28" height="28" viewBox="0 0 64 64">
  <svg width="64" height="64" viewBox="0 0 64 64">
    <path id="arrow-right-1" d="M17.919 55.738c-0.858 0.867-0.858 2.266 0 3.133s2.243 0.867 3.101 0l25.056-25.302c0.858-0.867 0.858-2.269 0-3.133l-25.056-25.306c-0.858-0.867-2.243-0.867-3.101 0s-0.858 2.266 0 3.133l22.848 23.738-22.848 23.738z" />
  </svg>
        </svg></span>
        <div><img class="nextimage" src="images/7.png" alt="Next thumb"></div>
      </a>
    </nav>
</div><!-- /Slideshow Homepage -->

我正在尝试应用此网站http://tympanus.net/Development/ArrowNavigationStyles/

中的钻石效果

Answer 1

是的，所以这里有一个带有纠正缩进的plunkr：http://plnkr.co/edit/IdvC8YIgQBF6wuDAzbxU

要获取下一个图像，假设您要使用jQuery并且当前图像是具有“活动”类的图像：

$(document).ready(function () {

  function getNextAndPrev() {
    var activeSlide = $('.active');

    var nextImage, prevImage;

    if (activeSlide.next().length) {
      nextImage = activeSlide.next().find('img').attr('src')
    } else {
      nextImage = $('.carousel-inner').children().first().find('img').attr('src');
    }

    if (activeSlide.prev().length) {
      prevImage = activeSlide.prev().find('img').attr('src')
    } else {
      prevImage = $('.carousel-inner').children().last().find('img').attr('src');
    }

    $('.previmage').attr('src', prevImage);
    $('.nextimage').attr('src', nextImage);
  }

  getNextAndPrev();

  $('.next, .prev').on('click', getNextAndPrev);

});

如何获得bootstrap carousel下一张图片src？

1 个答案: