Best way to implement a image slider with html content using Fred

What is the best way to implement a slider in Fred?

I am using:

  • Owl Slider
  • MODX 2.7.1-pl
  • Fred 1.1.0-alpha2

With the code below I get this error in console when I try to save in Fred on front-end:

Uncaught TypeError: Cannot read property ‘getContent’ of undefined
at e.value (fred.min.js:1)

Theme is assigned.

Slider container chunk

<div id="content" data-fred-dropzone="content" class="col-md-8 owl-init slider-main owl-carousel" data-items="1" data-dots="false" data-nav="true">
    [[*content]]
</div>

Slide element

<div class="item-slide">
    <div class="card-banner" style="height:600px;">
        <div class="overlay-cover d-flex align-items-center justify-content-center">
            <div class="text-center">
                <h3 data-fred-name="slider_header">Default Value</h3>
                <p data-fred-name="slider_text">This is some default text.</a>
            </div>
        </div>
    </div>
</div>

I love Owl Carousel. :sunglasses:

Questions:

  • Is Fred working in other capacities on your site?
  • Are you getting the error in any other instance, or just with your image slider implementation?