lQuery初心者のものです。
サムネイル付きスライダーをホームページへ入れたくて
新規の秀丸エディタで一番下のコードをいれると
画像のようにサムネイル部分の幅が合いませんでした。
そこでホームページ上のあらかじめ業者さんが作ってくれているページの中に
コードを入れると今度は幅は合いましたがサムネイル部分の矢印が文字化けのようになりました。
悪戦苦闘しています。。
お力を貸してください
html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0"> <title>sample2</title> <link rel="stylesheet" href="../slick/slick-theme.css"> <link rel="stylesheet" href="../slick/slick.css"> <style type="text/css"> h2 { margin: 20px 0; padding:20px 10px 10px; font-size: 18px; font-weight: bold; border-top:1px #ccc solid; } .slider { margin: 0 0 50px; } .slider img { width: 100%; height: auto; } .single-item { max-width: 600px; margin: 0 auto 50px; } .slick-prev::before, .slick-next::before { font-size: 24px; } .lazy-item .slick-next, .thumb-item-nav .slick-next, .multiple-item .slick-next, .center-item .slick-next { right: 20px; z-index: 99; } .lazy-item .slick-prev, .thumb-item-nav .slick-prev, .multiple-item .slick-prev, .center-item .slick-prev { left: 15px; z-index: 100; } .single-item .slick-prev::before, .single-item .slick-next::before { color: #666; } .slick-dots { bottom:-25px; } .multiple-item li { margin: 0 5px; } .thumb-item { max-width: 700px; margin: 0 auto 5px; padding: 0 5px; } .thumb-item-nav { max-width: 700px; margin: 0 auto; } .thumb-item-nav li{ margin: 5px; } .lazy-item { width: 400px; margin: 0 auto 50px; } .lazy-item li { margin: 0 5px; } </style> </head> <body> <article> <section> <ul class="slider thumb-item"> <li><img src="../cp/images/01.jpg" alt=""></li> <li><img src="../cp/images/02.jpg" alt=""></li> <li><img src="../cp/images/01.jpg" alt=""></li> <li><img src="../cp/images/02.jpg" alt=""></li> <li><img src="../cp/images/01.jpg" alt=""></li> </ul> <ul class="slider thumb-item-nav"> <li><img src="../cp/images/01.jpg" alt=""></li> <li><img src="../cp/images/02.jpg" alt=""></li> <li><img src="../cp/images/01.jpg" alt=""></li> <li><img src="../cp/images/02.jpg" alt=""></li> <li><img src="../cp/images/01.jpg" alt=""></li> </ul> </section> </article> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="../slick/slick.min.js"></script> <script> $(function() { $('.thumb-item').slick({ infinite: true, slidesToShow: 1, slidesToScroll: 1, arrows: false, fade: true, asNavFor: '.thumb-item-nav' //サムネイルのクラス名 }); $('.thumb-item-nav').slick({ infinite: true, slidesToShow: 4, slidesToScroll: 1, asNavFor: '.thumb-item', //スライダー本体のクラス名 focusOnSelect: true, }); }); </script> </body> </html>
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/06/22 14:47
2018/06/22 15:18 編集