Sliced Image Slider Template
A CSS image slider that divides images into slices as transitions are made from one to the next. The effect is of interleaved panels being exchanged to effect an image swap.
Because the action is triggered by radio buttons, the slider functions across devices whether teh user has a mouse, or is using a touch screen.
This is a modified version of a demo by Mary Lou on Codrops. A link is provided, and you are encouraged to check out the original (and many other "things" of beauty by Mary Lou.
I'm currently attempting to use the radio buttons — above the slider — to change the color of the slider frame. Any help would be appreciated.
The JavaScript is the latest attempt at changing the sliders background color. However; it's not working as yet, and I'm not sure why.
If anyone can show me how (in CSS) to have the child of one class combine to target another class (which is not a sibling or parent of that child) I'd prefer it.
Another way to look at the problem is: need to use the child of a class to apply a specific style rule to the sibling of that parent class. So far I'm failing with CSS and JavaScript both.
CSS cascades, so bubbling and then going horizontal probably won't work. But, there's no reason this can't be done with JavaScript. I just haven't found the bug in my script as yet.
The top set of radio buttons are working correctly as far as capturing the proper checked and unchecked states. However; the style rules are not being transmitted to the slider container object ".cr-container" or "#img-container".