Как правильно отобразить карусель?

Question

[BEKa T]

Не получается отобразить карусел Bootstrap

<div class="bd-example">
  <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
      <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
      <li data-target="#carouselExampleCaptions" data-slide-to="3"></li>
    </ol>

    <div class="carousel-inner">
      {% for post in posts %}
      <div class="carousel-item active">
        <img src="{{ post.image.url }}" class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
          <h5>{{ post.title|truncatewords:9 }}</h5>
            <p>{{ post.body|truncatewords:15 }}</p>
        </div>
      </div>
      {% endfor %}
      
    </div>

    <a class="carousel-control-prev" href="#carouselExampleCaptions" 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="#carouselExampleCaptions" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

Не работают кнопки Next, Previous
Посты накладываются друг на друга как показано на фото

Comments

[776166]

1) Взять заведомо работающий статический пример, вставить в шаблон и убедиться, что HTML/CSS/JS работают.
2) Смотреть в сторону django.

Скорее всего, проблема в п.1.

Answer 1

[Дмитрий]

Пример рабочей карусели
Попробуй просто заменить картинки на свои и запустить

<div class="carousel slide" data-ride="carousel" id="slides">
		<ul class="carousel-indicators">
			<li data-target="#slides" data-slide-to="0" class="active"></li>
			<li data-target="#slides" data-slide-to="1"></li>
			<li data-target="#slides" data-slide-to="2"></li>
			<li data-target="#slides" data-slide-to="3"></li>
		</ul>
		<div class="carousel-inner">
			<div class="carousel-item active">
				<img src="img/slider/1.jpg">
				<div class="carousel-caption">
					<h1 class="display-2">Программирование</h1>
					<h3>Научитесь программировать</h3>
					<button type="button" class="btn btn-ounline btn-lg btn-white">
						Подробнее
					</button>
					<button type="button" class="btn btn-warning btn-lg">
						О нас
					</button>
				</div>
			</div>

			<div class="carousel-item">
				<img src="img/slider/2.jpg">
				<div class="carousel-caption">
					<div class="container-fluid">
						<div class="row juistify-content-start">
							<h1 class="design__headline"><span>3D</span> Design</h1>			
						</div>	
					</div>
					
			
				</div>
			</div>
			<div class="carousel-item">
				<img src="img/slider/3.jpg">
			</div>
			<div class="carousel-item">
				<img src="img/slider/4.jpg">
			</div>
		</div>
	</div> <!--end карусель-->