Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Rajinder Sihota
Rajinder Sihota
3,473 Points

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

Graham Davidson
Graham Davidson
Courses Plus Student 14,966 Points

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

Rajinder Sihota
Rajinder Sihota
3,473 Points
Rajinder Sihota
Rajinder Sihota
3,473 Points

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

Rajinder Sihota
Rajinder Sihota
3,473 Points
Rajinder Sihota
Rajinder Sihota
3,473 Points

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.