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

CC BY-SA 3.0
2017-06-08T03:01:06.787Z
2017-06-08T03:01:06.787Z
PhilR
<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>

CC BY-SA 3.0
2017-06-03T19:10:54.153Z
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.
Matt Stein
CC BY-SA 3.0
2017-06-04T15:11:29.660Z
@MattStein sorry that was vague. I went back and added code to make my question clearer.
crash springfield
CC BY-SA 3.0
2017-06-04T15:12:14.743Z
Also, I misspoke when I said most recent; it just has place to display 6 items at a time.
crash springfield
<templating><matrix><plugins>
Change which Matrix items displayed
# 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 library.
html

  
  
  


js
$('.pictures').slick({
  infinite: true,
  slidesToShow: 6,
  slidesToScroll: 6
});

and how I'm trying to with Twig:

  {% for block in entry.recentWorkExamples %}
     
       
         {% set rw_image = block.recentWorkImage.first() %}
           
       
      
   {% endfor %}


The problems is, it doesn't swipe but all of the pictures pile up.

**Tags:** templating, matrix, plugins

> **Comments:**
> **username_1**: 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.  
> **username_0**: @MattStein 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.


---

