Calling same function twice - JavaScript

Question

I'm facing a problem for using same JavaScript code twice. Both slider conflicting and doesn't work properly. I want to know why this doesn't work. When I use only one slider it work properly. Here is the JavaScript code:

sliderInt = 1;
sliderNext = 2;

$(document).ready(function() {
  $('#slider > img#1').fadeIn(150);
  startSlider();
})

function startSlider() {

  var count = $('#slider > img').size();

  var loop = setInterval(function() {

    if (sliderNext > count) {
      sliderInt = 1;
      sliderNext = 1;
    }

    $('#slider > img').fadeOut(150);
    $('#slider > img#' + sliderNext).fadeIn(150);

    sliderInt = sliderNext;
    sliderNext = sliderNext + 1;
  }, 3000);

}

function prev() {
  newSlide = sliderInt - 1;
  showSlide(newSlide);
}

function next() {
  newSlide = sliderInt + 1;
  showSlide(newSlide);
}

function stopLoop() {
  window.clearInterval(loop);
}

function showSlide(id) {

  stopLoop();

  if (id > count) {
    id = 1;
  } else if (id < 1) {
    id = count;
  }

  $('#slider > img').fadeOut(150);
  $('#slider > img#' + id).fadeIn(150);

  sliderInt = id;
  sliderNext = id + 1;

  startSlider();

}

$('#slider > img').hover(

  function() {
    stopLoop();
  },
  function() {
    startSlider();
  }

  // In the End of the line don't put comma ','

);

sliderInt = 1;
sliderNext = 2;

$(document).ready(function() {
  $('#pslider > img#1').fadeIn(150);
  startSlider();
})

function startSlider() {

  var count = $('#pslider > img').size();

  var loop = setInterval(function() {

    if (sliderNext > count) {
      sliderInt = 1;
      sliderNext = 1;
    }

    $('#pslider > img').fadeOut(150);
    $('#pslider > img#' + sliderNext).fadeIn(150);

    sliderInt = sliderNext;
    sliderNext = sliderNext + 1;
  }, 3000);

}

function fprev() {
  newSlide = sliderInt - 1;
  showSlide(newSlide);
}

function fnext() {
  newSlide = sliderInt + 1;
  showSlide(newSlide);
}

function stopLoop() {
  window.clearInterval(loop);
}

function showSlide(id) {

  stopLoop();

  if (id > count) {
    id = 1;
  } else if (id < 1) {
    id = count;
  }

  $('#pslider > img').fadeOut(150);
  $('#pslider > img#' + id).fadeIn(150);

  sliderInt = id;
  sliderNext = id + 1;

  startSlider();

}

$('#pslider > img').hover(

    function() {
      stopLoop();
    },
    function() {
      startSlider();
    }

    //In the End of the line don 't put comma ', '

 );

<div class="primary_slider">
  <div id="slider">
    <img id="1" src="images/slider_images/image1.jpg" alt="">
    <img id="2" src="images/slider_images/image2.jpg" alt="">
    <img id="3" src="images/slider_images/image3.jpg" alt="">
  </div>
  <a class="prev" href="#" onclick="prev(); return false;"></a>
  <a class="next" href="#" onclick="next(); return false;"></a>
</div>

<div class="footer_slider">
  <div id="pslider">
    <img id="1" src="images/pslider/para_img1.jpg">
    <img id="2" src="images/pslider/para_img.png">
    <img id="3" src="images/pslider/para_img2.jpg">
  </div>
  <a class="fprev" href="#" onclick="fprev(); return false">
    <</a>
      <a class="fnext" href="#" onclick="fnext(); return false">></a>
</div>

Oleh Leskiv · Accepted Answer · 2015-05-29 09:48:36Z

1

You have troubles with id of your sliders. http://www.w3schools.com/tags/att_global_id.asp

You can try to use classes

<div class="primary_slider">
  <div class="slider">
    <img id="1" src="images/slider_images/image1.jpg" alt="">
    <img id="2" src="images/slider_images/image2.jpg" alt="">
    <img id="3" src="images/slider_images/image3.jpg" alt="">
  </div>
  <a class="prev" href="#" onclick="prev(); return false;"><</a>
  <a class="next" href="#" onclick="next(); return false;">></a>
</div>

<div class="footer_slider">
  <div class="slider">
    <img id="4" src="images/pslider/para_img1.jpg">
    <img id="5" src="images/pslider/para_img.png">
    <img id="6" src="images/pslider/para_img2.jpg">
  </div>
  <a class="prev" href="#" onclick="prev(); return false">
    <</a>
      <a class="next" href="#" onclick="next(); return false">></a>
</div>

sliderInt = 1;
sliderNext = 2;

$(document).ready(function() {
  $('#slider > img#1').fadeIn(150);
  startSlider();
})

function startSlider() {

  var count = $('.slider > img').size();

  var loop = setInterval(function() {

    if (sliderNext > count) {
      sliderInt = 1;
      sliderNext = 1;
    }

    $('.slider > img').fadeOut(150);
    $('.slider > img#' + sliderNext).fadeIn(150);

    sliderInt = sliderNext;
    sliderNext = sliderNext + 1;
  }, 3000);

}

function prev() {
  newSlide = sliderInt - 1;
  showSlide(newSlide);
}

function next() {
  newSlide = sliderInt + 1;
  showSlide(newSlide);
}

edited May 29, 2015 at 9:48

answered May 29, 2015 at 9:42

Oleh Leskiv

3913 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Saji Over a year ago

Thanks for reply @Oleh Leskiv I did that too but it is not the one that cause the problem.

Kalmani · Accepted Answer · 2015-05-29 09:48:55Z

0

your function StartSlider is based on the dom element with id "#slider", you should pass the id of your slider as an argument to your function

function startSlider(id) {
  var count = $('#" + id + "> img').size(),
      loop = setInterval(function() {
        if (sliderNext > count) {
          sliderInt = 1;
          sliderNext = 1;
        }

        $('#" + id + "> img').fadeOut(150);
        $('#" + id + "> img#' + sliderNext).fadeIn(150);

        sliderInt = sliderNext;
        sliderNext = sliderNext + 1;
      }, 3000);
}

And call it as

startSlider('pslider');

for example

edited May 29, 2015 at 9:48

answered May 29, 2015 at 9:43

Kalmani

513 bronze badges

Collectives™ on Stack Overflow

Calling same function twice - JavaScript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related