▽1
●
a-kuma3 ●300ポイント ベストアンサー |
まず、文字にする場合。
index06.html の後半にある <script> に以下のように追記します。
<script> var glide = $('.slider').glide().data('api_glide'); $(window).on('keyup', function (key) { if (key.keyCode === 13) { glide.jump(3, console.log('Wooo!')); }; }); $('.slider__arrows-item').on('click', function() { console.log(glide.current()); }); // ★ここから var content = ['会社概要', '会社案内', '文字3', '文字4', '文字5', '文字6', '文字7',]; $(".slider__nav-item").each(function(index) { $(this).text(content[index]) }); // ★ここまでを追加 </script> <!-- ★以下のスタイルを追加 --> <style> div.slider__nav { width: 350px !important; margin-left: -175px !important; } </style>
.slider__nav の width と margin-left の値は、適当に調整してください。
width を表示する文字の幅に合わせて、その半分の値を margin-left に設定します。
イメージファイルの場合。
<script> var glide = $('.slider').glide().data('api_glide'); $(window).on('keyup', function (key) { if (key.keyCode === 13) { glide.jump(3, console.log('Wooo!')); }; }); $('.slider__arrows-item').on('click', function() { console.log(glide.current()); }); // ★ここから var image_url = ['/images/1.jpg', '/images/2.jpg', '/images/3.jpg', '/images/4.jpg', '/images/5.jpg', '/images/6.jpg', '/images/7.jpg',]; $(".slider__nav-item").each(function(index) { var img = $("<img />"); img.attr("src", image_url[index]); $(this).append(img); }); // ★ここまでを追加 </script> <!-- ★以下のスタイルを追加 --> <style> div.slider__nav { width: 300px !important; margin-left: -150px !important; } .slider__nav-item img { /* これは無くても良いかも */ width: 100px; } </style>
.slider__nav の width と margin-left の調整の仕方は、文字の場合と同じです。