An Image Slider Linked to Blog

[ipowell]

Hey everybody,

I'm trying to create an image slider that pulls from our latest blog posts. So each slide would be linked to an individual blog post, using the featured image. This would be used as a global module within the landing pages, not within the blog itself.

I'm trying to figure out the best place to start with this. I would like for it to have a link and short description to the post within the caption as well.

Any advice is appreciated. Thanks!

[anders_grove · Accepted solution]

You'll have to use a HUBL module to create a custom slider. I find slick quite usefull and easy to implement: http://kenwheeler.github.io/slick/#getting-started

You can then loop through the most recent blog posts like so:

<!-- Slider wrapping div-->
<div id="carousel" class="slider-wrapper">

    <!-- Grab the 10 latest posts -->
    {% set posts = blog_recent_posts('default', 10) %}
    
    {% for post in posts %}
    <!-- Loop though and print out below for each post -->
        <div class="span4 carousel-card">
            <a href="{{post.absolute_url}}">
                <div class="card-bg-image"  style="background-image: url('{{ post.featured_image }}');"></div>
                <div class="card-container">
                    <p class="u-color--grey"><em>By {{ post.blog_post_author.display_name }} - {{ post.publish_date|datetimeformat('%B %d, %Y') }}</em></p>
                    <h4 class="card-heading">{{ post.name }}</h4>
                </div>
            </a>
        </div>

    {% endfor %}

</div>

[ipowell]

This is awesome! I started out with a custom module originally, and it was close, but I realized what I was doing wrong now thanks to your suggestion. Thank you so much!