CODEWITHSUNDEEP
javascriptjqueryslideshow
daydreamer
daydreamer

Reputation: 92179

slides.js not working

I have HTML which includes scripts in following order 

<script src="../static/js/jquery.js" type="text/javascript">
<script src="../static/js/bootstrap.js" type="text/javascript">
<script src="../static/js/slides.js" type="text/javascript">
<script src="../static/js/app.js" type="text/javascript">

and images are tied to div as 

<div id="slideshow">
    <div id="slides">
        <img src="../static/img/slideshow/01.JPG">
        <img src="../static/img/slideshow/02.JPG">
        <img src="../static/img/slideshow/03.JPG">
        <img src="../static/img/slideshow/04.JPG">
        <img src="../static/img/slideshow/05.JPG">
        <img src="../static/img/slideshow/06.JPG">
    </div>
</div>

where jquery.js is JQuery v1.7.2 and slide.js is latest slide.js downloaded.

To me it seems correct order as well. What my app.js does is 

$(function(){
    $('#slides').slides({
        width: 600,
        height: 120,
        pagination: false,
        previous: false
    });
    $('#slides').slides("play");
});

I tried on both Firefox and Chrome, it doesn't seem to work, all my images are displayed one after the another

What is that I am not doing right here??

Upvotes: 3

Views: 7609

Answers (3)

Zakaria
Zakaria

Reputation: 15070

You forget some div classes.

You can find a jsfiddle example I put in place here : http://jsfiddle.net/rNF8G/

EDIT 1:

You can add the play: 2000 property to the first block instead of calling it like this : $('#slides').slides("play"); See my edit here : http://jsfiddle.net/rNF8G/1/

EDIT 2:

To remove pagination, all you have to do is to add the following property :

generatePagination: false

You can see it in the following update : http://jsfiddle.net/rNF8G/117/

Upvotes: 3

Darwin
Darwin

Reputation: 87

Try with JQuery Cycle: http://jquery.malsup.com/cycle/

HTML

<div id="slides">
        <img src="../static/img/slideshow/01.JPG">
        <img src="../static/img/slideshow/02.JPG">
        <img src="../static/img/slideshow/03.JPG">
        <img src="../static/img/slideshow/04.JPG">
        <img src="../static/img/slideshow/05.JPG">
        <img src="../static/img/slideshow/06.JPG">
</div>

JQuery

$('#slides').cycle({ 
        fx:     'scrollRight', 
    speed:  'slow', 
    timeout: 5000
});

Upvotes: 0

Basic
Basic

Reputation: 26766

Instead of this...

$(function(){
    $('#slides').slides({
        width: 600,
        height: 120,
        pagination: false,
        previous: false
    });
    $('#slides').slides("play");
});

try this...

$(document).ready(function(){
    $('#slides').slides({
        width: 600,
        height: 120,
        pagination: false,
        previous: false
    });
    $('#slides').slides("play");
});

You don't seem to be attaching the handler correctly to the document ready event

If that doesn't work, can you provide a jsfiddle?

Upvotes: 2

Related Questions