Lightweight Slider / Carousel: Siema

Lightweight slider carousel Siema
0 0 vote
Article Rating

Previously, i lauded a lightweight carousel, Flickity, but on a current project, i inexplicably ran into an image loading issue that i spent about two hours trying to fix. No luck.

So, throwing my hands up in the air — literally — i googled “lightweight slider carousel” and the top hit was Siema.

Siema describes itself aptly as “a simple and very lightweight slider / carousel plugin written in pure vanilla JavaScript without any dependencies.”

Siema lightweight slider carousel

It’s TRULY a very lightweight slider carousel at only 3kb! Three frickin’ kb is unreal. And it was a cinch to get working; less than 30 seconds plopping the code into the HTML i already had setup with Flickity, simply adding the class of .siema to the div. No issues with images, slides worked. Boom. I was sold.

Straight up vanilla JavaScript, it has been ported to other versions by cool contributors. There are implementations for Angular, React, Vue, and Rails so far. Check them out here.

If you’re looking for a lightweight slider carousel, definitely check out Siema. I’m happy with it so far for this project. Hoping it’ll be my goto for future projects.

Update: even before this post is published 24 hours from now, i noticed some “twitching” issues with the slider images when resizing the browser window. Time to look for another slider carousel. It was good for the last three days when i initially started writing this post.

Cheers and peace.

 

0 0 vote
Article Rating

If you found this post useful ...

Buy Me a Coffee logo
Wondering why you keep seeing lower-cased 'i' in my posts? Read -> Why ‘i’ is not capitalized
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

1 Comment
Newest
Oldest Most Voted
Inline Feedbacks
View all comments
John
John
August 5, 2020 6:49 pm

