CATEGORY

【JavaScript】slickで複数行スライドさせる方法

slickはsliderレイアウトを構築する際によく使用するレイアウトですが、複数行の実装は初めてだったので、使用したオプションを忘備録として残します。

サンプルコードはそのままコピペで動作しますが、レイアウトは各々調整してください。

■ 関連記事 : JavaScriptの基礎習得に役立つ技術書【おすすめ3選】





■ HTML





<div class="inner">
　<div class="slider_wrap">
  <div class="slider_item" data-slide-id="1">
   <img src="https://placehold.jp/600x400.png" alt="ダミー画像" width="100%">
  </div>
  <div class="slider_item" data-slide-id="2">
   <img src="https://placehold.jp/600x400.png" alt="ダミー画像" width="100%">
  </div>
  <div class="slider_item" data-slide-id="3">
   <img src="https://placehold.jp/600x400.png" alt="ダミー画像" width="100%">
  </div>
  <div class="slider_item" data-slide-id="4">
   <img src="https://placehold.jp/600x400.png" alt="ダミー画像" width="100%">
  </div>
  <div class="slider_item" data-slide-id="5">
   <img src="https://placehold.jp/600x400.png" alt="ダミー画像" width="100%">
  </div>
  <div class="slider_item" data-slide-id="6">
   <img src="https://placehold.jp/600x400.png" alt="ダミー画像" width="100%">
  </div>
  <div class="slider_item" data-slide-id="7">
   <img src="https://placehold.jp/600x400.png" alt="ダミー画像" width="100%">
  </div>
  <div class="slider_item" data-slide-id="8">
   <img src="https://placehold.jp/600x400.png" alt="ダミー画像" width="100%">
  </div>
  <div class="slider_item" data-slide-id="9">
    <img src="https://placehold.jp/600x400.png" alt="ダミー画像" width="100%">
   </div>
   <div class="slider_item" data-slide-id="10">
    <img src="https://placehold.jp/600x400.png" alt="ダミー画像" width="100%">
   </div>
　 <div class="slider_item" data-slide-id="11">
　　　<img src="https://placehold.jp/600x400.png" alt="ダミー画像" width="100%">
　　</div>
　　<div class="slider_item" data-slide-id="12">
　　　<img src="https://placehold.jp/600x400.png" alt="ダミー画像" width="100%">
　　</div>
　</div>
</div>





■ JavaScript




 $('.slider_wrap').slick({
    prevArrow: '<button class="slide-arrow prev-arrow">PREV</button>',
    nextArrow: '<button class="slide-arrow next-arrow">NEXT</button>',
    rows: 2,
    slidesPerRow: 4
});





rows,slidesPerRowにオプションを追加してやれば最も簡単に実装することができました。


■ 関連記事 : JavaScriptの基礎習得に役立つ技術書【おすすめ3選】


参考 : slick rows

          

        


    

      
    



  

          
        
          【JavaScript】画像URLからバイナリデータを取得してサーバーに送信する方法
        
        前の記事
      
          
        
          【WordPress】投稿と同じカテゴリーの記事を表示する方法
        
        次の記事
      
      



      

      

        
関連記事

        

        




    
        


      
    
                
  • 
          
            JavaScript
            
          
        
    • 
        
                
  • 
          
        
    • 
        
        
      


      
【JavaScript】Files APIを使用して拡張子チェックする方法


            
ファイルアップロード機能を実装するためのソースコードはネット上に多く出回っているので、実装するのはそれほど難しいことではありません。機能を作る時に重要になるのが、不適切な形式のファイルはアップロードできないことです。拡張子チェックなどの処理が実装されていない状態で、悪意のあるユーザーが不適

      
    


  





        

      





コメント




  
    

    

      
この記事へのコメントはありません。