You already of the code ready so you probably wouldn’t want to switch to a new setup…
If you have ensured that your sliders are working from your static html code, all you need to do is integrate it into your blog listing page.
The blog list is essentially a loop. {% for content in contents %} {# listing markup & html #} {% endfor %}.
If you are familiar with other content management systems, WordPress for instance, than you should understand the basic concepts of a forloop. Your wrapper html goes outside the loop, the code creating the single item of the list goes instead the list so it repeats.
<div class="slider_wrapper_code">
{% for content in contents %}
<div class="slider_item_code"></div>
{% endfor %}
</div>
The contents loop is a generally loop that pulls all blog items of the blog you are using. This will list out all of your blogs.
You want to break your blogs up. If you want one of your lists to contain all blogs then use the above loop. For the other lists, you need to decide how you want to break them up. I would suggest by topic as this is really your only/best option.
for this you can use a custom HubL function, which can be found in the functions section of the HubL docs:
{% set topic_posts = blog_recent_topic_posts('default', 'marketing-tips', 5) %}
{% for topic_post in topic_posts %}
<div class="post-title">{{ topic_post.name }}</div>
{% endfor %}
While the contents loop is available by default in your blog template, you can create you own version of this loop and define parameters. Also, because you are creating this yourself it can be used anywhere, not just the blog page.
This is pretty simple and you can literally copy and paste this. The first part “set” creates a new loop and sets it to the “topic_post” variable. The parameters of this loop are that it will use the default blog (can change to blog id), only blogs with the topic ‘marking-tips’ will be included (notice the hyphen ‘-’ because it takes the topic slug not name), and only 5 posts will be included in the list.
After that it is no different than the contents loop, only instead of contents you would use your new loop name, ‘topic_post’, in this case.
You can create one of these for each of your lists, wrap the loop in your slider wrapper code, put your individual item code inside the loop, and everything should work for you.