忍者ブログ

note

仕事のメモ帳。

slick.jsを使って左右の画像をチラ見せするメイン画像スライダーのサンプル

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

コメント

ただいまコメントを受けつけておりません。

slick.jsを使って左右の画像をチラ見せするメイン画像スライダーのサンプル

https://peacepopo.net/blog-entry-238.html

centerPadding: '10%' がキモっぽい。

<link rel="stylesheet" type="text/css" href="slick.css">
<link rel="stylesheet" type="text/css" href="slick-theme.css">
<script type="text/javascript" src="jquery.min.js"  ></script>
<script type="text/javascript" src="slick.min.js"></script>
 
<script>
$("document").ready(function(){
  $('.mypattern').slick({
    autoplay: true,
    autoplaySpeed: 2500,
    speed: 800,
    dots: true,
    arrows: false,
    centerMode: true,
    centerPadding: '10%'
  });
}); 
</script>
 
<style>
  * {
    margin: 0;
    padding: 0;
  }
  .slider {
    width: 90%;
    margin: 0 auto 80px;
  }
  .slick-slide img {
    width: 100%;
    height: auto;
  }
  .mypattern{
    width: 100%;
  }
  .mypattern .slick-slide{
    margin: 5px;
  }
</style>
 
<div class="content">
  <div class="slider mypattern">
    <div><a href="#"><img src="画像URL"></a></div>
    <div><a href="#"><img src="画像URL"></a></div>
    <div><a href="#"><img src="画像URL"></a></div>
    <div><a href="#"><img src="画像URL"></a></div>
    <div><a href="#"><img src="画像URL"></a></div>
    <div><a href="#"><img src="画像URL"></a></div>
    <div><a href="#"><img src="画像URL"></a></div>
  </div>
</div>
PR

コメント

プロフィール

HN:
nono
性別:
非公開

P R