Creating an Owl Carousel with the Recently Viewed Products widget (CE 2.2.6)

[max_atkins]

I've created a custom container to hold a Recently Viewed Products widget but I would like it to become an Owl Carousel. I've overridden 

vendor/magento/module-catalog/view/frontend/web/template/product/list/listing.html

. Below is my edit to this file:

<div if="hasData()"
 class="recently-carousel product-carousel owl-carousel" css="additionalClasses"
 afterRender="function() {
     jQuery('.recently-carousel').owlCarousel({
        nav: true,
        dots: true,
        items: 4,
        margin: 25,
        autoplay: true,
        smartSpeed: 500,
        lazyLoad: true,
        responsive: {
            0: {
                items: 1
            },
            640: {
                items: 2
            },
            1025: {
                items: 3
            },
            1400: {
                items: 4
            }
        }
     });
 }"
 >
<div class="block-content">
    <div css="'products-' + displayMode">
        <ol class="product-items">
            <li class="product-item" repeat="foreach: filteredRows, item: '$row'">
                <div class="product-item-info">
                    <fastForEach args="data: getRegion('general-area'), as: '$col'" >
                        <render args="$col.getBody()"/>
                    </fastForEach>

                    <div class="product-item-details">
                        <fastForEach args="data: getRegion('details-area'), as: '$col'" >
                            <render args="$col.getBody()"/>
                        </fastForEach>

                        <div if="getRegion('action-primary-area')().length || getRegion('action-secondary-area')().length"
                             class="product-item-actions">
                            <div class="actions-primary" if="getRegion('action-primary-area')().length">
                                <fastForEach args="data: getRegion('action-primary-area'), as: '$col'" >
                                    <render args="$col.getBody()"/>
                                </fastForEach>
                            </div>

                            <div if="getRegion('action-secondary-area')().length"
                                 class="actions-secondary"
                                 data-role="add-to-links">
                                <fastForEach args="data: getRegion('action-secondary-area'), as: '$col'" >
                                    <render args="$col.getBody()"/>
                                </fastForEach>
                            </div>
                        </div>

                        <div if="getRegion('description-area')().length"
                             class="product-item-description">
                            <fastForEach args="data: getRegion('description-area'), as: '$col'" >
                                <render args="$col.getBody()"/>
                            </fastForEach>
                        </div>
                    </div>
                </div>
            </li>
        </ol>
    </div>
</div>
</div>

This is creating an Owl Carousel that treats the block-content as an item and so only has one item containing all the products. I've tried adding 

nestedItemSelector: '.product-item'

 and 

itemElement: 'li'

 but this produces the below error:

Uncaught Error: Unable to process binding "if: function(){return hasData() }"
Message: Unable to process binding "repeat: function(){return {foreach:filteredRows,item:'$row'} }"
Message: Repeat binding requires a single element to repeat

Any ideas on how to turn this into a proper Owl Carousel?