Hi, this is the current code I have:

@inherits umbraco.MacroEngines.DynamicNodeContext

@{
    var gallery = Model.MediaById(Model.Gallery);
}

@if (Model.HasValue("Gallery"))
{
    var galleryImages = gallery.Children ?? gallery;
    <div class="gallery">
        @if (galleryImages.Count() > 1)
        {
            <a href="#" class="gallery-control gallery-prev" data-direction="-1">Previous</a>
            <a href="#" class="gallery-control gallery-next" data-direction="1">Next</a>
            <ul class="inner">
                @foreach (var image in galleryImages)
                {
                    <li><img src="@image.umbracoFile?w=892" alt="@image.Name" /></li>
                }
            </ul>
        }
        else
        {
            <ul class="inner">
                <li><img src="@gallery.umbracoFile?w=892" alt="@gallery.Name" /></li>
            </ul>
        }
    </div>
}

Which has back and next buttons but how do I add a working play/pause button?

Thanks