[Verhoeckx]

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

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

repo: https://github.com/ganlanyuan/tiny-slider

--
Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

[Verhoeckx]

Thanks! I will use it!

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

 

[Verhoeckx]

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.

[Verhoeckx]

Not necessary anymore. I solved the problem.

[champi]

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 🙂

 

[Verhoeckx]

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

[joel]

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

[Verhoeckx]

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!

[joel]

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

I really appreciate you taking the time to reply.

[Verhoeckx]

No problem!

[Bob]

I also recommend the Embla carousel script:  https://www.embla-carousel.com/ ; lightweight, modular, vanilla js.

--
Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

[Author]

Posts