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

前提・実現したいこと

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

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

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

使用ツール
Brackets
jQuery simplyScroll
Instafeed.js

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

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

該当のソースコード

HTML
1<!doctype html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="description" content="xxxxxxxxxxxxxxxxxxxxxxx">
7    <meta name="viewport" content="width=device-width">
8    <title>xxxxx | xxxxxxxxxxxxxxxxxxxxx</title>
9    <link rel="stylesheet" media="all" href="css/style.css">
10    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
11    <script src="js/script.js"></script>
12    <script type="text/javascript" src="js/jquery.simplyscroll.js"></script>
13    <script type="text/javascript" src="js/instafeed.min.js"></script>
14    <link href="https://fonts.googleapis.com/css?family=Playball&display=swap" rel="stylesheet">
15    <link href="https://fonts.googleapis.com/css?family=Damion&display=swap" rel="stylesheet">
16    
17
18
19    <script>
20        $(function() {
21            var $win = $(window),
22                $main = $('main'),
23                $nav = $('nav'),
24                navHeight = $nav.outerHeight(),
25                navPos = $nav.offset().top,
26                fixedClass = 'is-fixed';
27
28            $win.on('load scroll', function() {
29                var value = $(this).scrollTop();
30                if (value > navPos) {
31                    $nav.addClass(fixedClass);
32                    $main.css('margin-top', navHeight);
33                } else {
34                    $nav.removeClass(fixedClass);
35                    $main.css('margin-top', '0');
36                }
37            });
38        });
39    </script>
40
41 <script type="text/javascript">
42        var feed = new Instafeed({
43            clientId: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
44            get: 'user',
45            userId: 'xxxxxxx',
46            accessToken: 'xxxxxxxx.xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
47            links: true,
48            limit: 12, // 取得件数 
49            resolution: 'thumbnail', // thumbnail (default) - 150x150 | low_resolution - 306x306 | standard_resolution - 612x612
50            template: '<a href="{{link}}"><img src={{image}} alt={{caption}}></a>', // 画像URL：{{image}} リンク：{{link}} キャプションテキスト{{caption}} いいね数：{{likes}} コメント数：{{comments}}
51            after: function () {
52                $('#scroller ul').simplyScroll(); //Instafeed実行後、simplyScrollを実行して横スクロールさせる
53            },
54        });
55        feed.run();
56    </script>
57
58   
59</head>
60   
61    <body>
62        
63        <header>
64             <img src="images/logo.jpg" alt="" class="logo">
65    <div>        
66        <nav id="topnavi">
67            <ul class="top">
68                <li><a href="#"><span class="TOP">TOP</span></a></li>
69                <li><a href="#"><span class="COMPANY">COMPANY</span></a></li>
70                <li><a href="#"><span class="ACCESS">ACCESS</span></a></li>
71                <li><a href="#"><span class="CONTACT">CONTACT</span></a></li>
72
73                <li><a href="https://www.youtube.com/"><img src="images/youtube.jpg" alt="youtube" class="youtube"></a></li>
74                <li><a href="https://twitter.com/xxxxxxxx"><img src="images/twitter_m.jpg" alt="twitter" class="twitter_m"></a></li>
75                <li><a href="https://www.instagram.com/xxxxxxxxx/"><img src="images/Instagram_icon.jpg" alt="Instagram" class="Instagram_icon"></a></li>
76                <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>
77                </li>
78            </ul>
79        </nav>
80        </div>
81    </header>
82
83    <div class="home">
84        <img src="images/home1.jpg" alt="" class="">
85        <p><span class="main">Beyond The Future</span></p>
86        <p><span class="main2">型にはまらない<br>オモシロイを<br>創造する</span></p>
87        <p><span class="main3">Unconventional and<br>Creating an interesting</span></p>
88   
89    </div>
90            <div class="insta">
91                <p>xxxx公式Instagram >> 最新情報はこちらからチェック！！</p>
92            </div>
93        
94        <div id="scroller">
95                
96            <ul id="instafeed" class="clearfix"></ul>
97        </div>    
98
99    <div class="aboutus_image slideContsR slideConts">
100        <img src="images/aboutus2.jpg" alt="">
101        <p><span class="AboutUs">About Us</span></p>
102        <a href="#" class="btn-square">LEARN MORE</a>
103        </div>
104        
105     <div class="aboutus_image slideContsL slideConts">   
106        <img src="images/shoplist.jpg" alt="" class="shoplist_image">
107        <p><span class="shoplist">Shop List</span></p>
108        <a href="#" class="btn-square2">LEARN MORE</a>
109    </div>
110
111 
112       
113        
114</body>
115</html>
116

試したこと

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

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

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

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

行動規範の内容に同意します

回答1件

自己解決

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

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

投稿2020/01/16 17:48

phantom8888

総合スコア5