質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.86%

スライダーが初回表示は止まるが、更新すると動くエラー

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 60

phantom8888

score 1

前提・実現したいこと

InstafeedとSimplyScrollを使用したスライダーの実装には成功しましたが、実際のページを確認すると、一度目の表示では複数列になり、かつ、スライドもしませんが、ブラウザを更新するとちゃんとスライダーが動く現象に陥っております。

どなたか解決して頂けないでしょうか。

お手数ですが宜しくお願い致します。

使用ツール
Brackets
jQuery simplyScroll
Instafeed.js

発生している問題・エラーメッセージ

該当のスライダーを入れている箇所が、初回表示時にスライドが機能しない(ブラウザを更新すると動き出す)

該当のソースコード

<!doctype html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="description" content="xxxxxxxxxxxxxxxxxxxxxxx">
    <meta name="viewport" content="width=device-width">
    <title>xxxxx | xxxxxxxxxxxxxxxxxxxxx</title>
    <link rel="stylesheet" media="all" href="css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="js/script.js"></script>
    <script type="text/javascript" src="js/jquery.simplyscroll.js"></script>
    <script type="text/javascript" src="js/instafeed.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Playball&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Damion&display=swap" rel="stylesheet">



    <script>
        $(function() {
            var $win = $(window),
                $main = $('main'),
                $nav = $('nav'),
                navHeight = $nav.outerHeight(),
                navPos = $nav.offset().top,
                fixedClass = 'is-fixed';

            $win.on('load scroll', function() {
                var value = $(this).scrollTop();
                if (value > navPos) {
                    $nav.addClass(fixedClass);
                    $main.css('margin-top', navHeight);
                } else {
                    $nav.removeClass(fixedClass);
                    $main.css('margin-top', '0');
                }
            });
        });
    </script>

 <script type="text/javascript">
        var feed = new Instafeed({
            clientId: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
            get: 'user',
            userId: 'xxxxxxx',
            accessToken: 'xxxxxxxx.xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
            links: true,
            limit: 12, // 取得件数 
            resolution: 'thumbnail', // thumbnail (default) - 150x150 | low_resolution - 306x306 | standard_resolution - 612x612
            template: '<a href="{{link}}"><img src={{image}} alt={{caption}}></a>', // 画像URL:{{image}} リンク:{{link}} キャプションテキスト{{caption}} いいね数:{{likes}} コメント数:{{comments}}
            after: function () {
                $('#scroller ul').simplyScroll(); //Instafeed実行後、simplyScrollを実行して横スクロールさせる
            },
        });
        feed.run();
    </script>


</head>

    <body>

        <header>
             <img src="images/logo.jpg" alt="" class="logo">
    <div>        
        <nav id="topnavi">
            <ul class="top">
                <li><a href="#"><span class="TOP">TOP</span></a></li>
                <li><a href="#"><span class="COMPANY">COMPANY</span></a></li>
                <li><a href="#"><span class="ACCESS">ACCESS</span></a></li>
                <li><a href="#"><span class="CONTACT">CONTACT</span></a></li>

                <li><a href="https://www.youtube.com/"><img src="images/youtube.jpg" alt="youtube" class="youtube"></a></li>
                <li><a href="https://twitter.com/xxxxxxxx"><img src="images/twitter_m.jpg" alt="twitter" class="twitter_m"></a></li>
                <li><a href="https://www.instagram.com/xxxxxxxxx/"><img src="images/Instagram_icon.jpg" alt="Instagram" class="Instagram_icon"></a></li>
                <li><a href="https://www.facebook.com/pages/category/Internet-Company/%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE%E3%82%A2%E3%83%B3%E3%82%B3%E3%82%B3%E3%83%B3-xxxxxxxxxxxx/"><img src="images/eyecatch.jpg" alt="facebook" class="facebook"></a>
                </li>
            </ul>
        </nav>
        </div>
    </header>

    <div class="home">
        <img src="images/home1.jpg" alt="" class="">
        <p><span class="main">Beyond The Future</span></p>
        <p><span class="main2">型にはまらない<br>オモシロイを<br>創造する</span></p>
        <p><span class="main3">Unconventional and<br>Creating an interesting</span></p>

    </div>
            <div class="insta">
                <p>xxxx公式Instagram >> 最新情報はこちらからチェック!!</p>
            </div>

        <div id="scroller">

            <ul id="instafeed" class="clearfix"></ul>
        </div>    

    <div class="aboutus_image slideContsR slideConts">
        <img src="images/aboutus2.jpg" alt="">
        <p><span class="AboutUs">About Us</span></p>
        <a href="#" class="btn-square">LEARN MORE</a>
        </div>

     <div class="aboutus_image slideContsL slideConts">   
        <img src="images/shoplist.jpg" alt="" class="shoplist_image">
        <p><span class="shoplist">Shop List</span></p>
        <a href="#" class="btn-square2">LEARN MORE</a>
    </div>




</body>
</html>

試したこと

TOPページに使用している画像サイズの変更(1M近い画像を220kbに変更)
→特に変わりなし。

on load の挿入
→どこにどのように入れたらいいのかが不明(初心者で申し訳ございません。)

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

check解決した方法

0

template: '<li><a href="{{link}}"><img src={{image}} alt={{caption}}></a></li>', // 画像URL:{{image}} リンク:{{link}} キャプションテキスト{{caption}} いいね数:{{likes}} コメント数:{{comments}}

上記が正しいものになります。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.86%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる