Reduce scope of Swiper include

Currently the Swiper library is referenced in the base template which
means that its CSS and JS get included and loaded on every page.
However, the Swiper functionality is only used on the landing page. This
leads to redundant requests to load the CSS and JS and may even lead to
hard to debug potential issues with clashing JS or CSS.

This change moves the Swiper JS and CSS to only be included on the
landing page.

app/server/templates/base.html

@@ -16,7 +16,6 @@
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-extensions@4.0.1/bulma-divider/dist/css/bulma-divider.min.css" crossorigin="anonymous">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-extensions@4.0.1/bulma-checkradio/dist/css/bulma-checkradio.min.css" crossorigin="anonymous">
   <link rel="stylesheet" href="{% static 'css/forum.css' %}">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/css/swiper.min.css">
   <!-- favicon settings -->
   <link rel="apple-touch-icon" sizes="57x57" href="{% static 'images/favicons/apple-icon-57x57.png' %}">
   <link rel="apple-touch-icon" sizes="60x60" href="{% static 'images/favicons/apple-icon-60x60.png' %}">
@@ -94,20 +93,5 @@
   {% block content %}{% endblock %}
   
   {% block footer %}{% endblock %}
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/js/swiper.min.js"></script>
-  <script>
-    var mySwiper = new Swiper('.swiper-container', {
-      // Optional parameters
-      loop: true,
-      autoplay: {
-        delay: 5000,
-      },
-      // Navigation arrows
-      navigation: {
-        nextEl: '.swiper-button-next',
-        prevEl: '.swiper-button-prev',
-      },
-    })
-  </script>
 </body>
 </html>

app/server/templates/index.html

@@ -1,5 +1,10 @@
 {% extends "base.html" %}
 {% load static %}
+
+{% block header %}
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/css/swiper.min.css">
+{% endblock %}
+
 {% block content %}
 <section class="hero" style="background-color:#2a2e2f">
   <div class="container">
@@ -207,4 +212,22 @@
     </div>
   </div>
 </footer>
+{% endblock %}
+
+{% block footer %}
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/js/swiper.min.js"></script>
+<script>
+  new Swiper('.swiper-container', {
+    // Optional parameters
+    loop: true,
+    autoplay: {
+      delay: 5000,
+    },
+    // Navigation arrows
+    navigation: {
+      nextEl: '.swiper-button-next',
+      prevEl: '.swiper-button-prev',
+    },
+  })
+</script>
 {% endblock %}