129 lines
3.4 KiB
Plaintext
129 lines
3.4 KiB
Plaintext
|
|
<div id="owl-selector" class="owl-carousel owl-theme" style="padding-left: 20px; padding-right:20px;">
|
|
<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>
|
|
|
|
<form>
|
|
|
|
</form>
|
|
|
|
|
|
|
|
|
|
<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
|
|
|
|
slideSpeed: 300,
|
|
paginationSpeed: 400,
|
|
|
|
items: 1,
|
|
itemsDesktop: false,
|
|
itemsDesktopSmall: false,
|
|
itemsTablet: false,
|
|
itemsMobile: false
|
|
|
|
});
|
|
|
|
});
|
|
|
|
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 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();
|
|
}
|
|
|
|
}
|
|
|