Trouble getting SlidesJS to work

StackOverflow https://stackoverflow.com/questions/13382576

Question

I have a simple web page which I've been trying to set up a slider using SlidesJS.

This is how the required files are linked in the HTML page.

<head>
    <script type="text/javascript" src="js/jquery-1.8.2.js"></script>
    <script type="text/javascript" src="js/slides.min.jquery.js"></script>
    <script type="text/javascript" src="js/common.js"></script> <!-- the JS function is in here -->
</head>

And I have put the loading.gif and the pagination.png in the images in the images folder.

This is the HTML of the page.

<div id="container">
<div id="slider-space">
    <div class="slides-container">
        <div>
            <img src="http://i.imgur.com/kLMCP.png" />
        </div>
        <div>
            <img src="http://i.imgur.com/aX675.png" />
        </div>
        <div>
            <img src="http://i.imgur.com/UyE1g.png" />
        </div>
        <div>
            <img src="http://i.imgur.com/uzc7c.png" />
        </div>
        <div>
            <img src="http://i.imgur.com/Zh8sQ.png" />
        </div>
    </div><!-- end of slides-container -->
</div><!-- end of slider-space -->
</div><!-- end of container -->

Here's the CSS

#container {
    position:fixed;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
}

#slider-space {
    position:relative;
    margin-left:auto;
    margin-right:auto;
    margin-top:10%;
    width:500px;
    height:260px;
    background-color:#F96;    
}

.slides-container img {
    width:500px;
    height:260px;
}

.slides-container div {
    display:block;
    width:500px;
    height:260px;
}​
​

And here's the JavaScript code

$(document).ready(function(e) {
    $('#slider-space').slides({
        preload: true,
        preloadImage: '/images/loading.gif',
        play: 5000,
        pause: 2500,
        hoverPause: false,
        pagination: true
    });
});

But the slider does not show up at all! The images are just displaying one under the other like this,

enter image description here ​ Can anyone please tell me what am I missing here and what should be done to correct it?

Thanks very much.

If its too confusing. to get a better understanding please see the fiddle here.

EDIT :

Okay, I got it working. Now the sliding works fine. However there's a slight problem with the pagination. The small circles which are supposed to appear don't show up. Only the numbers. Look below enter image description here

I have put the pagination.png in my images folder. Is there a way I can set the path to it in the script or something?

Était-ce utile?

La solution

Your div class should be "slides_container" instead of "slides-container" - give that a shot.

Editing to address your new issue with the pagination: you are missing all of the CSS associated with the pagination. Please look at the "Images with captions" example, in the global.css file.

You need the below CSS:

/*
    Pagination
*/

.pagination {
    margin:26px auto 0;
    width:100px;
}

.pagination li {
    float:left;
    margin:0 1px;
    list-style:none;
}

.pagination li a {
    display:block;
    width:12px;
    height:0;
    padding-top:12px;
    background-image:url(../img/pagination.png);
    background-position:0 0;
    float:left;
    overflow:hidden;
}

.pagination li.current a {
    background-position:0 -12px;
}

As you can see, you can set the path of the pagination.png file in the background-image attribute of .pagination li a

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top