Question

我为EPiServer构建了一个图像轮播，它可以工作，但不是我想要的。点击＆＃34; next＆＃34;当前轮播开始旋转。按钮，在此之前它只显示一张图片。我希望它在页面加载时直接开始旋转。例如，请参阅代码。想法？

<div id="carousel" class="carousel slide" data-ride="carousel" data-interval="@(Model.Interval.GetValueOrDefault(7) * 1000)" @Html.EditAttributes(m => m.ContentArea)>

<div class="carousel-inner">
    @for (var index = 0; index < Model.Slides.Count(); index++)
    {
        var slide = Model.Slides.ElementAt(index);
        <div class="item @(index == 0 ? "active" : string.Empty) animated fadeInRight">
            @{
        Html.RenderPartial(slide.GetCarouselSlidePartialViewName(Html), slide,
            new ViewDataDictionary { { "ImageHeight", Model.ImageHeight.GetValueOrDefault(600) }, { "ImageWidth", Model.ImageWidth.GetValueOrDefault(1889) } });
            }
        </div>
    }
</div>


<button href="#carousel" data-slide="next">CLICK ME</button>
@Html.FullRefreshPropertiesMetaData(new[] { "ContentArea" })

因此，当我点击按钮时，它会以href开始旋转到顶部div，但我希望它在页面加载后立即启动。

感谢/ 弗雷德里克

Answer 1

作为Eric对您的问题的评论，这是一个启动您的图像carosel的JavaScript任务。

所有EPiserver都会使用数据渲染您的image-carosel。其余的由你的javascript carosel库来处理交互/动画。

图像 - carosel库上主要有一个属性可以处理carosel是否应该开始加载或等待交互。

所有我都可以帮助你，只有附加的代码是告诉javascript在加载时点击你的按钮。它并不是一种推荐的方式，但它解决了你的问题。

＆＃13;

  $(document).ready(function() {
    $('button[href=#carousel]').click();
  });

＆＃13;

加载div＆＃34;数据＆＃34;负载

1 个答案: