Pimp my Carousel: random sorting images

1

Hi there!
For a website in Github-pages that I’m developing, I’m using this Slider Carousel.
I’d like to have a random order everytime the page is reloaded. Is that possible?
From this thread I’ve found that I could use the sample filter:

{% assign n = site.posts | size %}
{% assign posts = site.posts | sample: n %}
{% for post in posts %}
    * {{ post.title }}
{% endfor %}

But I don’t know how how to implement that code in the carousel.html code.
Can you please suggest me some way to do it?

By the way, in order to have more image on show in the carousel I edited the first line of carousel.html like this:

{% assign letterstring = "a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,x,y,w,z,a0,b0,c0,d0,e0,f0,g0,h0,i0,j0,k0,l0,m0,n0,o0,p0,q0,r0,s0,t0,u0,v0,x0,y0,w0,z0,a1,b1,c1,d1,e1,f1,g1,h1,i1,j1,k1,l1,m1,n1,o1,p1,q1,r1,s1,t1,u1,v1,x1,y1,w1,z1, s2,b2,c2,d2,e2,f2,g2,h2,i2,j2,k2,l2,m2,n2,o2,p2,q2,r2,s2,t2,u2,v2,x2,y2,w2,z2" %}

It allows me to have more image in the slideshow but it doesn’t feel an elegant way to deal with the limit of the code. Maybe you have a better idea?
Thank you very much for you help

2

jekyll sites are built once and then that is what you get - so if you use just liquid I don’t think you can do anything random as it won’t run again (until you build the site again). So your randomness will only be random each time you build.

You would need to do something with javascript for it to be actually random and that may be a bit of work.

1 Like
3

Yes, thank you, I’ve finally understood what static means!
I will try with java script then.

4

You can add this to the footer of your carousel.html file:

<script>
  var uls = document.querySelectorAll('.carousel__track ul');
  uls.forEach(function(ul) {
    for (var i = ul.children.length; i >= 0; i--) {
      ul.appendChild(ul.children[Math.random() * i | 0]);
    }
  });
</script>

It supports more than one carousel on a page.

1 Like