title: How to get bootstrap carousel next image src?
body: <p>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.</p>
  
  <p>Thanks</p>
  
  <p>EDIT:</p>
  
  <p>here is my html:</p>
  
  <pre><code>&lt;div id="slideshow-homepage" class="carousel slide swiper-container" data-ride="carousel" data-interval="5000"&gt;
  
    &lt;!-- Slides Container --&gt;
    &lt;div class="carousel-inner swiper-wrapper"&gt;
  
      &lt;div class="item active swiper-slide"&gt;
       &lt;a href="#" title=""&gt;
          &lt;img src="" alt="" class="img-responsive"&gt;
       &lt;/a&gt;
        &lt;div class="caption"&gt;
  
          &lt;div class="text"&gt;&lt;/div&gt;
  
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="item swiper-slide"&gt;
        &lt;img src="" alt="" class="img-responsive"&gt;
        &lt;div class="caption"&gt;
  
          &lt;div class="text"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="item swiper-slide"&gt;
        &lt;img src="" alt="" class="img-responsive"&gt;
        &lt;div class="caption"&gt;
  
          &lt;div class="text"&gt; &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  &lt;nav class="nav-diamond"&gt;
        &lt;a class="prev leftButton" href="#slideshow-homepage" role="button" data-slide="prev"&gt;
          &lt;span class="icon-wrap"&gt;
            &lt;svg class="icon" width="28" height="28" viewBox="0 0 64 64"&gt;
            &lt;svg width="64" height="64" viewBox="0 0 64 64"&gt;
      &lt;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" /&gt;
            &lt;/svg&gt;
            &lt;/svg&gt;
          &lt;/span&gt;
          &lt;div&gt;&lt;img class="previmage" src="images/10.png" alt="Previous thumb"&gt;&lt;/div&gt;
        &lt;/a&gt;
        &lt;a class="next rightButton" href="#slideshow-homepage" role="button" data-slide="next"&gt;
          &lt;span class="icon-wrap"&gt;&lt;svg class="icon" width="28" height="28" viewBox="0 0 64 64"&gt;
    &lt;svg width="64" height="64" viewBox="0 0 64 64"&gt;
      &lt;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" /&gt;
    &lt;/svg&gt;
          &lt;/svg&gt;&lt;/span&gt;
          &lt;div&gt;&lt;img class="nextimage" src="images/7.png" alt="Next thumb"&gt;&lt;/div&gt;
        &lt;/a&gt;
      &lt;/nav&gt;
  &lt;/div&gt;&lt;!-- /Slideshow Homepage --&gt;
  </code></pre>
  
  <p>I am trying to apply the diamond effect that are in this site <a href="http://tympanus.net/Development/ArrowNavigationStyles/" rel="nofollow">http://tympanus.net/Development/ArrowNavigationStyles/</a></p>