Тёмный

How to Create a Multi Item Image Slider (w/ Tiny-slider) - HTML, CSS & JavaScript 

Web Dev Tutorials
Подписаться 15 тыс.
Просмотров 3,1 тыс.
50% 1

In this video, we'll show you how to create a multi item image carousel with HTML, CSS, JavaScript and the tiny slider library.
Codepen:
codepen.io/miguelznunez/pen/p...
Tiny slider documentation links (highly recommended):
www.npmjs.com/package/tiny-sl...
ganlanyuan.github.io/tiny-sli...
Sponsor me on GitHub!
github.com/sponsors/miguelznunez
Follow my blog:
/ miguelznunez
Email : mignunez@csumb.edu
Medium : / miguelznunez
Codepen : codepen.io/miguelznunez
GitHub : github.com/miguelznunez

Опубликовано:

 

21 июн 2022

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 15   
@rosen.espinoza9477
@rosen.espinoza9477 Год назад
Thank you for this, it helped me get through my project!!
@thecreativeguy4080
@thecreativeguy4080 2 года назад
Thanks wanted to do this did not know how
@robertodepasamonte3434
@robertodepasamonte3434 2 года назад
Very nice tutorial. Thank you for sharing. Your codepen does appear to be complete. Could you please put the source code in your github repository?
@elizarpadua1722
@elizarpadua1722 Год назад
hi thanks for sharing this. Just wondering how do you put a link in the name of each car?
@codefoxx
@codefoxx Год назад
Just use the a tag instead
@elizarpadua1722
@elizarpadua1722 Год назад
Do I still need to move the names to html or is it possible to do the a tag in js?
@RafaelHEscobar
@RafaelHEscobar Год назад
Hi there! Thanks for the tutorial. How do you set multiple sliders on a single page? I've been trying to do so but only the first one works fine and the others just break down.
@codefoxx
@codefoxx Год назад
Sure, just choose different id and class names for each new slider in the html file. You might be able to get away with just choosing different id names. Try both just in case, its been a while since I did it so I cant remember forsure. And dont forget to add the new id names in the CSS file so the styles can apply to each new slider. Also create a variable for each slider in the javascript file. For example, you can have tnsSlider1 and tnsSlider2, otherwise your confusing the tiny slider library and it cant differentiate between each slider. Let me know if that helps
@RafaelHEscobar
@RafaelHEscobar Год назад
@@codefoxx Super helpful. Thanks!
@E-Watcher
@E-Watcher Год назад
hi I tried creating but using PHP to access images from database it didn't work, the image slides became vertically aligned. May I know what went wrong?
@codefoxx
@codefoxx Год назад
I would need to see your code
@E-Watcher
@E-Watcher Год назад
@@codefoxx PHP CODE
@timstrawbridge
@timstrawbridge Год назад
Did you initialize the slider correctly?
@astaro7432
@astaro7432 Год назад
, during the second wave..
Далее