Hanlabo Memberページはこんな感じに実装しています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | <link rel="stylesheet" href="slick.css" type="text/css" /><link rel="stylesheet" href="slick-theme.css" type="text/css" /><script type="text/javascript" src="jquery-1.8.1.min.js"></script><script type="text/javascript" src="slick.js"></script><script type="text/javascript">$(document).ready(function(){ $(".your-class").slick({ centerMode: true, infinite: true, centerPadding: "160px", slidesToShow: 3, speed: 500, responsive: [{ breakpoint: 768, settings: { arrows: false, centerMode: true, centerPadding: "40px", slidesToShow: 3 } }, { breakpoint: 480, settings: { arrows: false, centerMode: true, centerPadding: "40px", slidesToShow: 1 } }] });})</script><div class="content your-class"> <div><p><img src="hanlabo_no001.png"></p></div> <div><p><img src="hanlabo_no002.png"></p></div> <div><p><img src="hanlabo_no003.png"></p></div> <div><p><img src="hanlabo_no004.png"></p></div> <div><p><img src="hanlabo_no005.png"></p></div> <div><p><img src="hanlabo_no006.png"></p></div> <div><p><img src="hanlabo_no007.png"></p></div> <div><p><img src="hanlabo_no008.png"></p></div> <div><p><img src="hanlabo_no009.png"></p></div></div> |
