Slide ID’s are not unique

(@jbeckerman)

Hello,

We are having an issue in that our accessibility reports are reporting that the slides (not the slider) do not contain unique ID’s.

Is there a way to append a “-2” onto the end of the clones created for the slider to avoid the duplicate id’s?

Dup-ID’s results on a page with 10 slides inside of a slider:

Possible Duplicate IDs:
slider_44550_slide01 found 2 times
slider_44550_slide02 found 2 times
slider_44550_slide03 found 2 times
slider_44550_slide04 found 2 times
slider_44550_slide05 found 2 times
slider_44550_slide06 found 2 times
slider_44550_slide07 found 2 times
slider_44550_slide08 found 2 times
slider_44550_slide09 found 2 times
slider_44550_slide10 found 2 times

Best

Viewing 3 replies - 1 through 3 (of 3 total)

Plugin Author simonpedge
(@simonpedge)

3 months, 1 week ago

Does this issue occur when you disable the ‘Loop Slider’ option (infinite looping – loops back to first slide after last slide is displayed)?

Owl Carousel has to clone slides to achieve this looping effect. Not too sure how to get around that as it’s all done internally within Owl Carousel. I’m just generating IDs and am adding to the wrapper DIV of each slide. I could create an ID with random number appended to the ID, but then this ID (with random number appended) will be duplicated by the internal workings of Owl Carousel.
Thread Starter jbeckerman
(@jbeckerman)

3 months ago
The issue is resolved when the ‘Loop Slider’ option is disabled.

Going off of what you said, I dug through the plugin files and inside the ‘slide-anything-frontend.php’ file where you have the ‘display slide output’ here it is using the ‘$css_id’ to assign that id to each slide in the slider.
```
// DISPLAY SLIDE OUTPUT
//$data_hash = $slide_data['css_id']."_slide".sprintf('%02d', $i);
//$output .= "<div class='sa_hover_container' data-hash='".$data_hash."' style='".esc_attr($slide_style)."'>";
$css_id = $slide_data['css_id']."_slide".sprintf('%02d', $slide_data["slide".$i."_num"]);
if ($slide_data['vert_center'] == 'true') {
$output .= "<div id='".$css_id."' class='sa_hover_container sa_vert_center_wrap' style='".esc_attr($slide_style)."'>";
} else {
$output .= "<div id='".$css_id."' class='sa_hover_container' style='".esc_attr($slide_style)."'>";
}
```
I tested changing the ‘$css_id’ from being used as an id and incorporating it into the class for the slide so that even with the cloning for the loop functionality, the duplicate id issue is resolved.
```
// DISPLAY SLIDE OUTPUT
//$data_hash = $slide_data['css_id']."_slide".sprintf('%02d', $i);
//$output .= "<div class='sa_hover_container' data-hash='".$data_hash."' style='".esc_attr($slide_style)."'>";
$css_id = $slide_data['css_id']."_slide".sprintf('%02d', $slide_data["slide".$i."_num"]);
if ($slide_data['vert_center'] == 'true') {
$output .= "<div class='".$css_id." sa_hover_container sa_vert_center_wrap' style='".esc_attr($slide_style)."'>";
} else {
$output .= "<div class='".$css_id." sa_hover_container' style='".esc_attr($slide_style)."'>";
}
```
Outside of adding the unique id to each slide in their respective slider, would this change impact anything functionality wise with the plugin?
Plugin Author simonpedge
(@simonpedge)

3 months ago

Well yes it would impact all users of the plugin that have used these CSS IDs on their sites.

For example these IDs could have been used to target and style content for individual slides. If I remove this anybody who has done this will have to revisit their sites to fix/recode.

I think the solution would be to add a new checkbox setting (under “Other Settings”) called “Don’t use slide IDs”, which will then uses classes instead of IDs if ticked. I’ve made a note and will look to add this in the next release of SA…

Viewing 3 replies - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

Views