jquery-1.11.2.min.js,jquery.glide.jsを使ってスライドショーを作ろうとしています。


http://1811way.com/work008/index06.html
のところまではできているのですが、
上記サイトの下に7つ白い様な小さな四角があり、ここをクリックするとそれぞれのスライドが展開します。

この下にある、7つ白い様な小さな四角を
「会社概要」「会社案内」「文字3」「文字4」「文字5」「文字6」「文字7」のような文字、またはイメージファイルに変更したいのですができません。

読み込んでいる
style.css
jquery.glide.js
index06.html
をまとめて、
http://1811way.com/work008/sample.txt
で見られます。

下にある、7つ白い様な小さな四角を既述の文字に変えた時用に修正していただけると助かります。
よろしくお願いいたします。

回答の条件
  • 1人1回まで
  • 登録:
  • 終了:2015/03/07 12:00:32
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:a-kuma3 No.1

回答回数4973ベストアンサー獲得回数2154

ポイント300pt

まず、文字にする場合。
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 の調整の仕方は、文字の場合と同じです。

id:kohhi

早速お返事いただき、ありがとうございます。

2015/03/07 11:49:23
id:kohhi

出来ました。いつもありがとうございます。

2015/03/07 12:00:07

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません