Which image slider / carousel would you recommend?
- 
		
			
				
October 5, 2020 at 6:27 pm #3968
[anonymous]
		
		
	Hi Publii users and developers,
I want to add an image slider / carousel to the homepage of my website.
Which one would you recommend?
The image slider / carousel has to be responsive of course.
Verhoeckx
October 5, 2020 at 6:38 pm #3969
Bob
		
		
	Hi,
I use the Tiny 2 slider almost every time I need a slider, very powerful with many options, and written in simple “vanilla” javascript.
October 5, 2020 at 7:23 pm #3972
[anonymous]
		
		
	Thanks! I will use it!
The fact that you use it, gives me the confidences that it’s a good image slider / carousel!
October 5, 2020 at 9:22 pm #3973
[anonymous]
		
		
	Do you have an example somewhere?
I just implemented Tiny Slider 2 but it doesn’t work and I do not get any JavaScript errors.
October 5, 2020 at 9:30 pm #3974
[anonymous]
		
		
	Not necessary anymore. I solved the problem.
October 8, 2020 at 7:55 pm #3994
[anonymous]
		
		
	I didn’t know Tiny Slider 2. Seems pretty cool and light as well !
I’m using Slick Slider most of the time. It’s not as light as Tiny but I love one feature in particular : Being able to control one slider with another. Super useful for creating horizontal timelines for example. But Tiny has the nested feature which I missed once for a previous project.
For my current project I have tested Swiper, a mobile first oriented slider. Not bad but Tiny could have the missing feature we needed : an efficient swipe module. And the minified js is pretty big… Maybe I’ll have a look next time 🙂
October 9, 2020 at 9:49 am #4014
[anonymous]
		
		
	I just want to let you know that the lazy image loading of Tiny Slider 2 works great!
August 6, 2022 at 9:30 pm #8005
[anonymous]
		
		
	Could you please give an example of what you added and where?
I don’t know much about javascript, but I know you need to load the library, add some css, then add the images and javascript. I tried following the instructions in the tiny-slider github but could not get it to work.
I tried adding stuff directly to the html post, and also adding to the custom css and html in tools. But I have not gotten it to work.
I especially would like the hero imge on my front page to rotate through a few images, but I think if I can get anything to work I can figure out the rest.
Thanks
August 8, 2022 at 2:47 pm #8010
[anonymous]
		
		
	Hello Joel,
Sorry, but I removed the Tiny Slider carousel on my homepage and also removed all the code.
Having said that, I found the following code (see below). Maybe it can still help you?
In het head of the homepage:
{{#is "index"}} <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.3/tiny-slider.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.3/min/tiny-slider.js"></script> {{/is}}At the end of the file:
{{#is "index"}} <script> var slider = tns({ container: '.slider', mode: 'carousel', axis: 'horizontal', items: 1, slideBy: 1, controls: false, nav: true, navPosition: 'bottom', speed: 1000, autoplayPosition: 'bottom', autoplayTimeout: 5000, autoplayText: ["<i class='material-icons'>play_arrow</i>", "<i class='material-icons'>pause</i>"], loop: true, lazyload: true, responsive: { 1200: { touch: false, autoplay: true, items: 1, slideBy: 1, arrowKeys: true } } }); //slider.pause(); </script> {{/is}}Good luck!
August 8, 2022 at 3:54 pm #8011
[anonymous]
		
		
	Thanks so much. My biggest issue is where to put things.
I really appreciate you taking the time to reply.
August 8, 2022 at 6:15 pm #8012
[anonymous]
		
		
	No problem!
August 9, 2022 at 6:54 pm #8019
Bob
		
		
	I also recommend the Embla carousel script:Â https://www.embla-carousel.com/ ; lightweight, modular, vanilla js.