topページにCarouselを追加

TitechMeister · Oct 18, 2023 · 06c3981 · 06c3981
1 parent 0abc23e
commit 06c3981
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 11 deletions.
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
@@ -30,13 +30,7 @@ <h3>{{ .Title }}</h3>
 
     {{else if eq .Title (.Date.Format "2006-01") }}
     <h3>{{ .Date.Format "2006年01月"}}</h3>
-    <ul class="list-group">
-      {{- range (.Paginate $pages).Pages }}
-      <li class="list-group-item">
-        {{ partial "excerpt.html" . }}
-      </li>
-      {{- end }}
-    </ul>
+    {{ partial "pagination.html" . }}
     {{ else if eq (lower .Title) "tags" }}
     <!--Tags-->
     <h3><div class="bi bi-tags">Tags</div></h3>

diff --git a/layouts/index.html b/layouts/index.html
@@ -1,6 +1,32 @@
 {{- define "main" -}}
-
-<img src="{{.Site.BaseURL}}/img/top.jpg" class="img-fluid" alt="Responsive image">
+<!-- 1920x1080の画像を用いること -->
+<div id="top" class="carousel slide" data-bs-ride="carousel" data-bs-interval="3000">
+  <div class="carousel-inner">
+    <div class="carousel-item active">
+      <img src="{{.Site.BaseURL}}/img/top/top.jpg" class="img-fluid" alt="Responsive image">
+    </div>
+    <div class="carousel-item">
+      <img src="{{.Site.BaseURL}}/img/top/about.jpg" class="img-fluid" alt="Responsive image">
+    </div>
+    <div class="carousel-item">
+      <img src="{{.Site.BaseURL}}/img/top/teams.jpg" class="img-fluid" alt="Responsive image">
+    </div>
+    <div class="carousel-item">
+      <img src="{{.Site.BaseURL}}/img/top/access.jpg" class="img-fluid" alt="Responsive image">
+    </div>
+    <div class="carousel-item">
+      <img src="{{.Site.BaseURL}}/img/top/sponsor.png" class="img-fluid" alt="Responsive image">
+    </div>
+  </div>
+  <button class="carousel-control-prev" type="button" data-bs-target="#top" 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="#top" data-bs-slide="next">
+    <span class="carousel-control-next-icon" aria-hidden="true"></span>
+    <span class="visually-hidden">Next</span>
+  </button>
+</div>
 
 <h1>最新情報</h1>
 

diff --git a/layouts/shortcodes/imgs.html b/layouts/shortcodes/imgs.html
@@ -1,4 +1,4 @@
-<div class="carousel slide" data-bs-ride="carousel">
+<div class="carousel slide" data-bs-ride="carousel" data-bs-interval="3000">
     {{ $isFirst := true }}
     <div class="carousel-inner">
         {{ range .Params }}
@@ -7,7 +7,7 @@
             width: auto;
             height: 200px;
             display: block;
-            background-size: cover;" alt="..."  data-bs-interval="1000">
+            background-size: cover;" alt="...">
         </div>
         {{ $isFirst = false }}
         {{ end }}

diff --git a/static/img/top/about.jpg b/static/img/top/about.jpg
diff --git a/static/img/top/access.jpg b/static/img/top/access.jpg
diff --git a/static/img/top/sponsor.png b/static/img/top/sponsor.png
diff --git a/static/img/top/teams.jpg b/static/img/top/teams.jpg
diff --git a/static/img/top.jpg → static/img/top/top.jpg b/static/img/top.jpg → static/img/top/top.jpg