From f709084777ce6cd60117e953400a1b2455d9c51b Mon Sep 17 00:00:00 2001
From: Oliver <oliver.henry.walters@gmail.com>
Date: Mon, 2 Aug 2021 23:13:48 +1000
Subject: [PATCH] Add partials for carousel

---
 _includes/carousel_end.html    | 14 ++++++++++++++
 _includes/carousel_img.html    |  3 +++
 _includes/carousel_start.html  | 28 ++++++++++++++++++++++++++++
 docs/index.md                  |  7 +++++++
 docs/stylesheets/bootstrap.css |  3 +++
 5 files changed, 55 insertions(+)
 create mode 100644 _includes/carousel_end.html
 create mode 100644 _includes/carousel_img.html
 create mode 100644 _includes/carousel_start.html

diff --git a/_includes/carousel_end.html b/_includes/carousel_end.html
new file mode 100644
index 0000000..0a36342
--- /dev/null
+++ b/_includes/carousel_end.html
@@ -0,0 +1,14 @@
+
+    </div>
+
+    <!-- Left and right controls -->
+      <a class="left carousel-control" href="#myCarousel" data-slide="prev">
+        <span class="fas fa-chevron-left"></span>
+        <span class="sr-only">Previous</span>
+      </a>
+      <a class="right carousel-control" href="#myCarousel" data-slide="next">
+        <span class="fas fa-chevron-right"></span>
+        <span class="sr-only">Next</span>
+      </a>
+    </div>
+  </div>
\ No newline at end of file
diff --git a/_includes/carousel_img.html b/_includes/carousel_img.html
new file mode 100644
index 0000000..2eb6a27
--- /dev/null
+++ b/_includes/carousel_img.html
@@ -0,0 +1,3 @@
+<div class='item'>
+    <img src='{{ src }}' alt='{{ alt }}' style='width: 100%'>
+</div>
\ No newline at end of file
diff --git a/_includes/carousel_start.html b/_includes/carousel_start.html
new file mode 100644
index 0000000..2b953f4
--- /dev/null
+++ b/_includes/carousel_start.html
@@ -0,0 +1,28 @@
+<div class="container carousel-container">
+    <div id="image-carousel" class="carousel slide" data-ride="carousel">
+
+      <!-- Indicators -->
+      <ol class="carousel-indicators">
+
+        {% for idx in range(image_count) %}
+        <li data-target="#image-carousel" data-slide-to="{{ idx }}" {% if idx == 0 %}class="active"{% endif %}></li>
+        {% endfor %}
+      </ol>
+  
+      <!-- Wrapper for slides -->
+      <div class="carousel-inner">
+
+        
+        <div class="item active">
+          <img src="la.jpg" alt="Los Angeles" style="width:100%;">
+        </div>
+  
+        <div class="item">
+          <img src="chicago.jpg" alt="Chicago" style="width:100%;">
+        </div>
+      
+        <div class="item">
+          <img src="ny.jpg" alt="New york" style="width:100%;">
+        </div>
+      </div>
+  
diff --git a/docs/index.md b/docs/index.md
index bd61ca7..052ae27 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -13,6 +13,13 @@ InvenTree is an open-source inventory management system which provides intuitive
 
 InvenTree is designed to be lightweight and easy to use for SME or hobbyist applications, where many existing stock management solutions are bloated and cumbersome to use. However, powerful business logic works in the background to ensure that stock tracking history is maintained, and users have ready access to stock level information.
 
+{% with image_count=7 %}
+{% include "carousel_start.html" %}
+{% endwith %}
+
+{% include "carousel_end.html" %}
+
+
 ### How it Works
 
 InvenTree is a [Python](https://www.python.org/) and [Django](https://www.djangoproject.com/) application which stores data in a relational database, and serves this data to the user(s) via a web browser, and (optionally) can be integrated into custom applications via an API.
diff --git a/docs/stylesheets/bootstrap.css b/docs/stylesheets/bootstrap.css
index 63e9e4d..1fd10a4 100644
--- a/docs/stylesheets/bootstrap.css
+++ b/docs/stylesheets/bootstrap.css
@@ -6290,6 +6290,9 @@ html {
   .popover-content {
     padding: 9px 14px;
   }
+  .carousel-container {
+      width: 100%;
+  }
   .carousel {
     position: relative;
   }