Answers.Body: <p>In your Twig example your '.picutures' class name includes a leading dot. Maybe not what you want there.</p>
  
  <p>Also in your slick configuration 'slidesToShow' should be 1 if you only want to show one slide at at time. </p>
  
  <p>And slick is going to operate on the direct descendants of the selector class identified in the configuration so the intervening divs may be causing a problem depending on the associated CSS.</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-06-08T03:01:06.787Z
Answers.LastActivityDate: 2017-06-08T03:01:06.787Z
Answers.UserDisplayName: PhilR
Body: <p>I'm supposed to display the most recent 6 items from a Matrix field but provide a slider so that the user can navigate through them (hiding the ones on the left, displaying new ones on the right).</p>
  
  <p>I can think of how to do this in JavaScript, but I'm new to Twig and templating in general. How should I approach this problem?</p>
  
  <p>Updating to show how I would in Javascript using the <a href="https://kenwheeler.github.io/slick/" rel="nofollow noreferrer">slick</a> library.</p>
  
  <p>html</p>
  
  <pre><code>&lt;div class="pictures"&gt;
    &lt;img src="example1.png" /&gt;
    &lt;img src="example2.png" /&gt;
    &lt;img src="example2.png" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>js</p>
  
  <pre><code>$('.pictures').slick({
    infinite: true,
    slidesToShow: 6,
    slidesToScroll: 6
  });
  </code></pre>
  
  <p>and how I'm trying to with Twig:</p>
  
  <pre><code>&lt;div class=".pictures"&gt;
    {% for block in entry.recentWorkExamples %}
       &lt;div class="col-md-4 example-container"&gt;
         &lt;div class="example"&gt;
           {% set rw_image = block.recentWorkImage.first() %}
             &lt;img src="{{ rw_image.url }}" /&gt;
         &lt;/div&gt;
        &lt;/div&gt;
     {% endfor %}
  &lt;/div&gt;
  </code></pre>
  
  <p>The problems is, it doesn't swipe but all of the pictures pile up.</p>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-06-03T19:10:54.153Z
Comments.Text: Hi crash! I might just be lazy, but it'd help if you took a stab at some markup or shared how you'd do this in JavaScript so folks could swoop in and help with exactly the part you're missing. As it stands, your question is a bit open-ended. Even the concept of "most recent 6 items from a Matrix field" is a little confusing since Matrix fields aren't inherently time-centric like Entries.
Comments.UserDisplayName: Matt Stein
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-06-04T15:11:29.660Z
Comments.Text: @MattStein sorry that was vague. I went back and added code to make my question clearer.
Comments.UserDisplayName: crash springfield
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-06-04T15:12:14.743Z
Comments.Text: Also, I misspoke when I said most recent; it just has place to display 6 items at a time.
Comments.UserDisplayName: crash springfield
Tags: <templating><matrix><plugins>
Title: Change which Matrix items displayed
ThreadText: # Change which Matrix items displayed
  
  (Asked by: username_0 on 2017-06-02)
  
  I'm supposed to display the most recent 6 items from a Matrix field but provide a slider so that the user can navigate through them (hiding the ones on the left, displaying new ones on the right).
  
  I can think of how to do this in JavaScript, but I'm new to Twig and templating in general. How should I approach this problem?
  
  Updating to show how I would in Javascript using the [slick](https://kenwheeler.github.io/slick/) library.
  
  html
  
  ```
  <div class="pictures">
    <img src="example1.png" />
    <img src="example2.png" />
    <img src="example2.png" />
  </div>
  
  ```
  
  js
  
  ```
  $('.pictures').slick({
    infinite: true,
    slidesToShow: 6,
    slidesToScroll: 6
  });
  
  ```
  
  and how I'm trying to with Twig:
  
  ```
  <div class=".pictures">
    {% for block in entry.recentWorkExamples %}
       <div class="col-md-4 example-container">
         <div class="example">
           {% set rw_image = block.recentWorkImage.first() %}
             <img src="{{ rw_image.url }}" />
         </div>
        </div>
     {% endfor %}
  </div>
  
  ```
  
  The problems is, it doesn't swipe but all of the pictures pile up.
  
  **Tags:** templating, matrix, plugins
  
  > **Comments:**
  > **username_1**: Hi username_0! I might just be lazy, but it'd help if you took a stab at some markup or shared how you'd do this in JavaScript so folks could swoop in and help with exactly the part you're missing. As it stands, your question is a bit open-ended. Even the concept of "most recent 6 items from a Matrix field" is a little confusing since Matrix fields aren't inherently time-centric like Entries.  
  > **username_0**: @username_1 sorry that was vague. I went back and added code to make my question clearer.  
  > **username_0**: Also, I misspoke when I said most recent; it just has place to display 6 items at a time.  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_2 on 2017-06-08. Score: 1
  
  In your Twig example your '.picutures' class name includes a leading dot. Maybe not what you want there.
  
  Also in your slick configuration 'slidesToShow' should be 1 if you only want to show one slide at at time.
  
  And slick is going to operate on the direct descendants of the selector class identified in the configuration so the intervening divs may be causing a problem depending on the associated CSS.
  
  
  ---
  
  