CODEWITHSUNDEEP
javascriptjqueryhtmlslider
Sirius Mane
Sirius Mane

Reputation: 213

Jquery Coin Slider - not working at all

I'm trying to integrate Coin Slider into my page, and I've downloaded and attached the latest Jquery to my header, along with all of the necessary Coin-slider files. However, the page simply stacks the images as if I had simply inserted tags.

The paths for all of the files are correct. I tried following his instructions to the letter on the "how to install" page, with no success. It won't work in IE8, or the latest versions of Chrome or Firefox. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="css/paradigm.css" type="text/css" />
<link rel="stylesheet" href="css/coin-slider-styles.css" type="text/css" />
<script type="text/javascript" src="js/coin-slider.min.js"></script>
<script type="text/javascript" src="js/coin-slider.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Paradigm Solutions</title>
</head>
<body>
    <div id="container">
    <div id="header"></div>
    <div id="navbar"></div>
    <div id="leftMenu"></div>
    <div id="coin-slider">
        <a href="http://windows.microsoft.com/en-us/internet-explorer/products/ie/home/" target="_blank">
                <img src="http://www.vexite.com/images/2011/06/browser-war-illustration.jpg" alt="IESucks" />
                <span>
                    <b>Don't Use IE</b><br />
                    Internet Explorer is an inferior product that should be destroyed.
                </span>
            </a>

        <a href="http://windows.microsoft.com/en-us/internet-explorer/products/ie/home/" target="_blank">
                <img src="http://www.vexite.com/images/2011/06/browser-war-illustration.jpg" alt="IESucks" />
                <span>
                    <b>Don't Use IE</b><br />
                    Internet Explorer is an inferior product that should be destroyed.
                </span>
            </a>
    </div>


    </div>

<script type="text/javascript">
    $(document).ready(function() {
        $('#coin-slider').coinslider();
    });
</script>
</body>
</html>

Upvotes: 0

Views: 4571

Answers (4)

Jon
Jon

Reputation: 11

This one may sound obvious but the coin-slider package doesn't always come packaged with jQuery, so make sure you have jQuery in your javascript folder before linking too it c(:

Upvotes: 1

Parag
Parag

Reputation: 4812

it works well

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="coin-slider.min.js"></script>

<link rel="stylesheet" href="styles.css" type="text/css" />
<link rel="stylesheet" href="coin-slider-styles.css" type="text/css" />

check this link for code

Upvotes: 0

Joel Etherton
Joel Etherton

Reputation: 37543

The order of your javascript file includes is very important. jQuery should always be first (as is evident in the production documentation). Also, you don't need BOTH coin-slider includes. The .min will be enough:

<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/coin-slider.min.js">

Upvotes: 1

Manse
Manse

Reputation: 38147

Change your script tags from

<script type="text/javascript" src="js/coin-slider.min.js"></script>
<script type="text/javascript" src="js/coin-slider.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>

to

<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/coin-slider.min.js"></script>

coin-slider depends on jQuery therefore it must be loaded before.... And I would suggest you remove js/coin-slider.js as js/coin-slider.min.js and js/coin-slider.js are the same thing ... the .min is just a minified version of the other

Upvotes: 4

Related Questions