We're evolving to serve you better! This current forum has transitioned to read-only mode. For new discussions, support, and engagement, we've moved to GitHub Discussions.

Which image slider / carousel would you recommend?

  • #3968
    Avatar photo[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.


    Avatar photoBob


    I use the Tiny 2 slider almost every time I need a slider, very powerful with many options, and written in simple “vanilla” javascript.


    Avatar photo[anonymous]

    Thanks! I will use it!

    The fact that you use it, gives me the confidences that it’s a good image slider / carousel!

    Avatar photo[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.

    Avatar photo[anonymous]

    Not necessary anymore. I solved the problem.

    Avatar photo[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 🙂

    Avatar photo[anonymous]

    I just want to let you know that the lazy image loading of Tiny Slider 2 works great!

    Avatar photo[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.


    Avatar photo[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="">				
      <script src=""></script>		

    At the end of the file:

    {{#is "index"}}					
        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

    Good luck!

    Avatar photo[anonymous]

    Thanks so much.  My biggest issue is where to put things.

    I really appreciate you taking the time to reply.

    Avatar photo[anonymous]

    No problem!

    Avatar photoBob

    I also recommend the Embla carousel script: ; lightweight, modular, vanilla js.