动态添加类到轮播滑块内的图像

Question

我在网格内的一排4列中有四个图像和一些文本。对于移动屏幕，这看起来不是很好，因为它们看起来非常小，所以我想将四列和图像转换为移动屏幕的滑块，因此在用户滑动之前只显示一个图像及其文本或者单击如何实现图像的滑块样式，以便我不会在一行中显示所有这些样式？

.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>

Answer 1

您不需要自己构建滑块，请尝试this插件。