Stop Function to Jquery Slider

I am using the jquery slider available at

http://slidesjs.com/


I would like to get the slide show to stop on the last side and not loop through.

As you might imagine, there is more javascript involved with this application that I can convey here which would need to be reviewed in the assessment.

I have tried adding:

            
$(function(){
      $('#slides').slides(function() {
  $(this).find('Slide-7').stop(true);
});              
});                  

and

$(function(){
$("#slides").slide({
stop:7 });
});

I can't seem to get this to stop after just one cycle.
I do not want the user to have to click anything to make this action to happen.

If someone has worked with this widget before, I'd appreciate your help.
This seems to be an ongoing question in the support group for this widget with no resolution available.
Thanks

LT1415Asked:
Who is Participating?
 
Michel PlungjanIT ExpertCommented:
This works for me.

the caption stays
$(function(){
            var total = $("#slides img").length - 2; // Subtract Two arrows
            $('#slides').slides({
                preload: true,
                preloadImage: 'img/loading.gif',
                play: 5000,
                pause: 2500,
                hoverPause: true,
                animationStart: function(current){
                    $('.caption').animate({
                        bottom:-35
                    },100);
                    if (window.console &&  console.log) {
                        // example return of current slide number
                        console.log('animationStart on slide: ', current);
                    };
                },
                animationComplete: function(current){
                    $('.caption').animate({
                        bottom:0
                    },200);
                    if (window.console && console.log) {
                        // example return of current slide number
                        console.log('animationComplete on slide: ', current);
                    };
                    if (current >= total) {
                      clearInterval($('#slides').data('interval'));
                      $(".pagination").remove();
                      $(".prev").remove();
                      $(".next").remove();
                    }
                },
                slidesLoaded: function() {
                    $('.caption').animate({
                        bottom:0
                    },200);
                }
            });
        });

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
I think you are applying some wishful thinking there.

this works:

$(function(){
  $("#slides").slides({

    animationComplete: function(current) {
      // use the "current" slide number
      if (current >= 7) {
         $(this).pause();
      }
    }, // remember the comma

// here are your normal stuff you already have
.
.
  });
});

0
 
Michel PlungjanIT ExpertCommented:
OOps.

Hang on. Not correct
0
Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

 
saimazzCommented:
$(function(){
      $('#slides').slides{
pause: '6'  //7 th slide, remember it must be string
});              
});  
0
 
saimazzCommented:
Or it should work that way :
$(function(){
  $("#slides").slides({
    animationComplete: function(current) {
      if (current >= 7) {
         $("#slides").slides("pause");
      }
    }
  });
});

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
No. Neither of those work
0
 
Michel PlungjanIT ExpertCommented:
I am investigating

I have a fiddle going here http://jsfiddle.net/mplungjan/Fakwx/
0
 
Michel PlungjanIT ExpertCommented:
Here you go

$(function(){
  var total = $("#slides img").length - 2; // Subtract Two arrows
  $('#slides').slides({
     animationComplete: function(current) {
         if (current >= total) {
          clearInterval($('#slides').data('interval'));
          $(".pagination").remove();
          $(".prev").remove();
          $(".next").remove();
         }
       },            
       preload: true,
       preloadImage: 'http://slidesjs.com/img/loading.gif',
       play: 5000,
       pause: 2500,
       slideSpeed: 600,
       hoverPause: true
   });
});

Change
          clearInterval($('#slides').data('interval'));

to

          clearInterval($('#slides').data('interval'));
          $(".pagination").remove();
          $(".prev").remove();
          $(".next").remove();

if you want to remove the arrows and the dots
You will need to give them an ID or index them if you have more than one slideshow since the remove code will remove all class=paginations and all class=next and all class=prev on the page.
0
 
LT1415Author Commented:
mplungjan:-- Thanks so much your last solution is great.
The captions are also cleared away after the first slide.
The captions are not mandatory, but can you see a way to keep them.
I could not get it to work keeping the captions--no surprises there.

I can probably comment out the arrows and pagination from the Web page, so those elements are
not important to me.  Thanks again
0
 
Michel PlungjanIT ExpertCommented:
Can you show me an example?

What captions and are they removed after the FIRST slide?

The code is not supposed to do that.
0
 
LT1415Author Commented:
One of the options and part of the download with the widget is to have
captions appear
with the  picture.
The example they show here:
http://slidesjs.com/
does not show the captions.

In the original code listed below (which does not include your solution)
they refer to the captions.
I will also include a portion of the html code where the captions are
stated.

The solution, which is great-- cleared the captions on all but the first
slide.
If it's possible to keep the captions, great. If not this solution will
work for me
and is very much appreciated.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    
    <title>Slides, A Slideshow Plugin for jQuery</title>
    
    <link rel="stylesheet" href="css/global.css">
    
    <script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"><
/script>
    <script src="js/slides.min.jquery.js"></script>
    <script>
        $(function(){
            $('#slides').slides({
                preload: true,
                preloadImage: 'img/loading.gif',
                play: 5000,
                pause: 2500,
                hoverPause: true,
                animationStart: function(current){
                    $('.caption').animate({
                        bottom:-35
                    },100);
                    if (window.console &&
console.log) {
                        // example return of
current slide number
    
console.log('animationStart on slide: ', current);
                    };
                },
                animationComplete: function(current){
                    $('.caption').animate({
                        bottom:0
                    },200);
                    if (window.console &&
console.log) {
                        // example return of
current slide number
    
console.log('animationComplete on slide: ', current);
                    };
                },
                slidesLoaded: function() {
                    $('.caption').animate({
                        bottom:0
                    },200);
                }
            });
        });
        
    
    </script>
</head>
<body>
    <div id="container">
        <div id="example">
            <img src="img/new-ribbon.png" width="112"
height="112" alt="New Ribbon" id="ribbon">
            <div id="slides">
                <div class="slides_container">
                    <div class="slide">
                        <a
href="http://www.flickr.com/photos/jliba/4665625073/" title="145.365 -
Happy Bokeh Thursday! | Flickr - Photo Sharing!" target="_blank"><img
src="img/slide-1.jpg" width="570" height="270" alt="Slide 1"></a>
                        <div class="caption"
style="bottom:0">
                            <p>Happy Bokeh
Thursday!</p>
                        </div>
                    </div>
                    <div class="slide">
                        <a
href="http://www.flickr.com/photos/stephangeyer/3020487807/" title="Taxi
| Flickr - Photo Sharing!" target="_blank"><img src="img/slide-2.jpg"
width="570" height="270" alt="Slide 2"></a>
                        <div class="caption">
                            <p>Taxi</p>
                        </div>
                    </div>
</body>
</html>

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
I'll look later
0
 
LT1415Author Commented:
You rock mplungjan.
Thanks so much!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.