CODEWITHSUNDEEP
javascriptjquerygoogle-chromeslideshow
PlayHardGoPro
PlayHardGoPro

Reputation: 2923

Jquery Cycle() not working

I'm studying Jquery, and I was trying to do a simple SlideShow, but nothing happens...

Here's my HTML

    <!doctype html>
<html lang="en">
<head>


    <link rel="stylesheet" type="text/css" href="css/Style.css">
    <meta charset="UTF-8">
    <title>SlideShow</title>
</head>


<body>
    <div id="slides">       
        <img src="imgs/1.jpg">
        <img src="imgs/2.jpg">
        <img src="imgs/3.jpg">
    </div>


    <script type="text/javascript">
        $(function(){
            $("#slides").cycle({

                fx: 'fade',
                speed:2000,
                timeout:4000,
            });
        })
    </script>


    <script type="text/javascript" src="js/Jquery.js"></script>
    <script type="text/javascript" src="js/Cycle.js"></script>  


</body>
</html>

My Css:

*{
    margin: 0;
    padding: 0;
}

#slides{
    width: 1024px;
    height: 768px;
    margin: 0 auto;
    overflow: hidden;
}

I also tried to change, this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

for this:

<script src="js/jquery-1.11.0.js"></script>

Nothing...

Upvotes: 0

Views: 328

Answers (1)

Felix
Felix

Reputation: 38102

You need to include jQuery before your Cycle plugin, so reverse the order of your scripts here:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/Cycle.js"></script>

Also, it's better to include CSS before Javascript as well as putting your Javascript at the bottom of your page before closing </body> tag.

Upvotes: 1

Related Questions