Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Installing a Slider

I'm installing a jquery slider I found online but the slider won't show up. I added the js files and the related css file but nothing is showing up. Here's my code below, maybe you can find something I missed. Site is at www.sunnysihota.com You will notice that you can copy the image but nothing is showing up.

<!DOCTYPE HTML>
<html>
<head>
<?php
$pageTitle = "SignsAndBanners.com";
?>

<link rel="stylesheet" type="text/css"     href="css/960_12_col.css" />
<link rel="stylesheet" type="text/css"     href="css/style.css" />
<link rel="stylesheet" type="text/css"     href="css/refineslide.css"/>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.refineslide.min.js">    </script>

</head>
<body>

<div class="container_12 clearfix">
    <div id="header" class="grid_12">
        <p style="float:left">1-800-555-5555 |     Live Chat</p>
        <p style="float:right">Sign In |     Register | Shopping Bag </p>

        <div id="header2" class="grid_12">
            <h1>Signs and Banners</h1>
            </div>

                <ul class="nav grid_12">
                    <li><a     href="/signs">Signs</a></li>
                    <li><a     href="/banners">Banners</a>
                </li>
                    <li><a         href="/flags">Flags</a></li>
                    <li><a         href="/Canvas">Canvas</a></li>
                    <li><a         href="/DigitalPrints">DigitalPrints</a></li>
                    <li><a         href="/miscellaneous">Miscellaneous</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="grid_12">
        <div class="rs-wrap">
            <ul class="rs-slider">
                <li><img     src="img/largebanner.jpg" alt="" /></li>
                <li><img     src="img/largebanner2.jpg" alt="" /></li>
                <li><img src="img/flags.jpg" alt="" /></li>
            </ul>



        <script>
            $(function() {
                $('.rs-slider').refineslide({
                    maxWidth: 960  // set to native image width (px)
                });
            });
        </script>
        </div>
    </div>
</div>

</body>
</html>

I got the slider from here and followed its steps but something isn't right: http://alexdunphy.github.io/refineslide/#installation

Hi There

<script src="js/jquery.min.js"></script> is not pulling your minified JQuery Then you are calling <script src="js/jquery.refineslide.min.js"></script> before the actual JQUery which is obviously hosted elsewhere.

Not sure if this will fix things but try organising the scripts like this

<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="js/jquery.refineslide.min.js"></script>

See how you get on with that.

G

2 Answers

That didn't do anything. Nothing still shows but if i right click i can 'save image as' so the 'flag' image (3rd in the slider) shows but nothing actually shows.

Any help greatly appreciated

Anyone with experience with installing a jquery slider chime in? The installation instructions are pretty straightforward, for troubleshooting it says:

Use your browser's developer tools to see what's up - if the slider <ul> is not wrapped by a <div class="rs-wrap"> in the generated markup then the plugin may not be called on the element correctly. Check for syntax errors in your slider call code.

Not sure how to use developer tools to do that as im pretty new to this.