layout: default
{% assign list = site.posts | where: “layout”,“album”%} <div class=“album-slider”>
{% for post in list %} {% if post.cover_number %} {% if post.cover_number >= post.photos.size %} {% assign cover_number = -1 %} {% else %} {% assign cover_number = post.cover_number %} {% endif %} {% else %} {% assign cover_number = 0 %} {% endif %} {% assign cover_url = post.photos[cover_number].url %} <div class="album-container scroll"> <section class="home-visual album-section d-flex flex-column align-items-center" style="background-image: url(.{{ cover_url }})" src="{{cover_url}}"> <a href="{{ post.url | prepend: site.baseurl }}" > <div class="album-corner"> <h2 class="album-title">{{post.title}}</h2> </div> </a> <div class="album-enter "> Click to enter </div> </section> </div> {% endfor %}
</div> <script type=“text/javascript”>
$(document).ready(function () { $('.album-slider').slick({ lazyLoad: 'ondemand', slidesToShow: 1, dots: true, autoplay: true, autoplaySpeed: 2000, responsive: [ { breakpoint: 768, settings: { arrows: false, slidesToShow: 3 } }, { breakpoint: 480, settings: { arrows: false, slidesToShow: 1 } } ] }); });
</script>