How to use Super Table to create an Image Carousel?

Question

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() %}
        <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().

Answer 1

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