將動態類動態添加到輪播滑塊內部的圖像

我在網格內的四列中有四個圖像和一些文本，每個圖像下面有一行。對於手機屏幕，這看起來不太好，因爲它們看起來很小，所以我想將四列和圖像轉換爲手機屏幕的滑塊，因此只有一個圖像及其文本出現，直到用戶滑動或者單擊我如何實現圖像的滑塊樣式，以便在單行中不顯示它們都很小？將動態類動態添加到輪播滑塊內部的圖像

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

來源

2017-08-28 John R

我會建議您創建一個滑塊（使用第三方庫）並將其隱藏在桌面上。移動顯示它，並隱藏你已經（在你的問題中顯示）的網格佈局。易於使用，在代碼中進行操縱，乾淨的編碼 –

你不需要建立一個滑塊你自己，嘗試this插件。

來源

2017-08-28 05:37:36

將動態類動態添加到輪播滑塊內部的圖像

回答

相關問題