Sign in

Which image slider / carousel would you recommend?

  • This topic has 11 replies, 4 voices, and was last updated 4 months ago by .
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #3968
    Avatar photoVerhoeckx

    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

    #3969
    Avatar photoBob

    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!

    #3972
    Avatar photoVerhoeckx

    Thanks! I will use it!

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

     

    #3973
    Avatar photoVerhoeckx

    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.

    #3974
    Avatar photoVerhoeckx

    Not necessary anymore. I solved the problem.

    #3994
    Avatar photochampi

    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 🙂

     

    #4014
    Avatar photoVerhoeckx

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

    #8005
    Avatar photojoel.berman@gmail.com

    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

    #8010
    Avatar photoVerhoeckx

    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!

    #8011
    Avatar photojoel.berman@gmail.com

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

    I really appreciate you taking the time to reply.

    #8012
    Avatar photoVerhoeckx

    No problem!

    #8019
    Avatar photoBob

    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!

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.