轮播幻灯片不适用于 django 中的静态图像答案

【问题标题】：carousel slide not working for static images in django轮播幻灯片不适用于 django 中的静态图像
【发布时间】：2018-04-21 04:29:11
【问题描述】：

我是 Django 新手，我正在尝试在 Django 中使用引导轮播，所有图像都在加载，但滑块不起作用。

<link rel="stylesheet" href="{% static 'Monitoring/css/bootstrap/bootstrap.min.css' %}" />
<script src="{% static 'Monitoring/js/jquery/jquery-1.12.4.min.js' %}" ></script>
<script src="{% static 'Monitoring/js/bootstrap/bootstrap.min.js' %}"> </script>
<style>
    .carousel-inner{
    height:600px !important;

    }
</style>

下面是正文：

<div id="myCarousel" class="carousel slide" data-ride="carousel" style="width:100%;">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="{% static 'Monitoring/media/login/image1.png' %}" alt="Chania" height="600" width="100%">
    </div>

    <div class="item">
      <img src="{% static 'Monitoring/media/login/image2.png' %}" alt="Chania" height="600" width="100%">
    </div>

    <div class="item">
      <img src="{% static 'Monitoring/media/login/image3.png' %}" alt="Chania" height="600" width="100%">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

另外，有没有更好的方法来读取特定文件夹中的所有图像并将它们用于轮播滑块。在上面的代码中，我对所有三个图像都做同样的事情，是否可以对循环文件夹中的所有图像做同样的事情。

【问题讨论】：

您是否在控制台中检查了 JS 是否正确加载？
@solarissmoke ：是的，我可以看到 bootstrap.min.js 已加载但 carousel.js 未加载。

标签： django carousel django-bootstrap3

【解决方案1】：

the below mentioned script works with inclusion of bootstrap 4 in your <head> tag


**<!-- Slideshow container -->
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img class="d-block w-100 h-50" src="{% static 'images/IMG_1972.JPG' %}" alt="First slide">
          </div>
          <div class="carousel-item">
            <img class="d-block w-100 h-50" src="{% static 'images/IMG_1972.JPG' %}" alt="First slide">
          </div>
          <div class="carousel-item">
            <img class="d-block w-100 h-50" src="{% static 'images/IMG_1972.JPG' %}" alt="First slide">
          </div>
        </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>**

【讨论】：

【解决方案2】：

如果您想更好地控制图像，则必须将图像保存在模型中。然后，您可以根据需要多次通过循环遍历图像。

 <div class="carousel-inner">

  {% for i in your_view_context %}
    <div class="item">
      <img src="{{i.image.url}}" alt="Chania" height="600" width="100%">
    </div>
{% endfor %}

  </div>

您的模型将是：

class ImageModel(models.MODEL):
    image = models.ImageField(blank = False, null = False)

您的观点将是：

def myview(request):
    queryset = ImageModel.objects.all()
    context = {
                your_view_context = queryset
              }
    return render(request, 'template.html' , context)

【讨论】：

感谢回复，我不想将图像存储在数据库中。我想把它作为静态文件。为什么我的代码（基本上是滑块）不能与 django 一起使用，但是没有 django 它的工作顺利。