TourIAm/TIAMSharedUI/Shared/SliderItemSelector.razor

<style>
    .underlineInput{
        padding-left: 10px;
        margin-bottom: 20px;
        border-bottom: 1px solid;
    }

    .underlineInput > input {
        padding-left: 10px;
        
        border-bottom: 1px solid;
    }
</style>

<div id="owl-selector" class="owl-carousel owl-theme" style="padding-left: 20px; padding-right:20px; border-radius: 15px;">
    <div class="item" id="0" style="background-color: rgba(0,0,0,0.1)">
        <div class="item-desc text-center pt-3">
            <h3>Please type an address or swipe to select from preset destinations!</h3>
            <div class="wrapper" style="max-width: 800px; margin:0 auto">
                
                

                <DxTextBox 
                           TextChanged="@((newValue) => OnTextChanged(newValue))"
                           BindValueMode="@BindValueMode"
                           InputDelay="@InputDelay"
                           NullText="Type text..."
                           CssClass="cw-320 form-field underlineInput" />

            </div>
            
            <p class="demo-text cw-320 mt-2">
                Text: <b>@TextValue</b>
            </p>
        </div>
    </div>
    
    <div class="item" id="1" style="background-image: url(https://images.unsplash.com/photo-1551867633-194f125bddfa?auto=format&fit=crop&q=80&w=2070&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D); background-position: center;">
        <div class="item-desc text-center pt-3">
            <h3>Liszt Ferenc Airport</h3>            
           
        </div>
    </div>
    <div class="item" id="2" style="background-image: url(https://images.unsplash.com/photo-1549877452-9c387954fbc2?auto=format&fit=crop&q=80&w=2070&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D); background-position: center;">
        <div class="item-desc text-center pt-3">
            <h3>Buda Castle</h3>
            
        </div>
    </div>
    <div class="item" id="3" style="background-image: url(https://images.unsplash.com/photo-1507622560124-621e26755fb8?auto=format&fit=crop&q=80&w=2070&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D); background-position: center;">
        <div class="item-desc text-center pt-3">
            <h3>Chain Bridge</h3>
            
        </div>
    </div>
</div>


<script>

    var owl = $('#owl-selector');
    var i = 0;


    /*CStoJSCall = function (dotNetObjRef) {
        function mouseCoordinatesHandler() {
            dotNetObjRef.invokeMethodAsync("ShowCoordinates", "Hugrabug" + i);
            i++;
        };

        mouseCoordinatesHandler();

        owl.owlCarousel({
            onDragged: mouseCoordinatesHandler
        });

    };*/

    $(document).ready(function () {


        owl.owlCarousel({
            
            navigation: true, // Show next and prev buttons
            loop: true,
            slideSpeed: 300,
            paginationSpeed: 400,
            items: 1,
            itemsDesktop: false,
            itemsDesktopSmall: false,
            itemsTablet: false,
            itemsMobile: false            
        });

        owl.trigger("to.owl.carousel", owl.maximum)

    });

    function CStoJSCall(dotNetObjRef) {
        

        mouseCoordinatesHandler(dotNetObjRef);        

        /*owl.on('changed.owl.carousel', function (e) {
            mouseCoordinatesHandler(dotNetObjRef);
        });*/

        owl.on('changed.owl.carousel', function (property) {
            var current = property.item.index;
            var src = $(property.target).find(".item").eq(current).attr('id');
            console.log('Image current is ' + src);
            mouseCoordinatesHandler(dotNetObjRef, src);
        });

    };

    function mouseCoordinatesHandler(objRef, itemId) {
        objRef.invokeMethodAsync("ShowCoordinates", "Hugrabug" + i, itemId);
        i++;
    };
        
</script>

@code {

    public string TextValue { get; set; } = null;
    int? InputDelay { get; set; } = 3500;
    BindValueMode BindValueMode { get; set; } = BindValueMode.OnInput;
    bool BindDelayEnabled { get { return BindValueMode == BindValueMode.OnDelayedInput; } }
    [Parameter]
    public EventCallback<string> TextChanged { get; set; }

    public int SliderElementId = 0;
    string content = "";
    [Parameter]
    public EventCallback<int> OnSliderChanged { get; set; }


    [Inject]
    public IJSRuntime JSRuntime { get; set; }

    protected override void OnAfterRender(bool firstRender)
    {
        if(firstRender)
        {
            var dotNetObjRef = DotNetObjectReference.Create(this);
            JSRuntime.InvokeVoidAsync("CStoJSCall", dotNetObjRef);

        }

    }     


    [JSInvokable]
    public void ShowCoordinates(string coordinates, string itemId)
    {
        //content = coordinates + "item = " + itemId;
        SliderElementId = Convert.ToInt32(itemId);
        OnSliderChanged.InvokeAsync(Convert.ToInt32(itemId));

        /*StateHasChanged();*/
    }

    void OnTextChanged(string newValue)
    {
        TextValue = newValue;
        TextChanged.InvokeAsync(newValue);
    }

}