Answers.Body: <p>There's quite a lot missing from your code / question. I'll make some assumptions.</p>
  
  <ul>
  <li>Your <strong>slider is on a the Home page</strong> of your site (not a single entry page/template)</li>
  <li>Your have a Section in Craft called "<strong>News</strong>"</li>
  <li>Your slides consist of custom fields within News, called: '<strong>news cover image</strong>', '<strong>title</strong>' and '<strong>sub title</strong>'</li>
  <li>You have an Image Transform configured in Craft called "<strong>News Slide</strong>"</li>
  </ul>
  
  <p>Your code could then, look like this:</p>
  
  <pre><code>&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;
  </code></pre>
  
  <p>The first <strong>Set</strong> tag finds the most recent 3 News entries (<a href="https://craftcms.com/docs/templating/craft.entries" rel="nofollow">More info here...</a>)</p>
  
  <p>The <strong>For loop</strong> contains the slides and will loop x3 times.</p>
  
  <p>The Set-image tag grabs the first asset (image) assigned to the "news cover image" custom field.</p>
  
  <p>Let us know how you get on...</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-02-16T12:19:33.777Z
Answers.LastActivityDate: 2016-02-16T12:43:03.383Z
Answers.LastEditDate: 2016-02-16T12:43:03.383Z
Answers.UserDisplayName: Matt P
Body: <p>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.</p>
  
  <p>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...</p>
  
  <p>Here is my code : </p>
  
  <pre><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;
  </code></pre>
  
  <p>I'm open to replacing Flexslider with a more Craft-friendly slider, if anyone can point me in the right direction?</p>
  
  <p>Many thanks!
  Ric</p>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2016-02-16T12:02:16.187Z
Comments.Text: 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().
Comments.UserDisplayName: carlcs
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2016-02-16T12:02:25.760Z
Comments.Text: https://craftcms.com/docs/assets-fields#examples
Comments.UserDisplayName: carlcs
Tags: <templating><entries><assets>
Title: Craft newbie : can anyone recommend a simple image slider?
ThreadText: # Craft newbie : can anyone recommend a simple image slider?
  
  (Asked by: username_0 on 2016-02-16)
  
  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
  
  **Tags:** templating, entries, assets
  
  > **Comments:**
  > **username_1**: 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().  
  > **username_1**: https://craftcms.com/docs/assets-fields#examples  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_2 on 2016-02-16. Score: 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...](https://craftcms.com/docs/templating/craft.entries))
  
  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...
  
  
  ---
  
  