如何获得引导轮播下一张图片src? [英] How to get bootstrap carousel next image src?

问题描述

我想知道如何获取引导轮播的下一个和上一个图像src并将其显示在带有previmage和nextimage类的src img标签中.

i want to know how to get the next and previous image src of bootstrap carousel and display that in a src img tag with class previmage and 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/

I am trying to apply the diamond effect that are in this site http://tympanus.net/Development/ArrowNavigationStyles/

推荐答案

对，因此这里是带有正确缩进的plunkr: http://plnkr.co/edit/IdvC8YIgQBF6wuDAzbxU

Right, so here is a plunkr with corrected indentation: http://plnkr.co/edit/IdvC8YIgQBF6wuDAzbxU

要获取下一幅图像，假设您要使用jQuery，并且当前图像是具有"active"类的图像:

To get the next image, assuming that you want to use jQuery and that the current image is the one with the class 'active':

$(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);

});

这篇关于如何获得引导轮播下一张图片src?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！