Как сделать динамическую карусель с бутстрапом 4 и аурелией
Я хочу реализовать динамический слайдер карусели для скольжения фотографий. Картинки идут с бэкэнда, у меня проблемы с динамикой карусели. Он отлично работает с bootstrap 4, но для статики, и когда я хочу, чтобы он интегрировался с aurelia, он просто не работает.
<div id="demo" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators" repeat.for="i of listOfImages.length">
<li data-target="#demo" data-slide-to="i" class="${i==0 ? 'active': ''}"></li>
</ul>
<div class="carousel-inner">
<div repeat.for="image of listOfImages" class="carousel-item ${i==0 ? 'active': ''}">
<img src.bind="image" style="width:1900px;height:700px;">
</div>
</div>
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
Изображения не отображаются и карусель не работает вообще. Любая помощь? большое спасибо
2 ответа
Это должно работать для вас:
<div id="demo" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#demo" repeat.for="i of listOfImages.length" data-slide-to.bind="i" class="${$first ? 'active': ''}"></li>
</ul>
<div class="carousel-inner">
<div repeat.for="image of listOfImages" class="carousel-item ${$first ? 'active': ''}">
<img src.bind="image" style="width:1900px;height:700px;">
</div>
</div>
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
объяснение:
у вас есть письмо i
как простой текст внутри каждого из ваших data-slide-to
, у вас повторитель на неправильном теге. ты можешь использовать $first
чтобы лучше отражать то, что вы пытаетесь сделать.
использование JQ для такой работы противоречит мышлению MVVM.
Я тоже застрял в этом и в основном нашел для этого код начальной загрузки 3. Вот почему я объединяю весь код
- У нас должен быть массив изображений
- Теперь для начала нам нужно создать пустой контейнер в HTML.
<div
id="carouselExampleIndicators"
class="carousel slide"
data-ride="carousel"
>
<ol class="carousel-indicators"></ol>
<div class="carousel-inner"></div>
<a
class="carousel-control-prev"
href="#carouselExampleIndicators"
role="button"
data-slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a
class="carousel-control-next"
href="#carouselExampleIndicators"
role="button"
data-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
- На последнем этапе нам нужно добавить изображения в приведенный выше код.
$(document).ready(function () {
var urls = []
for (i = 0; i < urls.length; i++) {
$(
'<div class="carousel-item"><img src="' +
urls[i] +
'" class="d-block w-100"> </div>'
).appendTo(".carousel-inner");
$(
'<li data-target="#carouselExampleIndicators" data-slide-to="' +
i +
'"></li>'
).appendTo(".carousel-indicators");
}
$(".carousel-item").first().addClass("active");
$(".carousel-indicators > li").first().addClass("active");
$("#carouselExampleIndicators").carousel();
});
- просто вставьте приведенный выше код, заменив переменную urls на свой массив изображений
Я решил это с помощью jQuery, следующим образом.
<div ref="carousel" class="carousel slide" data-ride="carousel" data-interval="100">
<!-- Indicators -->
<ol class="carousel-indicators"></ol>
<!-- Wrapper for slides -->
<div class="carousel-inner"></div>
<!-- Controls -->
<a class="carousel-control-prev" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
carouselSlider() {
var self = this;
this.slider = $(this.carousel);
$(document).ready(function () {
$('.carousel').carousel({
interval: 5000,
pause: false
})
for (let j = 0; j < self.listOfImages.length; j++) {
let image = self.listOfImages[j];
$('<div class="carousel-item"><img src=' + image + ' width="50%"> </div>').appendTo('.carousel-inner');
$('<li data-target="#carousel" data-slide-to="' + j + '"></li>').appendTo('.carousel-indicators')
}
$('.carousel-item').first().addClass('active');
$('.carousel-indicators > li').first().addClass('active');
$('a[data-slide="prev"]').click(function () {
$(self.carousel).carousel('prev');
});
$('a[data-slide="next"]').click(function () {
$(self.carousel).carousel('next');
});
self.slider.carousel();
});
}
и вызов carouselSlider в прикрепленной функции ().