Question

我是Django的新手，我正在尝试在Django中使用bootstrap轮播，所有图像都已加载，但滑块无效。

<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>

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

Answer 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>**

Answer 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中的静态图像

2 个答案: