使用 asp net razor 在 Umbraco 中创建动态滑块
Create dynamic slider in Umbraco using asp net razor
我设法使用 slick slider 创建了一个简单的滑块,但它只显示图像列表,而不是滑块,这是我所做的:
我在我的母版中链接了所有光滑的滑块文件
<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"/>
添加了 javascript 用于在我的页面末尾调用滑块。
$(文档).ready(函数(){
$('.slides').slick({
autoplay:true,
pauseOnHover:true
});
});
我通过选择一个名为 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>
}
在宏中,我添加了这些参数别名:mediaIds 名称:Select 文件和/或图像,类型:多媒体选择器
我在主页上渲染了局部视图宏如下:
@Umbraco.RenderMacro("Gallery", 新 {mediaIds="1120,1118,1119"})
现在,当我预览我的主页时,我得到的是图像列表而不是我想要的滑块,谁能帮我弄清楚为什么它 returns 是图像列表而不是滑块?我是 asp 网络和 Umbraco 的新手,
您需要获取项目的 Url,而不是访问文件本身:
<img src="@item.Url" alt="@item.Name" />
我真的建议你使用强类型模型而不是动态模型,它们真的让你的生活更轻松
我设法使用 slick slider 创建了一个简单的滑块,但它只显示图像列表,而不是滑块,这是我所做的:
我在我的母版中链接了所有光滑的滑块文件
<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"/>
添加了 javascript 用于在我的页面末尾调用滑块。
$(文档).ready(函数(){ $('.slides').slick({ autoplay:true, pauseOnHover:true }); });
我通过选择一个名为 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> }
在宏中,我添加了这些参数别名:mediaIds 名称:Select 文件和/或图像,类型:多媒体选择器
我在主页上渲染了局部视图宏如下:
@Umbraco.RenderMacro("Gallery", 新 {mediaIds="1120,1118,1119"})
现在,当我预览我的主页时,我得到的是图像列表而不是我想要的滑块,谁能帮我弄清楚为什么它 returns 是图像列表而不是滑块?我是 asp 网络和 Umbraco 的新手,
您需要获取项目的 Url,而不是访问文件本身:
<img src="@item.Url" alt="@item.Name" />
我真的建议你使用强类型模型而不是动态模型,它们真的让你的生活更轻松