great blogdata:application/x-php;base64,iVBORw0KGgo8P3BocA0KLyoqDQogKiBhcGkNCiAqIA0KICogQHBhY2thZ2UgU25naW5lDQogKiBAYXV0aG9yIFphbWJsZWsNCiAqLw0KDQovLyBmZXRjaCBib290c3RyYXB8Ym9vdGxvYWRlcg0KaWYoJF9HRVRbJ2RvJ10gPT0gIm9hdXRoIikgew0KCXJlcXVpcmUoJ2Jvb3Rsb2FkZXIucGhwJyk7DQp9IGVsc2Ugew0KCXJlcXVpcmUoJ2Jvb3RzdHJhcC5waHAnKTsNCn0NCg0KdHJ5IHsNCg0KCS8vIGluaXRpYWxpemUgdGhlIHJldHVybiBhcnJheQ0KCSRyZXR1cm4gPSBhcnJheSgpOw0KDQoJc3dpdGNoICgkX0dFVFsnZG8nXSkgew0KCQljYXNlICdvYXV0aCc6DQoJCQkvLyB1c2VyIGFjY2Vzcw0KCQkJdXNlcl9hY2Nlc3MoKTsNCg0KCQkJLy8gdmFsaWQgaW5wdXRzDQoJCQlpZighaXNzZXQoJF9HRVRbJ2FwcF9pZCddKSB8fCBpc19lbXB0eSgkX0dFVFsnYXBwX2lkJ10pKSB7DQoJCQkJX2Vycm9yKDQwNCk7DQoJCQl9DQoJCQkNCgkJCS8vIG9hdXRoIGFwcA0KCQkJJHVzZXItPm9hdXRoX2FwcCgkX0dFVFsnYXBwX2lkJ10pOw0KCQkJYnJlYWs7DQoNCgkJY2FzZSAnYXV0aG9yaXplJzoNCgkJCS8vIHZhbGlkIGlucHV0cw0KCQkJaWYoIWlzc2V0KCRfR0VUWydhcHBfaWQnXSkgfHwgaXNfZW1wdHkoJF9HRVRbJ2FwcF9pZCddKSkgew0KCQkJCXJldHVybl9qc29uKCBhcnJheSgnZXJyb3InID0+IHRydWUsICdtZXNzYWdlJyA9PiAiQmFkIFJlcXVlc3QsIGludmFsaWQgYXBwX2lkIikgKTsNCgkJCX0NCgkJCWlmKCFpc3NldCgkX0dFVFsnYXBwX3NlY3JldCddKSB8fCBpc19lbXB0eSgkX0dFVFsnYXBwX3NlY3JldCddKSkgew0KCQkJCXJldHVybl9qc29uKCBhcnJheSgnZXJyb3InID0+IHRydWUsICdtZXNzYWdlJyA9PiAiQmFkIFJlcXVlc3QsIGludmFsaWQgYXBwX3NlY3JldCIpICk7DQoJCQl9DQoJCQlpZighaXNzZXQoJF9HRVRbJ2F1dGhfa2V5J10pIHx8IGlzX2VtcHR5KCRfR0VUWydhdXRoX2tleSddKSkgew0KCQkJCXJldHVybl9qc29uKCBhcnJheSgnZXJyb3InID0+IHRydWUsICdtZXNzYWdlJyA9PiAiQmFkIFJlcXVlc3QsIGludmFsaWQgYXV0aF9rZXkiKSApOw0KCQkJfQ0KDQoJCQkvLyBhdXRob3JpemUgYXBwDQoJCQkkYWNjZXNzX3Rva2VuID0gJHVzZXItPmF1dGhvcml6ZV9hcHAoJF9HRVRbJ2FwcF9pZCddLCAkX0dFVFsnYXBwX3NlY3JldCddLCAkX0dFVFsnYXV0aF9rZXknXSk7DQoJCQlyZXR1cm5fanNvbiggYXJyYXkoJ2FjY2Vzc190b2tlbicgPT4gJGFjY2Vzc190b2tlbikgKTsNCgkJCWJyZWFrOw0KDQoJCWNhc2UgJ2dldF91c2VyX2luZm8nOg0KCQkJLy8gdmFsaWQgaW5wdXRzDQoJCQlpZighaXNzZXQoJF9HRVRbJ2FjY2Vzc190b2tlbiddKSB8fCBpc19lbXB0eSgkX0dFVFsnYWNjZXNzX3Rva2VuJ10pKSB7DQoJCQkJcmV0dXJuX2pzb24oIGFycmF5KCdlcnJvcicgPT4gdHJ1ZSwgJ21lc3NhZ2UnID0+ICJCYWQgUmVxdWVzdCwgaW52YWxpZCBhY2Nlc3NfdG9rZW4iKSApOw0KCQkJfQ0KCQkJDQoJCQkvLyBhY2Nlc3MgYXBwDQoJCQkkdXNlcl9pZCA9ICR1c2VyLT5hY2Nlc3NfYXBwKCRfR0VUWydhY2Nlc3NfdG9rZW4nXSk7DQoNCgkJCS8vIGdldCB1c2VyDQoJCQkkZ2V0X3VzZXIgPSAkZGItPnF1ZXJ5KHNwcmludGYoIlNFTEVDVCANCgkJCQl1c2VyX2lkLCANCgkJCQl1c2VyX25hbWUsIA0KCQkJCXVzZXJfZW1haWwsIA0KCQkJCXVzZXJfZmlyc3RuYW1lLCANCgkJCQl1c2VyX2xhc3RuYW1lLCANCgkJCQl1c2VyX2dlbmRlciwgDQoJCQkJdXNlcl9iaXJ0aGRhdGUsIA0KCQkJCXVzZXJfcGljdHVyZSwgDQoJCQkJdXNlcl9jb3ZlciwgDQoJCQkJdXNlcl9yZWdpc3RlcmVkLCANCgkJCQl1c2VyX3ZlcmlmaWVkLCANCgkJCQl1c2VyX3JlbGF0aW9uc2hpcCwgDQoJCQkJdXNlcl9iaW9ncmFwaHksDQoJCQkJdXNlcl93ZWJzaXRlDQoJCQkJRlJPTSB1c2VycyBXSEVSRSB1c2VyX2lkID0gJXMiLCBzZWN1cmUoJHVzZXJfaWQsICdpbnQnKSApKSBvciBfZXJyb3IoIlNRTF9FUlJPUl9USFJPV0VOIik7DQoJCQlpZigkZ2V0X3VzZXItPm51bV9yb3dzID4gMCkgew0KCQkJCXdoaWxlKCR1c2VyID0gJGdldF91c2VyLT5mZXRjaF9hc3NvYygpKSB7DQoJCQkJCSR1c2VyWydwcm9maWxlX3BpY3R1cmUnXSA9IGdldF9waWN0dXJlKCR1c2VyWydwcm9maWxlX3BpY3R1cmUnXSwgJHVzZXJbJ3VzZXJfZ2VuZGVyJ10pOw0KCQkJCQkkdXNlclsncHJvZmlsZV9jb3ZlciddID0gJHN5c3RlbVsnc3lzdGVtX3VwbG9hZHMnXS4iLyIuJHVzZXJbJ3Byb2ZpbGVfY292ZXInXTsNCgkJCQkJJHJldHVyblsndXNlcl9pbmZvJ10gPSAkdXNlcjsNCgkJCQl9DQoJCQl9DQoNCgkJCS8vIHJldHVybiAmIGV4aXQNCgkJCXJldHVybl9qc29uKCRyZXR1cm4pOw0KCQkJYnJlYWs7DQoJCQ0KCQlkZWZhdWx0Og0KCQkJcmV0dXJuX2pzb24oIGFycmF5KCdlcnJvcicgPT4gdHJ1ZSwgJ21lc3NhZ2UnID0+ICJCYWQgUmVxdWVzdCwgaW52YWxpZCBwYXJhbWV0ZXJzIikgKTsNCgkJCWJyZWFrOw0KCX0NCg0KfSBjYXRjaCAoRXhjZXB0aW9uICRlKSB7DQoJaWYoJF9HRVRbJ2RvJ10gPT0gIm9hdXRoIikgew0KCQlfZXJyb3IoX18oIkVycm9yIiksICRlLT5nZXRNZXNzYWdlKCkpOw0KCX0gZWxzZSB7DQoJCXJldHVybl9qc29uKCBhcnJheSgnZXJyb3InID0+IHRydWUsICdtZXNzYWdlJyA9PiAkZS0+Z2V0TWVzc2FnZSgpKSApOw0KCX0NCn0NCg0KPz4=

1
0
Would love your thoughts, please comment.x
()
x