cycle2
cycle2 copied to clipboard
How to avoid validation errors with <div class="cycle-slideshow".... tag
Hello, I'm just implementing Cycle2. Seems to work great. But I get errors when validating the HTML on [``]((https://validator.w3.org) In the html page header I place the script statements:
<!-- include jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!-- include Cycle2 -->
<script src="cycle2/jquery.cycle2.js"></script>
In the html page body I have the following statements:
<div class="cycle-slideshow"
data-cycle-fx="scrollHorz"
data-cycle-pause-on-hover="true"
data-cycle-speed="200"
data-cycle-auto-height="container"
data-cycle-caption="#adv-custom-caption"
data-cycle-caption-template="{{cycleTitle}}"
>
<img src="contact_us_cycle/Image1.jpg" alt="Image1"
width="200" height="134" data-cycle-title="Image1" />
<img src="contact_us_cycle/Image2.jpg" alt="Image2"
width="200" height="134" data-cycle-title="Image2" />
The functionality is fine. The images cycle through. However, this code produces a number of errors. They are all the options used in the DIV CLASS=CYCLE-SLIDESHOW statement. Some examples are:
there is no attribute "data-cycle-title"
there is no attribute "data-cycle-fx"
My site gets audited occasionally. How can I use Cycle2 so that it includes the captions below the image but doesn't produce validation errors? Thanks for checking.
The problem went away. I had a class "cycle-slideshow" identified in the CSS file. It wasn't doing anything. Once I removed it, the validation worked fine.