<p>Welcome to Craft!</p>

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

<p>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):</p>

<p><a href="https://i.sstatic.net/RRbJf.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/RRbJf.jpg" alt="enter image description here"></a></p>

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

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

    {# For each slide, do this #}
    {% for slide in entry.rotator %}
      &lt;h2&gt;{{ slide.rotatorTitle }}&lt;/h2&gt;
      &lt;p&gt;{{ slide.rotatorDescription }}&lt;/p&gt;
    {% endfor %}

  &lt;/div&gt;
{% endif %}
</code></pre>

<p>Just a quick markup example to get you started. Take a look through the Craft Docs for <a href="https://craftcms.com/docs/matrix-fields" rel="nofollow noreferrer">using matrix fiels</a> as well.</p>

<p>But to answer your question, I'd recommend checking out <a href="http://bxslider.com/" rel="nofollow noreferrer">BXSlider</a>. 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.</p>

CC BY-SA 3.0
2016-11-22T19:08:52.933Z
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
CC BY-SA 3.0
2016-11-22T19:35:43.243Z
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
CC BY-SA 3.0
2016-11-22T19:43:22.860Z
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
CC BY-SA 3.0
2016-11-22T19:07:39.217Z
2016-11-22T19:07:39.217Z
Jamie Wade
<p>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:</p>

<p><a href="https://i.sstatic.net/GXPjk.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/GXPjk.png" alt="enter image description here"></a></p>

<p><a href="https://i.sstatic.net/S0E1l.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/S0E1l.png" alt="enter image description here"></a></p>

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

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

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

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

<p>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?</p>

<p>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(). </p>

<templating><plugin-supertable>
How to use Super Table to create an Image Carousel?
# How to use Super Table to create an Image Carousel?

(Asked by: username_0 on 2016-11-22)

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:


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() %}
         
       
          
       
       
       
        ‹
      
     
     {{need prev slide title here}}
    




    {% set title = row.slideTitle.first() %}
    {% set description = row.slideDescription.first() %}
    {{ title }}
    {{ description }}


       ›

 
     {{need prev slide title here}}
  
 
 
 {% 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().

**Tags:** templating, plugin-supertable

---

## 1 answers

### Answer by username_1 on 2016-11-22. Score: 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):

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

    {# For each slide, do this #}
    {% for slide in entry.rotator %}
      {{ slide.rotatorTitle }}
      {{ slide.rotatorDescription }}
    {% endfor %}

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

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

---

