Cacher is the code snippet organizer for pro developers

<script>
    var $ = jQuery;

    $(document).ready(function () {
        var itemSlider = document.querySelector('.item-slider .flickity-slider');
        //Config to check for classes changes within the element
        const config = { attributes: true, childList: true, subtree: true, attributeFilter: ['class'] };
        //Trigger observation event only when mutation is an attribute change, filtered by class.
        const sliderUpdate = function (mutationsList, observer) {
            for (let mutation of mutationsList) {
                if (mutation.type === 'attributes') {
                    modifyOpacity();
                }
            }
        };
        //Initialise observer
        const observer = new MutationObserver(sliderUpdate);
        observer.observe(itemSlider, config);
    });

    function modifyOpacity() {
        var $itemSlider = $('.item-slider .flickity-slider')
        var selectedSlide = $itemSlider.find('.is-selected');
        // Reset all opacities to half
        halfOpacity($itemSlider);
        // Set is-selected and neighbour elements opacity
        fullOpacity(selectedSlide)
        if (selectedSlide.next().length == 0) {
            fullOpacity($('.item-slide-section').eq(0));
        } else {
            fullOpacity(selectedSlide.next());
        }
        if (selectedSlide.prev().length == 0) {
            fullOpacity($('.item-slide-section').eq(4));
        } else {
            fullOpacity(selectedSlide.prev());
        }
    }

    function halfOpacity() {
        $('.item-slide-section').css("opacity", "0.5");
    }
    function fullOpacity(elem) {
        elem.css("opacity", "1");
    }


</script>

[row label="Item Slider Header"]

[col span__sm="12"]

<h2>Lose Weight with Unbeatable Taste & Value</h2>
<p>All of our shakes, meals, soups and bars can be purchased individually below or possibly cheaper as<span class="text-blue"> part of a plan.</span></p>

[/col]

[/row]
[ux_slider label="Item Details" class="item-slider"]

[section padding="0px" class="item-slide-section"]

[row style="small"]

[col span__sm="12"]

<div class="item-slide-block">
<div class="item-image-block"><img src="/wp-content/uploads/2019/09/food-item-1.jpg"></p>
<h5 class="bg-blue">From only 99p Per Shake!</h5>
</div>
<div class="item-cta">
<h3>Milk Shakes</h3>
<p><a class="button secondary btn-secondary btn-tall" style="border-radius:3px;">VIew the Range</a></div>
</div>

[/col]

[/row]

[/section]
[section padding="0px" class="item-slide-section"]

[row style="small"]

[col span__sm="12"]

<div class="item-slide-block">
<div class="item-image-block"><img src="/wp-content/uploads/2019/09/food-item-2.jpg"></p>
<h5 class="bg-blue">From only 99p Per Meal!</h5>
</div>
<div class="item-cta">
<h3>Meals</h3>
<p><a class="button secondary btn-secondary btn-tall" style="border-radius:3px;">VIew the Range</a></div>
</div>

[/col]

[/row]

[/section]
[section padding="0px" class="item-slide-section"]

[row style="small"]

[col span__sm="12"]

<div class="item-slide-block">
<div class="item-image-block"><img src="/wp-content/uploads/2019/09/food-item-3.jpg"></p>
<h5 class="bg-blue">From only 99p Per Sachet!</h5>
</div>
<div class="item-cta">
<h3>Soups</h3>
<p><a class="button secondary btn-secondary btn-tall" style="border-radius:3px;">VIew the Range</a></div>
</div>

[/col]

[/row]

[/section]
[section padding="0px" class="item-slide-section"]

[row style="small"]

[col span__sm="12"]

<div class="item-slide-block">
<div class="item-image-block"><img src="/wp-content/uploads/2019/09/food-item-3.jpg"></p>
<h5 class="bg-blue">From only 99p Per Sachet!</h5>
</div>
<div class="item-cta">
<h3>Soups</h3>
<p><a class="button secondary btn-secondary btn-tall" style="border-radius:3px;">VIew the Range</a></div>
</div>

[/col]

[/row]

[/section]
[section padding="0px" class="item-slide-section"]

[row style="small"]

[col span__sm="12"]

<div class="item-slide-block">
<div class="item-image-block"><img src="/wp-content/uploads/2019/09/food-item-3.jpg"></p>
<h5 class="bg-blue">From only 99p Per Sachet!</h5>
</div>
<div class="item-cta">
<h3>Soups</h3>
<p><a class="button secondary btn-secondary btn-tall" style="border-radius:3px;">VIew the Range</a></div>
</div>

[/col]

[/row]

[/section]

[/ux_slider]