CODEWITHSUNDEEP
javascriptjqueryhtmlcss
JohnA
JohnA

Reputation: 636

JQuery based Full Width Responsive Image Slider corrupt?

So I am developing my first responsive full width image slider in JQuery. I've been working with JQuery before but never image sliders so I am not sure if its my code that is corrupt or if its the cycle2 that is playing a game with me.

So the issue I am having is that when I open my webpage to see the slider itself its not showing the pictures. I am leaning against the idea of the cycle2 file being outdated or something but I cant know for sure unless someone who uses it alot can confirm it.

To me my code looks perfect, I cant find any issues since it is such a short code.

Here is what my issue looks like https://i.sstatic.net/xNTjZ.jpg

And here is the source code for my file

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Full Width Responsive Image Slider</title>

<script type="text/javascript src="C:\Users\user\Desktop\Development\Full Width Slider Varga\js\jquery.js"></script>

<script type="text/javascript src="C:\Users\user\Desktop\Development\Full Width Slider Varga\js\jquery.cycle2.min.js"></script>

</head>



<body>

    <div class="cycle-slideshow">
        <img src="C:\Users\User\Desktop\Development\Full WIdth Slider Varga\images\Untitled.png">
        <img src="C:\Users\User\Desktop\Development\Full WIdth Slider Varga\images\wp.png">
        <img src="C:\Users\User\Desktop\Development\Full WIdth Slider Varga\images\wp2.png">
 </div>

</body>
</html>

Upvotes: 0

Views: 211

Answers (1)

Fraser Crosbie
Fraser Crosbie

Reputation: 1762

Try this code out:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Full Width Responsive Image Slider</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script src="http://malsup.github.com/jquery.cycle2.js"></script>
</head>
<body>
  <div class="cycle-slideshow">
    <img src="images/Untitled.png">
    <img src="images/wp.png">
    <img src="images/wp2.png">
  </div>
</body>
</html>

https://jsfiddle.net/1qjgwz31/

Upvotes: 1

Related Questions