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>