Craft newbie : can anyone recommend a simple image slider? 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 : 

&lt;ul class="slides"&gt;
        &lt;!-- Slide 1 --&gt;

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

        &lt;!-- END Slide 1 --&gt;
        ...
&lt;/ul&gt;


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

Many thanks!
Ric
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:

&lt;ul class="slides"&gt;

    {# 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 %}
            &lt;li class="custom-bg" data-bg="{{ image.getUrl(newsSlide) }}"&gt;
                &lt;div class="flex-content flex-middle"&gt;
                    &lt;div class="container"&gt;
                        &lt;div class="row"&gt;
                            &lt;div class="col-sm-12 col-md-9"&gt;
                                &lt;h2 class="flex-title animated" data-anim="fadeInDown"&gt;{{ entry.title }}&lt;/h2&gt;
                                &lt;h3 class="flex-subtitle animated" data-anim="fadeInUp"&gt;{{ entry.subTitle }}&lt;/h3&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/li&gt;
        {% endif %}

    {% endfor %}

&lt;/ul&gt;


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...