1

I'm very new to Craft and am having some trouble creating an image carousel from a Super Table. I created a Matrix field called 'rotator' it has one field called 'rotatorContents' which is a Super Table:

enter image description here

enter image description here

rotatorContents has 3 fields: slide image, slide description, and slide title. I'm using a for loop to loop through the rows of the Super Table

{% if module.type == "rotator" %}
    {% for row in module.rotatorContents %}
        {% set slide = row.slideImage.first() %}
        <div class="rotator"> 
       <div class="rotator__item">
          <img src="{{ slideImage.first().url}}" alt="slideImage.title">
       </div>
       <div class="switcher">
       <span class="previous">
       <a href="{{ need prev slide link here}}"> ‹</a>
      </span>
     <span class="previous__title">
     {{need prev slide title here}}
    </span>
<div class="divider">

</div>
<span class="content">
    {% set title = row.slideTitle.first() %}
    {% set description = row.slideDescription.first() %}
    <p>{{ title }}</p>
    <p>{{ description }}</p>
</span>
<span class="next">
      <a href="{{need link to next slide here}}"> ›</a>
</span>
 <span class="previous__title">
     {{need prev slide title here}}
  </span>
 </div>
 </div>
 {% endfor %}
 {% endif %}

As you can see from the code above I am not sure how to reference the previous row in the Super Table. From a user standpoint they can input as many slides as they like. So at any given time there should be an active slide that is displayed and arrows linking to the previous slide and next slide.

How do I go about fetching the slide that's before the active slide and the slide that's after the active slide? Or in other terms getting the previous row and the next row after the current one in the Super Table?

Also I'm sure there are also some other things I'm referring to wrong since this is my first time using Super Table, such as my usage of .first().

2

Welcome to Craft!

Is it essential that you use SuperTable for this? The behavior you are describing is exactly what Matrix fields are designed to do, so you could quite easily achieve this without using SuperTable.

Take a look at this screenshot; this is how I would set up my matrix field to allow me to content manage a slider (using the field names in your example):

enter image description here

Hopefully that screenshot is easy to follow. This also means the markup is much easier:

{# Check if the "Rotator" matrix field has any content #}
{% if entry.rotator %}
  <div class="slider-wrapper">

    {# For each slide, do this #}
    {% for slide in entry.rotator %}
      <h2>{{ slide.rotatorTitle }}</h2>
      <p>{{ slide.rotatorDescription }}</p>
    {% endfor %}

  </div>
{% endif %}

Just a quick markup example to get you started. Take a look through the Craft Docs for using matrix fiels as well.

But to answer your question, I'd recommend checking out BXSlider. The markup is very simple and easy to integrate with Craft/Twig. It's what I use myself and I love it. It will just build a simple next/previous slider for you.

  • Further to my answer, I may have completely missed the point of the OP's question, just wanted to see why SuperTable was being used and suggest an easier alternative. – Jamie Wade Nov 22 '16 at 19:08
  • So the 'rotator' is already within a Matrix called Content Modules and since Craft wouldn't let me do a Matrix within a Matrix, I used a Super Table within a Matrix. Do you know how to reference the previous and next rows in a Super Table? Also thank you for your suggestion. I'm going to try to do it that way. – Mia Nov 22 '16 at 19:35
  • Also for each image there has to be exactly one title and exactly one description so how would I verify that using your above method? – Mia Nov 22 '16 at 19:43

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.