layout: default


{% assign list = site.posts | where: “layout”,“preset”%} {% assign counter = 0 %} <div id=“preset-slider”> {% for post in list %}

{% assign counter = counter | plus:1 %}
<!-- <a href="{{ post.url | prepend: site.baseurl }}"  >
    <p>{{post.title}}</p>
</a> -->
<section class="home-kanban"
style="background-image: url(.{{ post.derivation_img}})">
    <div class="home-kanban__inner">
        <div class="home-kanban__bg sp">
        </div><!-- .home-kanban__bg -->
        <div class="home-kanban__ttl">
            <h2 class="u-ttl__02" style="color: white !important;">{{post.title}}</h2>
            <p class="u-txt__label">{{post.description[0] | truncate: 150 }}</p>
            <p class="u-txt__link u-txt__link--blank">
                <a href="{{ post.url | prepend: site.baseurl }}" target="_blank">Learn more & Download </a>
                <h2 class="u-ttl__02 u-ttl__number" style="text-align: end; color: white !important;">{{counter}} / {{list | size}}</h2>
            </p>
        </div><!-- .home-kanban__ttl -->
    </div>
</section>

{% endfor %} </div> <style>

.slick-dots{
    bottom: -27vh !important;
}
h2{
    color: white;
}

</style> <script type=“text/javascript”>

$(document).ready(function () {
    $('#preset-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>