keyframes – How To Remove Extra Slides?

[MBM]

I am using a pure css slider for eBay listings. The script had 5 slides by default but I only want to use three. I have removed the extra slides in the html but the last two slides are still showing but blank. I don’t understand the keyframe code. What do I need to do to remove the extra two slides?

Live here : http://mbmitservices.co.uk/clients/css3slideshow/index.html

Ignore the header it displays fine inside an eBay frame.

            /*
            #NAME?
            5
            #NAME?
            5 seconds
            #NAME?
            Multiply the total number of images by the duration of each image:
            5 images × 5 seconds = 25 seconds
            #NAME?
            Divide the total number of keyframes by the total duration of the animation.
            100 keyframes / 25 seconds = 4 keyframes
            4 keyframes = 1 second
            */
            @keyframes cycle {
            0% {
            opacity: 1;
            }

            /*1 second = 4%*/
            4% {
            opacity: 1;
            }

            8% {
            opacity: 1;
            }

            12% {
            opacity: 1;
            }

            16% {
            opacity: 1;
            }

            20% {
            opacity: 0;
            }

            96% {
            opacity: 0;
            }

            100% {
            opacity: 1;
            }
            }

            @keyframes cycletwo {
            0% {
            opacity: 0;
            }

            /*1 second = 4%*/
            16% {
            opacity: 0;
            }

            20% {
            opacity: 1;
            }

            24% {
            opacity: 1;
            }

            28% {
            opacity: 1;
            }

            32% {
            opacity: 1;
            }

            36% {
            opacity: 1;
            }

            40% {
            opacity: 0;
            }

            100% {
            opacity: 0;
            }
            }

            @keyframes cyclethree {
            0% {
            opacity: 0;
            }

            /*1 second = 4%*/
            36% {
            opacity: 0;
            }

            40% {
            opacity: 1;
            }

            44% {
            opacity: 1;
            }

            48% {
            opacity: 1;
            }

            52% {
            opacity: 1;
            }

            56% {
            opacity: 1;
            }

            60% {
            opacity: 0;
            }

            100% {
            opacity: 0;
            }
            }

            @keyframes cyclefour {
            0% {
            opacity: 0;
            }

            /*1 second = 4%*/
            56% {
            opacity: 0;
            }

            60% {
            opacity: 1;
            }

            64% {
            opacity: 1;
            }

            68% {
            opacity: 1;
            }

            72% {
            opacity: 1;
            }

            76% {
            opacity: 1;
            }

            80% {
            opacity: 0;
            }

            100% {
            opacity: 0;
            }
            }

            @keyframes cyclefive {
            0% {
            opacity: 0;
            }

            /*1 second = 4%*/
            76% {
            opacity: 0;
            }

            80% {
            opacity: 1;
            }

            84% {
            opacity: 1;
            }

            88% {
            opacity: 1;
            }

            92% {
            opacity: 1;
            }

            96% {
            opacity: 1;
            }

            100% {
            opacity: 0;
            }
            }

[MBM]

[Author]

Posts