CODEWITHSUNDEEP
javascripthtml
Pascal
Pascal

Reputation: 1

slide navigation button are working on multiple slides, how to address it to the one inside div only?

I am facing the problem that if I place more than one of this slides on one page the navigation buttons of all slides will work only on the last gallery on the side. I try to give specific orders to each of the buttons but so far all my approaches failed. The goal is that each slide can be navigated by its own left/right buttons only. I expect there must be a very easy solution to this, I simply do not know java well enough to get it. Help is very appreciated!

<div class="box">
	  <div class="rb-style pile">
      <div class="col-md-6">
        <h3>SLIDE ONE</h3>
        <p>TEXT</p>
      </div>

      <div class="col-md-6 rb-slider">

      <div class="rbSlide">
        <img src="img/xxx.jpg" alt="xxx">
        <div class="rb-caption">
          Trolltunga, Norway
        </div>
      </div>
      
      <div class="rbSlide">
        <img src="img/xxx.jpg" alt="xxx">
        <div class="rb-caption">
          Trolltunga, Norway
        </div>
      </div>
      
      <div class="rbSlide">
        <img src="img/xxx.jpg" alt="xxx">
        <div class="rb-caption">
          Trolltunga, Norway
        </div>
      </div>

	  <button class="rb-btn rb-left" onclick="plusDivs(-1)">&#10094;</button>
      <button class="rb-btn rb-right" onclick="plusDivs(1)">&#10095;</button>
    </div>
  </div>

	<div class="rb-style pile">
      <div class="col-md-6">
        <h3>SLIDE ONE</h3>
        <p>TEXT</p>
      </div>

      <div class="col-md-6 rb-slider">

      <div class="rbSlide">
        <img src="img/xxx.jpg" alt="xxx">
        <div class="rb-caption">
          Trolltunga, Norway
        </div>
      </div>
      
      <div class="rbSlide">
        <img src="img/xxx.jpg" alt="xxx">
        <div class="rb-caption">
          Trolltunga, Norway
        </div>
      </div>
      
      <div class="rbSlide">
        <img src="img/xxx.jpg" alt="xxx">
        <div class="rb-caption">
          Trolltunga, Norway
        </div>
      </div>

	  <button class="rb-btn rb-left" onclick="plusDivs(-1)">&#10094;</button>
      <button class="rb-btn rb-right" onclick="plusDivs(1)">&#10095;</button>
    </div>
  </div>
  
 </div>

The Java:

<script>
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("rbSlide");
  if (n > x.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  x[slideIndex-1].style.display = "block";  
} </script>

Upvotes: 0

Views: 95

Answers (1)

Subham Debnath
Subham Debnath

Reputation: 739

Use this.. The html img tags must be contained in a div with a specific id.. like that:

<div id="specific_id">
    <img >
    <img>.....
</div>

Then add javascript....

var slideShow = function(container) {
this.images = [];
this.curImage = 0;
for (i = 0; i < container.childElementCount; i++) {
    this.images.push(container.children[i]);
    this.images[i].style.display = "none";
}

// Handle going to to the next slide
var nextSlide = function() {
    for (var i = 0; i < this.images.length; i++) {
        this.images[i].style.display = "none";
    }
    this.images[this.curImage].style.display = "block";
    this.curImage++;
    if (this.curImage >= this.images.length) {
        this.curImage = 0;
    }
    window.setTimeout(nextSlide.bind(this), 1000);
};

nextSlide.call(this);
};

Then call it with specific id :

slideShow(document.getElementById("slideshow"));

Upvotes: 0

Related Questions