智慧生活科技專業社群: 在pythonanywhere設計Django網站的輪播功能

2024年3月31日星期日

在pythonanywhere設計Django網站的輪播功能

參考文章：輪播 (Carousel)

本文章是延續上一篇文章：在pythonanywhere設計Django網站的功能表(Add Bootstrap 5)

1.準備輪播的圖片(1024*360)

fruits01.jpg

fruits02.jpg

fruits03.jpg

2.上傳到pythonanywhere的mysite/static/images目錄下

3.編修mysite/templates/index.html

<!DOCTYPE html>
<html>
<head>
  {% load bootstrap5 %}
  {% bootstrap_css %}
  {% bootstrap_javascript %}
  {% load static %}
</head>
<body>
<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="{% static 'images/fruits01.jpg' %}" class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5 style="color:white;">水果01</h5>
        <p style="color:white;">好水果在雲林</p>
      </div>
    </div>
    <div class="carousel-item" data-bs-interval="2000">
      <img src="{% static 'images/fruits02.jpg' %}" class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5 style="color:white;">水果02</h5>
        <p style="color:white;">好水果在雲林</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="{% static 'images/fruits03.jpg' %}" class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5 style="color:white;">水果03</h5>
        <p style="color:white;">好水果在雲林</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

<div class="container">
  <ul class="nav bg-info">
    <li class="nav-item">
      <a class="nav-link link-light" href="/">首頁</a>
    </li>
    <li class="nav-item">
      <a class="nav-link link-light" href="/vegetable/">蔬菜</a>
    </li>
    <li class="nav-item">
      <a class="nav-link link-light" href="/fruit/">水果</a>
    </li>
  </ul>
<h1>虎科小農超市</h1>

<p>虎科大是一所很重視永續發展暨社會責任的大學</p>
  {% block content %}
  {% endblock %}
</div>

</body>
</html>