Adding class dynamically to images inside carousel slider

I have four images and some text below each of them in a row of 4 columns inside a grid. For mobile screens this doesn’t look very nice because they look very small, so I’d like to transform the four columns and images in to a slider for mobile screens, so only one image and its text appears at the time until user swipes or click How can I achieve the slider style of the images so I don’t show all of them very small in one single row?

.wrapper {
    max-width: 90%;
    position:relative;
    margin:0 auto;
    text-align:center;
}
  
.grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: 1340px;
}

.grid__col {
  padding-right: 16px;
  padding-left: 16px;
  &.no-pad{
    padding: 0;
  }
  &--1-4-s {
    width: percentage(1 / 4);
  } 

  &--2-4-s {
    width: percentage(2 / 4);
  } 

  &--3-4-s {
    width: percentage(3 / 4);
  } 

  &--4-4-s {
    width: 100%;
  }

@media (min-width: 740px) {
   &--1-4-m {
      width: percentage(1 / 4);
    } // 25%

    &--1-3-m {
      width: percentage(1 / 3);
    } 
    
    &--2-4-m {
      width: percentage(2 / 4);
    } 

    &--3-4-m {
      width: percentage(3 / 4);
    } 
}

 

@media (min-width: 980px) {
    &--1-4-l {
      width: percentage(1 / 4);
    } 
    &--2-4-l {
      width: percentage(2 / 4);
    } 

    &--3-4-l {
      width: percentage(3 / 4);
    } 
  }

  &--end {
    margin-left: auto;
  }

  &--content-centered {
    margin: 0 auto;
  }
}

.image-text {
    max-width: 200px;
    font-weight: 400;
  }
<div class="wrapper">
  <h1>This is a title</h1>
  <p>This is some description</p>
  <div class="grid">
      <div class='grid__col grid__col--1-4-l grid__col--1-4-m grid__col--4-4-s'>
        <img src='http://via.placeholder.com/200x150'>
        <p class="image-text">Image 1 Text</p>
       </div>
      <div class='grid__col grid__col--1-4-l grid__col--1-4-m grid__col--4-4-s'>
        <img src='http://via.placeholder.com/200x150'>
        <p class="image-text">Image 2 Text</p>
      </div>
      <div class='grid__col grid__col--1-4-l grid__col--1-4-m grid__col--4-4-s'>
        <img src='http://via.placeholder.com/200x150'>
        <p class="image-text">Image 3 Text</p>
      </div>
      <div class='grid__col grid__col--1-4-l grid__col--1-4-m grid__col--1-4-s grid__col--end'>
       <img src='http://via.placeholder.com/200x150'>
        <p class="image-text">Image 4 Text</p>
      </div>
  </div>
 </div>

You dont need to build a slider on your own, Try this plugin.