baianat / hooper

🎠 A customizable accessible carousel slider optimized for Vue
https://baianat.github.io/hooper/
MIT License
720 stars 131 forks source link

change content inside slide after swipe #190

Open bluelemonade opened 4 years ago

bluelemonade commented 4 years ago

I have problems changing the content of a slide.

simple example:

  <hooper @slide="slideEvent">
<slide>
          slide 0
          <p ref = "p0"> XXXX </p>
       </slide>
       <slide>
         slide1
          <p ref = "p1"> XXXX </p>
       </slide>
        <slide>
           slide 2
            <p ref = "p2"> XXXX </p>
       </slide>
     </hooper>

when I go to slideEvent this. $ refs ["p" + e.currSlide] .innerHTML = "Slide" + e.currSlide set this is not displayed. In the Dom Tree, however, I see elements in which it was changed, but they are cloned!

How does this mechanism work and how do I get access to the really visible slides.

bluelemonade commented 4 years ago

the problem is the :infiniteScroll="true" property without it works great.

the feature could also be implemented without additional cloned slides, only the missing slide would have to be moved.

But as I see, all slides are in one track, so that's the wrong approach.