0

I have just started working with Craft and I'm learning as I go, by porting over an existing site to it. It's mostly going well.

However, I stumbled when I tried integrating an imageslider on the Homepage. It's a slider called Flexslider, and I've been unsuccessful in integrating it as a series of entries for each slide. When the browser tries to render the page it stops at the "data-bg" tag...

Here is my code :

<ul class="slides">
        <!-- Slide 1 -->

        <li class="custom-bg" data-bg="{{ entry.imageCarousel1 }}">                                                             
            <div class="flex-content flex-middle">                                  
                <div class="container">                                         
                    <div class="row">                                                   
                        <div class="col-sm-12 col-md-9">                                                            
                            <h2 class="flex-title animated" data-anim="fadeInDown">{{ entry.slideTitle }}</h2>                                    
                            <h3 class="flex-subtitle animated" data-anim="fadeInUp">{{ entry.slideSubtitle }}</h3>                                  
                        </div>                                                  
                    </div>                                              
                </div>                                      
            </div>                              
        </li>

        <!-- END Slide 1 -->
        ...
</ul>

I'm open to replacing Flexslider with a more Craft-friendly slider, if anyone can point me in the right direction?

Many thanks! Ric

2
  • Hey Ric, there's no such thing as a Craft friendly slider as you have complete control how to output the HTML with Craft. So you should get every slider to work, even this Flexslider when you're looping through the assets correctly and output the URL with getUrl().
    – carlcs
    Feb 16, 2016 at 12:02

1 Answer 1

3

There's quite a lot missing from your code / question. I'll make some assumptions.

  • Your slider is on a the Home page of your site (not a single entry page/template)
  • Your have a Section in Craft called "News"
  • Your slides consist of custom fields within News, called: 'news cover image', 'title' and 'sub title'
  • You have an Image Transform configured in Craft called "News Slide"

Your code could then, look like this:

<ul class="slides">

    {# Find the most recent 3 entries in the News Section #}
    {% set newsEntries = craft.entries.section('news').limit(3) %}

    {% for entry in newsEntries %}

        {% set image = entry.newsCoverImage.first() %}
        {% if image %}
            <li class="custom-bg" data-bg="{{ image.getUrl(newsSlide) }}">
                <div class="flex-content flex-middle">
                    <div class="container">
                        <div class="row">
                            <div class="col-sm-12 col-md-9">
                                <h2 class="flex-title animated" data-anim="fadeInDown">{{ entry.title }}</h2>
                                <h3 class="flex-subtitle animated" data-anim="fadeInUp">{{ entry.subTitle }}</h3>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        {% endif %}

    {% endfor %}

</ul>

The first Set tag finds the most recent 3 News entries (More info here...)

The For loop contains the slides and will loop x3 times.

The Set-image tag grabs the first asset (image) assigned to the "news cover image" custom field.

Let us know how you get on...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.