Jquery Cycle2 won't produce slideshow

Question

I'm trying to implement the cycle2 plugin with jquery on an HTML page. I've used the site http://jquery.malsup.com/cycle2 as a guide I downloaded (copied) the file jquery.cycle2.js I placed it on the server in on the server in the location public_html/cycle2/jquery.cycle2.js
In my HTML page's Header section I added the lines:

<!-- include jQuery library -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!-- include Cycle2 -->
<script src="cycle2/jquery.cycle2.js"></script>

Then, in the HTML page's BODY I added:

<div class="cycle-slideshow">
    <img src="cycle_images/image1.jpg" alt="Image1"/>
    <img src="cycle_images/image2.jpg" alt="Image2"/>
    <img src="cycle_images/image3.jpg" alt="Image3"/>
</div>

The guide doesn't give a css-type example for the class "cycle-slideshow". Instead it says that by using that class in the DIV tag it will auto-activate the slideshow.
This doesn't seem to activate the slideshow. Instead it lays out the images out in three rows, one row after another.
Any idea what I'm doing wrong to activate the cycle2 slideshow?

You can try to put that cicle2 js after the div element where the class been defined. Because probably that script has autoload function for any state or neither. — OO7
Hello. Thanks for responding. I moved the <script src="cycle2/jquery.cycle2.js"></script> statement towards the end of the HTML (after the DIV with images), but that still did not work. — user3138025
Hello again. I fixed the problem. I took the preceding "http:" off of the first script line. That first SCRIPT line now reads: <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> That line also works with HTTPS. I guess it's an HTTPS site and the example code referenced HTTP. Again, thanks for responding. — user3138025
You are welcome. That is good. I think https more secure then http. Currently many web sites had use it. — OO7
In case the cycle2 js refers to your server, you can use relative path, usually as following: <script src="vendor/product-name/script-name.js" type="text/javascript"></script> — OO7

user3138025 user3138025 · Accepted Answer · 2020-04-20T21:33:31

The problem was with the HTTP:// on the server line. Since the Cycle2 documentation was published, the GOOGLEAPIS sever must have obtained a certificate, making it HTTPS. The mismatch between HTTP and HTTPS caused the plugin to fail. The working code now reads:

<!-- include jQuery library -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!-- include Cycle2 -->
<script src="cycle2/jquery.cycle2.js"></script>

It seems to me that it's safer to remove "HTTP" or "HTTPS" and just being the server line with "//".

Jquery Cycle2 won't produce slideshow

1 Answers