Сова Карусель не работает с ASP.NET Blazor - PullRequest
Новая
       11

Сова Карусель не работает с ASP.NET Blazor

0 голосов
/ 17 октября 2019

Я пытался заставить эту сову работать. Я не получаю никакой ошибки, но карусель, если не загружается. Я попробовал решение, которое я нашел на 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>

_Host.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>
...