How to implement for multiple sliders on the same page?

[kevinsegal]

I have a grid of products, trying to have Siema load on each card. How would you recommend I init Siema for each of the elements with the 'siema' class on a page? Or do I have to set it up to init Siema per parent object, on the div.siema inside each div.product-container ?

[pawelgrzybek]

Currently it is designed in a way to serve a solution for individual instances. If you really want to use Siema on your project you need to initialise it per parent object. As I mentioned in the docs, this is a simple and lightweight solution but with it's own restrictions. Complex and powerful tools like Flickity may be a better solution in your case.

Thank you for reporting an issue, I will make sure to include solution / suggestion for it in future version of Siema. Have a great day.

[pawelgrzybek]

I added an example of use case that you asked for to Codepen collection. http://codepen.io/pawelgrzybek/pen/JbaELp

I added a new feature to Siema to pass DOM element as a selector to Siema's config. Thanks again for reporting an issue and contribution.

Have a great one!

[kevinsegal]

Thank you so much! 

Kevin Segal

Interstellar Real Estate Developer

On Mon, Dec 12, 2016 at 12:08 AM Pawel Grzybek

< mailto:Pawel Grzybek notifications@github.com

wrote:

a, pre, code, a:link, body { word-wrap: break-word !important; }

I added an example of use case that you asked for to Codepen collection. http://codepen.io/pawelgrzybek/pen/JbaELp

I added a new feature to Siema to pass DOM element as a selector to Siema's config.

Thanks again for reporting an issue and contribution.

Have a great one!

—

You are receiving this because you authored the thread.

Reply to this email directly, https://github.com/pawelgrzybek/siema/issues/4#issuecomment-266366189 , or https://github.com/notifications/unsubscribe-auth/AHVvEc2lWSwdv7ElFpCHytaqVuMfpm4xks5rHQD4gaJpZM4LKHc- .

[pawelgrzybek]

My pleasure to help!

[kevinsegal]

Hey Pawel, curious if you can help me with one more thing.  How would I go about initializing arrows (prev/next) for each of the multiple sliders on the page?  Here’s my codepen for reference:  https://share.polymail.io/v1/z/b/NTg0ZjhiZDZmNzZj/iDq40eQDxP82KlhZy3WY2xZGF3nFiy1QrVYZtCN5ZNclS5xMqVXncsGdFzN2sZYneBVuyDliEJS2p88Gn2-dXuEtXOu2zPJD4H4uBvN7Zc1umLeF69jQa8yHPwovKD_WJonf93wIzDEokeQ43An6SO8ZLy--zhi2kzk9aSXZ0IaXfgScdb8NxIJFmcsjNYOK387GuXMg4bAUoqWZj36XFynNfCPMlcOn9IU7mO1bSs-UyvpNHwN8J5K2bhatyhSKRfpCzbFto-IZXZo28nl14gNQ5GdSCL-WBbQkYTAJoSKidNYk04sGb2AmK2f5tQ==

 

Kevin Segal

Interstellar Real Estate Developer

On Mon, Dec 12, 2016 at 12:11 AM Pawel Grzybek

< mailto:Pawel Grzybek notifications@github.com

wrote:

<![CDATA[a, pre, code, a:link, body { word-wrap: break-word !important; }]]>

My pleasure to help!

—

You are receiving this because you authored the thread.

Reply to this email directly, https://github.com/pawelgrzybek/siema/issues/4#issuecomment-266366673 , or https://github.com/notifications/unsubscribe-auth/AHVvEf2h_tX8Q8PowD1LivSSYQsk_tb4ks5rHQGqgaJpZM4LKHc- .

[pawelgrzybek]

Hi Kevin. Because navigation arrows are not added by init() method it requires to extend a Siema's prototype a bit. But don't be scarred, we just need to add a method mede of few lines of code. Have a look at the code, hopefully it is self explained. If you have any questions just let me know.

Again, I added a example to Codepen collection... http://codepen.io/pawelgrzybek/pen/yVxmEp

Have a great one man!

[Nolaris]

Hi Pavel. Thank you for the wonderful slider. When there is no auto play on one page of 2 sliders. How to fix it - I'm not strong at JS. Thank you in advance, and sorry for myBad English)))

My code: <script> const mySiema = document.querySelectorAll('.siema'); for(const siema of mySiema) { new Siema({ selector: siema, duration: 250, easing: 'ease-out', loop: true, }) }; setInterval(() => mySiema.next(), 1000) </script>

[milenazuccarelli]

Hey, I was looking to implement multiple instances with autoplay. Would this be possible? Edit: got it working, nevermind + thanks!