前提・実現したいこと
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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。