1

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

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

  • 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 Jun 3 '17 at 19:10
  • @MattStein sorry that was vague. I went back and added code to make my question clearer. – crash springfield Jun 4 '17 at 15:11
  • Also, I misspoke when I said most recent; it just has place to display 6 items at a time. – crash springfield Jun 4 '17 at 15:12
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.

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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