Javascript Image Slider / Posts /

How to stop loop?

100
How do I stop it from looping after last frame is reached??

Thanks
Steve  10 years ago   viewed: 21937    

10 Answers

0
You can implement this by using the slider's built-in functions and event handlers that are listed in Demo 4 Image Slider with Navigation Buttons.

Suppose you have 5 slides in total. Your last frame will be index=4. Add the following event handler to your page inside the script tag: <script> ... </script>
function beforeSlideChange(args) { //args[0]-next slide index, args[1]-next image, //args[2]-next caption, args[3]-next effect if(args[0]==4) imageSlider.changeOptions({ autoAdvance: false }); }
Note:
  1. The beforeSlideChange or afterSlideChange event handler is only available for licensed slider.
  2. You can also use afterSlideChange handler. But you need to use index 3 instead.
    function afterSlideChange(args) { //args[0]-currentSlide index, args[1]-currentImage if(args[0]==3) imageSlider.changeOptions({ autoAdvance: false }); }
milo   10 years ago
2
can�t make it works... sorry but my skills on javascript ar "-10"! jejejeeee
I have 2 images and want the slide stops, after displaying the second image...
I tried by a copy/paste of the sample:

function beforeSlideChange(args) {
    //args[0]-next slide index, args[1]-next image,
    //args[2]-next caption, args[3]-next effect
    if(args[0]==4) imageSlider.changeOptions({ autoAdvance: false });
}

inside the <script> tag of my html:

<script src="js-image-slider.js" type="text/javascript">
function beforeSlideChange(args) {
    //args[0]-next slide index, args[1]-next image,
    //args[2]-next caption, args[3]-next effect
    if(args[0]==4) imageSlider.changeOptions({ autoAdvance: false });
}
</script>

just changing the "4" of the sample, by "1" (according to the answer given) 
but the slide still display the slides in a loop!  =(
pleaseeee... can you help me??
thanks in advance!!

speedbit
  8 years ago
-1
Please stage a simple demo online so that I can see where is wrong with your setting.
Milo   8 years ago
1

what if there is a multiple slider on one page how can we define a event then ?

Muhammad Faisal   4 years ago
0
I have no way to publish it right now...
anyway, I would really appreciate if you can tell me if that THE IDEA (as I'm handling this) is right or wrong...
Right now, my html looks EXACTLY like this:

  inside the HEAD
          <script src="js-image-slider.js" type="text/javascript">
          function beforeSlideChange(args) {
              //args[0]-next slide index, args[1]-next image,
              //args[2]-next caption, args[3]-next effect
              if(args[0]==1) imageSlider.changeOptions({ autoAdvance: false });
          }
          </script>

  inside the BODY:
          <div id="sliderFrame">
               <div id="slider">
                      <img src="img/image01.jpg " />
                      <img src="img/image02.jpg" />
               </div>
              </div>

... and by this, the slider still loops from the last image... to de first!  =(
speedbit
  8 years ago
-1
I am not sure without seeing all of your source code. You can see if afterSlideChange will work, or add one more slide, or check if the javascript version is the latest.....
Milo   8 years ago
0
got it!! sorry... but Im feeling so idiot! jajajajajaaa
I was adding the script changes to my html, instead of to edit the js!
I finally figure it out and by adding those lines to the js file, I could get it working EXACTLY as I want!
thank you for your support, anyway!  =)
speedbit
  8 years ago
-3

Hi, sppedbit, can you share your script, where did you add those lines in JS file

Roshan
  6 years ago
0

How can I do to make the play button appear again when the slider stop?

Alessandra F   5 years ago
0

Hi,Roshan, here is where you have to put your lines:

var sliderOptions=
{
    sliderId: "slider",
    startSlide: 0,
    effect: "13",
    effectRandom: false,
    pauseTime: 2000,
    transitionTime: 3000,
    slices: 14,
    boxes: 11,
    hoverPause: 2,
    autoAdvance: false,
    thumbnailsWrapperId: null,
    m: true,
    license: "mylicense"
};

function afterSlideChange(args) {
//args[0]-currentSlide index,
//args[1]-currentImage
if(args[0]==3) imageSlider.changeOptions({ autoAdvance: false }); }

var imageSlider=new mcImgSlider(sliderOptions);

/* Menucool Javascript Image Slider v2016.9.27. Copyright www.menucool.com */
function mcImgSlider(i){for(var I=function...

P.s.=(args[0]==3) in case you have 4 images


Alessandra F   5 years ago

   

Your name*
Password
(Optional. Used to modify this post afterwords)
+ =  

Ask your Own Question

  • If your question is related to the topic of this post, you can post your question to this page by clicking the "Post a reply" button at left;

  • When you want to start a new page for your question:
▲