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>