Duplicate ids with loop option

[sebastianhelbig]

When using the swiper option loop: true, the swiper will duplicate the slides. This leads to having element with duplicate ids in the DOM

<div id="ember343" class="swiper-container ember-view swiper-container-initialized swiper-container-horizontal"><div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-2583px, 0px, 0px);">
  <div id="ember349" class="swiper-slide ember-view swiper-slide-duplicate" data-swiper-slide-index="1" style="width: 339px; margin-right: 30px;">…</div>
  <div id="ember351" class="swiper-slide ember-view swiper-slide-duplicate" data-swiper-slide-index="2" style="width: 339px; margin-right: 30px;">…</div>
  <div id="ember353" class="swiper-slide ember-view swiper-slide-duplicate swiper-slide-duplicate-prev" data-swiper-slide-index="3" style="width: 339px; margin-right: 30px;">…</div>
  <div id="ember347" class="swiper-slide ember-view swiper-slide-duplicate-active" data-swiper-slide-index="0" style="width: 339px; margin-right: 30px;">…</div>
  <div id="ember349" class="swiper-slide ember-view swiper-slide-duplicate-next" data-swiper-slide-index="1" style="width: 339px; margin-right: 30px;">…</div>
  <div id="ember351" class="swiper-slide ember-view" data-swiper-slide-index="2" style="width: 339px; margin-right: 30px;">…</div>
  …
</div>

[driesdl]

I have the same problem. All elements are duplicated, but actions on elements are not. Because of that, some buttons work in the initial slide, but not in the duplicated slide.

[Matt-Jensen]

We can look into the duplicate ID issue, however for the actions is there anything preventing you from using event delegation?

[sebastianhelbig]

I solved the duplicate id issue by extending swiper-slidecomponent and setting tagName: ''.

[Matt-Jensen]

@sebastianhelbig glad you got it working for you, however this fix doesn't make much sense to me at the moment. Doesn't that remove the slide element (one with the swiper-slide class) from the DOM?

[sebastianhelbig]

@Matt-Jensen

app/components/swiper-slider.js

import SwiperSlide from 'ember-cli-swiper/components/swiper-slide';

export default SwiperSlide.extend({
  tagName: ''
});

app/templates/components/swiper-slide.hbs

<div class="swiper-slide">
  {{yield}}
</div>

[EstesE]

Thanks @sebastianhelbig.