Menu icon Foundation
Responsive Image Orbit Slider

I have an 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.

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>
        <!--ENDIMAGE 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;

                            }
                        
                    }
                    }
                }
                }
               
                
                }
                
            }
            
            
        }

orbit sliderresponsive slidercolumn

I have an 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.

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>
        <!--ENDIMAGE 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;

                            }
                        
                    }
                    }
                }
                }
               
                
                }
                
            }
            
            
        }