Fix include spkears-slide.html

Author: mwydmuch

_includes/home/invited-speakers-slider.html

@@ -0,0 +1,7 @@
+<!-- Speakers Section -->
+{% include speakers-slider.html 
+    section-id="invited-speakers" 
+    section-title="Invited Speakers" 
+    speakers-data=site.data.invited-speakers
+    more-is-coming=false
+%}

_includes/speakers-slider.html

@@ -0,0 +1,66 @@
+{% comment %}
+Expects following parameters:
+    section-id
+    section-title
+    speakers-data (with name, title, image, bio)
+    more-is-coming
+{% endcomment %}
+
+<section id="{{ include.section-id }}" class="container content-section">
+    <div class="row">
+        <div class="col-lg-12">
+          <h2>/ {{ include.section-title }}</h2>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-lg-12 slider-container">
+            <div class="slider-content">
+                {% for speaker in include.speakers-data %}
+                <div class="row slider-item-content" data-index="{{ forloop.index0 }}">
+                    <!-- Speaker details will be displayed here when a speaker is selected -->
+                    <div class="speaker-details-image col-md-4">
+                        <img src="{{ speaker.image }}" alt="{{ speaker.name }} photo" class="person-photo width-100 width-max-350px">
+                    </div>
+                    <div class="speaker-details-text col-md-8">
+                        <h2 class="emph-i">{{ speaker.name }}</h2>
+                        <h3>{{ speaker.title }}</h3>
+                        <p style="font-size: 16px;">{{ speaker.bio }}</p>
+                    </div>
+                </div>
+                {% endfor %}
+            </div>
+
+            <div class="slider-timer-wrapper">
+                <div class="slider-timer"></div>
+            </div>
+
+            <div class="slider-tabs">
+                {% for speaker in include.speakers-data %}
+                <a class="slider-item page-scroll person item-col-4" data-index="{{ forloop.index0 }}" href="#{{ include.section-id }}">
+                    <div class="person-photo-wrapper speaker-photo" style="width: 75px;">
+                        <div>
+                            <img src="{{ speaker.image | relative_url }}" alt="{{ speaker.name }} photo">
+                        </div>
+                    </div>
+                    <div class="center-verticaly" style="max-height: 92px;">
+                        <div>
+                            <span class="speaker-name">
+                                {{ speaker.name }}
+                            </span></br>
+                            <span class="speaker-title">
+                                {{ speaker.title }}
+                            </span>
+                        </div>
+                    </div>
+                </a>
+                {% endfor %}
+            </div>
+        </div>
+
+        {% if include.more-is-coming %}
+            <div class="col-lg-12 text-center" style="margin-top: 2em;">
+                <h3>and more is coming!</h3>
+            </div>
+        {% endif %}
+    </div>
+</section>