Owl Carousel不适用于ASP.NET Blazor

jtw3ybtb 于 2023-02-26 发布在 .NET

关注(0)|答案(2)|浏览(122)

我一直在尝试让这个猫头鹰旋转木马工作。我没有得到任何错误，但旋转木马，如果没有加载。我尝试了解决方案，我发现在StackOverflow的Bootstrap旋转木马，但它不为我工作。我也尝试使用纯CSS旋转木马，但它将是静态的东西，我希望旋转木马动态工作。
Index.razor

@page "/"

@using TBS.Data;

@inject IJSRuntime  JsRuntime;
@*@inject IComponentContext context;*@
@inject NavigationManager UriHelper;
@inject MediaService MediaService;
@inject ContentService ContentService;

    <div class="container hero-section">
        <div class="owl-carousel owl-theme slide">
            <div class="hero-image item">
                <img src="images/here-image.png" alt="hero-img" class="img-fluid">
                <div class="hero-details">
                    <h2>MATT RISINGER</h2>
                    <h6>Home Builder. Austin, TX.</h6>
                    <a href="#"><button>EXPLORE CHANNEL</button></a>
                </div>
            </div>
            <div class="hero-image item">
                <img src="images/here-image.png" alt="hero-img" class="img-fluid">
                <div class="hero-details">
                    <h2>MATT RISINGER</h2>
                    <h6>Home Builder. Austin, TX.</h6>
                    <a href="#"><button>EXPLORE CHANNEL</button></a>
                </div>
            </div>
        </div>

    </div>

_主机.cshtml

@page "/"
@namespace TBS.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>The Build Show</title>
    <base href="~/" />

    <link rel="stylesheet" href="css/owl.carousel.min.css">
    <link rel="stylesheet" href="css/owl.theme.default.min.css">
    <script src="js/jquery-3.4.1.min.js"></script>
    <link rel="stylesheet" href="style.css">

    <environment include="Development">
        <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    </environment>
    <environment exclude="Development">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
              asp-fallback-href="css/bootstrap/bootstrap.min.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
              crossorigin="anonymous"
              integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" />
    </environment>
    <link href="css/site.css" rel="stylesheet" />
    <link href="css/showvideo.css" rel="stylesheet" />
    <link href="css/default.css" rel="stylesheet">
    <link href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" rel="stylesheet"
          integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <link href="https://cdn.syncfusion.com/ej2/17.2.35/material.css" rel="stylesheet" />

    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-36173959-17"></script>
    <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
    <script src="https://cdn.syncfusion.com/ej2/17.2.35/dist/ej2.min.js"></script>
    <script src="https://cdn.syncfusion.com/ej2/17.2.35/dist/ejs.interop.min.js"></script>
    <script type="text/javascript" src="js/indexedDb.Blazor.js"></script>
    <script type="text/javascript" src="js/functions.js"></script>
</head>
<body>
    <app>
        @(await Html.RenderComponentAsync<App>(RenderMode.Server))
    </app>

    <script src="_framework/blazor.server.js"></script>
    <script src="_content/BlazorStrap/blazorStrap.js"></script>
    <script src="_content/BlazorStrap/popper.min.js"></script>
    @*<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script>*@
    <script type='text/javascript'>
        (function ($) { window.fnames = new Array(); window.ftypes = new Array(); fnames[0] = 'EMAIL'; ftypes[0] = 'email'; fnames[1] = 'FNAME'; ftypes[1] = 'text'; fnames[2] = 'LNAME'; ftypes[2] = 'text'; fnames[3] = 'ADDRESS'; ftypes[3] = 'address'; fnames[4] = 'PHONE'; ftypes[4] = 'phone'; }(jQuery)); var $mcj = jQuery.noConflict(true);
    </script>

    <script src="js/custom.js">

    </script>
    <script src="js/owl.carousel.min.js"></script>
    <script>
        $('.slide').owlCarousel({
            loop: true,
            margin: 10,
            nav: true,
            dots: false,
            autoplay: true,
            responsive: {
                0: {
                    items: 1
                },
                600: {
                    items: 1
                },
                1000: {
                    items: 1
                }
            }
        });
        $('.slide1').owlCarousel({
            loop: true,
            margin: 10,
            nav: true,
            dots: false,
            responsive: {
                0: {
                    items: 1
                },
                600: {
                    items: 2
                },
                1000: {
                    items: 3
                }
            }
        });
        $('.slide2').owlCarousel({
            loop: true,
            margin: 10,
            nav: true,
            dots: false,
            responsive: {
                0: {
                    items: 1
                },
                600: {
                    items: 2
                },
                1000: {
                    items: 3
                }
            }
        });
        $('.slide3').owlCarousel({
            loop: true,
            margin: 10,
            nav: true,
            dots: false,
            responsive: {
                0: {
                    items: 1
                },
                600: {
                    items: 2
                },
                1000: {
                    items: 3
                }
            }
        });
    </script>
</body>
</html>

asp.net

来源：https://stackoverflow.com/questions/58427837/owl-carousel-not-working-with-asp-net-blazor

2条答案

按热度按时间

bgibtngc1#

我也遇到过类似的问题，我发现要使用JavaScript库需要使用JInterop。因此，在引用了所有必需的库之后，我在根文件夹wwwroot中创建了一个js文件，名为main.js，并将引用添加到index.html文件中，如下所示

<script src="main.js"></script>

在这个main.js文件中，我创建了一个函数，它包含了运行slider所需的所有javascript代码，main.js文件中的代码如下所示。

(function($) {
'use strict';
window.sliderFunctions = {
    startSlider: function () {
        /*============ All the code or function you need for your slider to run goes here ============*/
        --code--
    }
}}

然后我打开我的app.razor文件，然后像这样注入JSRRuntime

@inject IJSRuntime JSRuntime

然后仍然在我的app.razor文件中，我添加了以下代码

@code {
protected async override Task OnAfterRenderAsync(bool firstRender)
{
  await JSRuntime.InvokeAsync<string>("sliderFunctions.startSlider", null);
  //return base.OnAfterRenderAsync(firstRender);
}}

简单的是，这允许在Blazor完成渲染后运行所有javascript代码。

赞(0）回复(0）举报 2023-02-26

62lalag42#

Blazor与www.example.com核心的其他版本之间的关键区别asp.net在于，我们必须使用脚本在Blazor中执行carousel。
我复制我的索引页，让你实现我的意思

@page "/"
@inject IJSRuntime JSRuntime
<div id="@carouselName" class="carousel slide" data-bs-ride="carousel" data-bs-wrap="true" data-bs-interval="2000" data-bs-pause="false">
            <div class="carousel-indicators">
                <button type="button" data-bs-target="#carouselEx   ampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
            </div>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="imgSite/Wallpaper1.jpg" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="imgSite/Wallpaper2.jpg" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="imgSite/Wallpaper3.jpg" class="d-block w-100" alt="...">
                </div>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>

@code {
const string carouselName = "carouselExampleIndicators"; // NOTE: the ID of the carousel

protected override async Task OnAfterRenderAsync( bool firstRender )
{
    object[ ] args = { carouselName };
    await JSRuntime.InvokeVoidAsync("startCarousel", args); // NOTE: call JavaScript function with the ID of the carousel
}}

考虑到这段代码是针对asp.netcore 7中的. razor页面的，正如我在开始时所说的，关键点是当carousel在Blazor中不工作时以某种方式触发它，而且，carousel与bootstrap 5.0.0一起工作

赞(0）回复(0）举报 2023-02-26

我来回答

Owl Carousel不适用于ASP.NET Blazor

2条答案

相关问题

热门标签

最新问答