Карусель начальной загрузки Ползунок активного класса и кнопка «Следующая / Предыдущая» не работают - PullRequest
Новая
       10

Карусель начальной загрузки Ползунок активного класса и кнопка «Следующая / Предыдущая» не работают

0 голосов
/ 23 января 2019

Я использую cshtml от Umbraco. Я хочу создать слайдер на главной странице. Изображение появляется на странице, но «активный» элемент не работает. (ЭТО РЕШЕНО)

Еще одна проблема - я хочу добавить разные заголовки для каждого слайда. Как добавить это? 

@{   
   var images = Model.Content.GetPropertyValue<IEnumerable<IPublishedContent>>("backgroundSlider").ToList();
}

<div id="myCarousel" class="carousel slide">
	<div class="carousel-inner">
		@for (var i = 0; i < images.Count; i++)
		{
			<div class="@(i < 1 ? " active":"") item" data-slide-number="@i">
				<img src='@images[i].Url'>
			</div>	
		}
	</div>
	<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
	<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>

1 Ответ

0 голосов
/ 23 января 2019

Основная проблема, кажется, ваш класс .carousel-item, который был указан как .item. Они должны быть такими же, как они указаны в документации , чтобы все работало как положено. 

@{   
   var images = Model.Content.GetPropertyValue<IEnumerable<IPublishedContent>>("backgroundSlider").ToList();
}

<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        @for (var i = 0; i < images.Count; i++)
        {
            <div class="@(i < 1 ? " active":"") carousel-item" data-slide-number="@i">
                <img src='@images[i].Url' class="d-block w-100">
            </div>  
        }
    </div>
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>

Для подписи, это подходящий пример документации Bootstrap: 

@{   
var images = Model.Content.GetPropertyValue<IEnumerable<IPublishedContent>>("backgroundSlider").ToList();
}

<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        @for (var i = 0; i < images.Count; i++)
        {
            <div class="@(i < 1 ? " active":"") carousel-item" data-slide-number="@i">
                <img src='@images[i].Url' class="d-block w-100">
                <div class="carousel-caption d-none d-md-block">
                <h5>@images[i].Title</h5>
                <p>@images[i].Description</p>
                </div>
            </div>  
        }
    </div>
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>

В приведенном выше примере я предполагаю, что заголовок вашего изображения находится в вашем Title свойстве, а заголовок - Description. Не стесняйтесь вносить изменения по мере необходимости.

...