cycle2 icon indicating copy to clipboard operation
cycle2 copied to clipboard

How to avoid validation errors with <div class="cycle-slideshow".... tag

Open BostonBud opened this issue 4 years ago • 1 comments

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.

BostonBud avatar Apr 21 '20 21:04 BostonBud

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.

BostonBud avatar Apr 22 '20 21:04 BostonBud