Fred tutorials?

Support Extras
4

Hello again @inside-creative. Hope you’re doing alright in your quarantine!

I tried using your option #2 above to create an element for a basic Bootstrap slider but didn’t get very far :grimacing: This is what I’ve got:

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
    
  <div class="carousel-inner">
    {% for i in 0..(items - 1) %}
        <div data-fred-name="gallery-item-{{i}}">
            <div class="carousel-item"><!-- Need to add active class for active slide -->
              <img class="d-block w-100" src="https://via.placeholder.com/300x150?text={{i}}" alt="" data-fred-name="gallery-image-{{i}}">
            </div>
        </div>
    {% endfor %}
  </div>

  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
  
</div>

Options:

{
  "remote": true,
  "settings": [
    {
      "type": "slider",
      "name": "items",
      "label": "Slider items",
      "min": 1,
      "max": 25,
      "step": 1,
      "value": 3
    }
  ]
}

This gives me a slider with one slide with the number 3 on it. The number changes according to what I set the option slider to, which is a start I guess :sweat_smile:

How would I go about so I can add more images etc? If you have the time…