search

Ember-Swiper / ember-cli-swiper

Swiper-Wrapper for ember
https://ember-swiper.github.io/ember-cli-swiper/
MIT License
72 stars 75 forks source link

Duplicate ids with loop option #120

Open sebastianhelbig opened 5 years ago

sebastianhelbig commented 5 years ago

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 commented 4 years ago

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 commented 4 years ago

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

sebastianhelbig commented 4 years ago

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

Matt-Jensen commented 4 years ago

@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 commented 4 years ago

@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 commented 4 years ago

Thanks @sebastianhelbig.