My goal is to set up a carousel that features specific posts, creating a visually appealing layout.
Since the jekyll theme I'm using comes equipped with Bootstrap 4, I decided to utilize a pre-existing carousel code from Bootstrap.
To achieve this, I contemplated adding a "slider" category in the front matter for marking posts to be displayed within the carousel. However, my limited expertise with liquid makes it challenging to pinpoint and display only those specific posts as a novice in Jekyll development.
I also attempted to use the Slider/Carousel plugin, which successfully showcased posts instead of placeholder images, but once again, I struggled to selectively choose individual posts for display.
Considering my beginner status, I believe utilizing the bootstrap slider would be more manageable to customize and feature certain posts within the carousel.
In summary, I aim to implement a carousel on Jekyll featuring distinct posts, yet my understanding of liquid falls short.
Below is the code snippet for the Bootstrap 4 slider without any liquid integration:
!--Carousel Wrapper-->
<div id="carousel-example-2" class="carousel slide carousel-fade" data-ride="carousel">
...
</div>
<!--/.Carousel Wrapper-->
Additionally, here's an attempt at customizing the carousel with Slider/Carousel: I included {% for post in site.posts %}, however, despite displaying all posts, the functionality doesn't align with my objective of selective post presentation.
{% assign letterstring = "a,b,c,d,e,f,g,h,i,j,k,l,m,n" %}
{% assign letters = letterstring | split: ',' %}
<div class="carousel__holder">
<div class="carousel">
{% for post in site.posts %}
... (remaining excerpt)
{% endfor %}
<div class="carousel__track">
<ul>
{% for post in site.posts %}
<li class="carousel__slide" style="background-image: url('{{ post.image }}');"><a href="{{ post.url }}">{{ post.title }}</a></li>
{% endfor %}
</ul>
</div>
<div class="carousel__indicators">
{% for post in site.posts %}
... (remaining excerpt)
{% endfor %}
</div>
</div>
</div>