使用 asp net razor 在 Umbraco 中创建动态滑块

Create dynamic slider in Umbraco using asp net razor

我设法使用 slick slider 创建了一个简单的滑块,但它只显示图像列表,而不是滑块,这是我所做的:

  1. 我在我的母版中链接了所有光滑的滑块文件

        <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
        <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"/>
  1. 添加了 javascript 用于在我的页面末尾调用滑块。

    $(文档).ready(函数(){ $('.slides').slick({ autoplay:true, pauseOnHover:true }); });

  2. 我通过选择一个名为 gallery 的片段并对其进行了一些编辑,从部分视图宏文件创建了一个宏,它的外观如下:

    @inherits Umbraco.Web.Macros.PartialViewMacroPage @* 宏来显示媒体部分的图像库。 适用于 'Single Media Picker' 或 'Multiple Media Picker' 宏参数(见下文)。

    How it works:
        - Confirm the macro parameter has been passed in with a value
        - Loop through all the media Id's passed in (might be a single item, might be many)
        - Display any individual images, as well as any folders of images
    
    Macro Parameters To Create, for this macro to work:
    Alias:mediaIds     Name:Select folders and/or images    Type: Multiple Media Picker
                                                            Type: (note: you can use a Single Media Picker if that's more appropriate to your needs)
    

    *@

    @{ var mediaIds = Model.MacroParameters["mediaIds"]; }
    @if (mediaIds != null)
    {
        <div class="slides">
            @foreach (var mediaId in mediaIds.ToString().Split(','))
            {
                var media = Umbraco.Media(mediaId);
    
                @* a single image *@
                if (media.DocumentTypeAlias == "Image")
                {
                    @Render(media);
                }
    
                @* a folder with images under it *@
                if (media.Children("Image").Any())
                {
                    foreach (var image in media.Children("Image"))
                    {
                        @Render(image);
                    }
                }
    
            }
        </div>
    }
    
    @helper Render(dynamic item)
    {
        <div>
        <img src="@item.umbracoFile" alt="@item.Name" />
        </div>
    }
    
  3. 在宏中,我添加了这些参数别名:mediaIds 名称:Select 文件和/或图像,类型:多媒体选择器

  4. 我在主页上渲染了局部视图宏如下:

    @Umbraco.RenderMacro("Gallery", 新 {mediaIds="1120,1118,1119"})

现在,当我预览我的主页时,我得到的是图像列表而不是我想要的滑块,谁能帮我弄清楚为什么它 returns 是图像列表而不是滑块?我是 asp 网络和 Umbraco 的新手,

您需要获取项目的 Url,而不是访问文件本身:

 <img src="@item.Url" alt="@item.Name" />

我真的建议你使用强类型模型而不是动态模型,它们真的让你的生活更轻松