Slickの導入

1. サイトからDL slick - the last carousel you'll ever need

2. htmlから読み込む

<script type="text/javascript" src="/js/slick/slick/slick.min.js"></script>
<link rel="stylesheet" type="text/css" href="/js/slick/slick/slick.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/js/slick/slick/slick-theme.css" media="screen" />

1. 表示用のボタンを貼り付ける

  <ul class="slick-box">
        <li class="slick-item">
            <button data-id="menu1">
                <img src="./resource/1.png" width="250px" height="250px" alt=""/>
                <p>1</p>
            </button>
        </li>
        <li class="slick-item">
            <button data-id="menu2">
                <img src="./resource/2.png" width="250px" height="250px" alt=""/>
                <p>2</p>
            </button>
        </li>
        <li class="slick-item">
            <button data-id="menu3">
                <img src="./resource/3.png" width="250px" height="250px" alt=""/>
                <p>3</p>
            </button>
        </li>
        <li class="slick-item">
            <button data-id="menu4">
                <img src="./resource/04.png" width="250px" height="250px" alt=""/>
                <p>4</p>
            </button>
        </li>
    </ul>

1. 表示用する

<script type="text/javascript">
    /// スライダー表示
    $(function() {
       $('.slick-box').slick({
            accessibility: true,
            adaptiveHeight: true,
            autoplay: false,            
            dots: true,
            arrows: true,
            speed: 300,
            fade: false,
            infinite: true,
           slidesToShow: 1,
            slidesToScroll: 1,
            centerMode: true,
            centerPadding: "60px",
            mobileFirst: true,
            focusOnSelect:false,
            focusOnChange:false,
            draggable: true,
            touchMove: true,
            swipe: true,
            swipeToSlide: true,
            verticalSwiping: false,
            vertical: false
        }); 
    });
</script>