Responsive Image Orbit Slider - responsive-design

Question

I have a Foundation 6 orbit slider that on desktop displays 4 columns, each column an image. The user is able to scroll through images 4 thumbnails at a time.
When the screen size hits my 'small' size I want the slider to display 1 thumbnail instead of 4.
You can see the page where this is implemented here: robertrhu.net/vail/tier1.html.
Its the image slider on top of the blue background mountains.
Here's my code for the 4 thumbnail slider:
HTML:
<!--HTML FOR ORBIT THUMB IMAGE SLIDER-->
<!--THUMB IMAGE SLIDER ROW-->
<div
class="row"
id="thumb-slider-container">
<!--THUMB IMAGE SLIDER HEADING-->
<h1>
Lorem Ipsum Dolor
</h1>
<!--END HOME POSTS SLIDER HEADING-->
<!--ORBIT SLIDER WRAPPER-->
<div
class="orbit"
role="region"
aria-label="Thumbnail Image Slider"
data-orbit
data-use-m-u-i="false"
data-option="autoplay:false;">
<!--ORBIT SLIDER CONTAINER-->
<ul
class="orbit-container">
<!--ORBIT SLIDER PREVIOUS ARROW BUTTON-->
<button
class="orbit-previous">
<span
class="show-for-sr prev-slide">
<i
class="icon-chevron-left">
</i>
</span>
</button>
<!--END ORBIT SLIDER PREVIOUS ARROW BUTTON-->
<!--ORBIT SLIDER NEXT ARROW BUTTON-->
<button
class="orbit-next">
<span
class="show-for-sr next-slide">
<i
class="icon-chevron-right">
</i>
</span>
</button>
<!--END ORBIT SLIDER NEXT ARROW BUTTON-->
<!--ORBIT POST SLIDES-->
<!--4 THUMBNAAIL GRID SLIDE FOR ORBIT SLIDER-->
<li
class="is-active orbit-slide">
<!--GRID CLASS-->
<ul
class="row small-up-1 medium-up-4">
<!--IMAGE COLUMN-->
<li
class="column">
<img
src="assets/img/thumb-slider-image-1.jpg"
class="post-thumb-photo" />
</li>
<!--END IMAGE COLUMN-->
<!--IMAGE COLUMN-->
<li
class="column">
<img
src="assets/img/thumb-slider-image-1.jpg"
class="post-thumb-photo" />
</li>
<!--END IMAGE COLUMN-->
<!--IMAGE COLUMN-->
<li
class="column">
<img
src="assets/img/thumb-slider-image-1.jpg"
class="post-thumb-photo" />
</li>
<!--END IMAGE COLUMN-->
<!--IMAGE COLUMN-->
<li
class="column">
<img
src="assets/img/thumb-slider-image-1.jpg"
class="post-thumb-photo" />
</li>
<!--END IMAGE COLUMN-->
</ul>
<!--END GRID CLASS-->
</li>
<!--4 THUMBNAAIL GRID SLIDE FOR ORBIT SLIDER-->
</ul>
<!--END ORBIT SLIDER CONTAINER-->
</div>
<!--END ORBIT SLIDER WRAPPER-->
</div>
<!--END THUMB IMAGE SLIDER ROW-->
SCSS:
#thumb-slider-container {
background-image: url('../img/thumb-image-slider-background.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: top left;
padding: 2.5rem 5.313rem 3.125rem 5.313rem;
max-width: 100%;
h1 {
color: white;
}
.orbit {
padding: 0 3.25rem 0px 3.5rem;
.orbit-container {
max-width: 1170px;
margin: 0 auto;
.orbit-slide {
max-width: 1170px;
margin: 0 auto;
ul {
margin-bottom: 0;
li.column {
&:last-child {
padding-right: 0;
}
img {
margin-bottom: 0;
&:last-of-type {
margin-right: 0;
}
}
}
}
}
}
}
}

Answer 1

i've been checking the page, but there is a video in the hero-area, no slider? Do I miss something, have you changed anything?
But I'd recommend to use owl carousel 2 as it has tons of options (like the option to set the number of slides for each breakpoint) and supports foundation (so every slide can hold f6 markup for complex layouts inside the slider).
http://www.owlcarousel.owlgraphic.com/
In F5 orbit was deprecated and just for prototyping. I never found an information about orbit in F6 (so i wouldn't recommend to use it on a production site imho).
Maybe this helps you anyway.
all the best