asked on

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

Michel Plungjan

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
.
.
});
});

Michel Plungjan

OOps.

Hang on. Not correct

saimazz

$(function(){
$('#slides').slides{
pause: '6' //7 th slide, remember it must be string
});
});

saimazz

Or it should work that way :

$(function(){
  $("#slides").slides({
    animationComplete: function(current) {
      if (current >= 7) {
         $("#slides").slides("pause");
      }
    }
  });
});

Open in new window

Michel Plungjan

No. Neither of those work

Michel Plungjan

I am investigating

I have a fiddle going here http://jsfiddle.net/mplungjan/Fakwx/

Michel Plungjan

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.

LT1415

ASKER

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

Michel Plungjan

Can you show me an example?

What captions and are they removed after the FIRST slide?

The code is not supposed to do that.

LT1415

ASKER

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

Michel Plungjan

I'll look later

ASKER CERTIFIED SOLUTION

Michel Plungjan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

LT1415

ASKER

You rock mplungjan.
Thanks so much!