Search code examples
javascriptjquerycssslidesjs

jQuery 'Slides' not functioning

I am using the script at slidesjs.com (http://slidesjs.com/examples/simple/), trying to put it into my webpage. I decided to use a script and not just attempt to write it in jQuery myself as I could not get it to work, and I suspect the same problem is occurring here..whatever it may be. Here is the page source code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>John Smith</title>
    <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
    <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(){
            $('#sections').slides({
                preload: true,
                generateNextPrev: true

container: 'sections_container' }); }); Web Developer John Smith

This text is purely to fill space until I add real content.

                </p>
                <p id="contact">If you'd like to contact me about anything, don't hesitate to email me at [email protected]</p>
                <div id="social_media"><img src="images/social_media/facebook.png" /><img src="images/social_media/twitter.png" /><img src="images/social_media/flickr.png" /><img src="images/social_media/youtube.png" /></div>
                <div class="clear"></div>
            </div>
            <div>
                <h3 class='heading'>Information</h3>
                <p>
                    <ul>
                        <li><strong>Name:</strong> John Smith</li>
                        <li><strong>Location:</strong> Sydney, Australia</li>
                    </ul>
                </p>
                <br />
                <h3 class='heading'>Achievements & Experience</h3>
                <p>
                    <ul>
                        <li>Worked at Google</li>
                        <li>Worked at McDonalds</li>
                    </ul>
                </p>
            </div>
        </div>
    </div>
</body>

The CSS if anyone is interested.

* {
padding:0;
margin:0;
}

a {
color:white;
text-decoration:none;
}

a:hover {
text-decoration:underline;
}

body {
background: url('images/background.png');
font-size:12px;
font-family:arial;
color:#E5E5E5;
}

.sections_container {
width:768px;
display:none;
}

li {
margin-left:20px;
}

.sections_container div {
margin: 0 auto 4px auto;
width:768px;
background: rgba(0,0,0,0.3);
padding:10px;
border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px;
border:1px #7F7F7F solid;
box-shadow: inset 2px 2px #191919;
display:block;
}

.pagination {
        list-style:none;
        margin:0;
        padding:0;
    }

    /*
        Optional:
        Show the current slide in the pagination
    */
    .pagination .current a {
        color:red;
    }

.top {
margin: 15px auto 4px auto;
width:768px;
background: rgba(0,0,0,0.3);
padding:10px;
border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px;
border:1px #7F7F7F solid;
box-shadow: inset 2px 2px #191919;
}

.section {
margin: 0 auto 4px auto;
width:768px;
background: rgba(0,0,0,0.3);
padding:10px;
border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px;
border:1px #7F7F7F solid;
box-shadow: inset 2px 2px #191919;
}

h1,h2,h3,h4,h5,h6 {

}

#subtitle {
color:#919191;
text-align:right;
}

#title {
text-align:right;
}

#profile {
float:left;
height:52px;
width:52px;
}

#youtube_video {
float:right;
padding-left:10px;
}

#contact {
margin-top:8px;
font-weight:bold;
font-style:italic;
}

#social_media {
margin-top:40px;
text-align:center;
}

.heading {
text-align:center;
}

.demphasis {
color:#9E9E9E;
}

.clear {
clear:both;
}

Thanks!

Solution

  • OK. I can see a couple of wee issues.

    Firstly, in your CSS you reference .section_container, whereas in the HTML it's <div class="sections_container"> - note the 's' in the middle. Same for section/s.

    Secondly, it looks like SlideJS defaults to "slides_container". Either rename your divs, or set the container name when you're initializing it:

     $('#sections').slides({
     preload: true,
     generateNextPrev: true,
     container: 'sections_container'
 });

    I've created a little jsFiddle at http://jsfiddle.net/jCFeQ/ - it still has some issues, but is closer to working than when we started. Change those two things and see how you go.