先日、サイトにbarba.jsを導入したのですが、導入後、bxSliderが使えなくなってしまいました。
画面遷移した後、クリックしても画像がスライドしません。(リロードすれば動作します。)
複数のサイトを参考にいろいろ試しましたが、効果がなかったり、barba.jsが働かなくなったりしてしまいました。既存のスクリプト(アニメーション効果とGoogle Analytics対策用のスクリプト)
javascript
1Barba.Pjax.init(); 2var FadeTransition = Barba.BaseTransition.extend({ 3 start: function() { Promise.all([this.newContainerLoading, this.fadeOut()]).then(this.fadeIn.bind(this)) }, 4 fadeOut: function() { return $(this.oldContainer).animate({ opacity: 0 }).promise() }, 5 fadeIn: function() { 6 var b = this; 7 var a = $(this.newContainer); 8 $(this.oldContainer).hide(); 9 a.css({ visibility: "visible", opacity: 0 }); 10 a.animate({ opacity: 1 }, 400, function() { b.done() }) 11 } 12}); 13Barba.Pjax.getTransition = function() { return FadeTransition }; 14Barba.Dispatcher.on("initStateChange", function() { if (typeof ga === "function" && Barba.HistoryManager.history.length >= 1) { ga("send", "pageview", location.pathname) } if (typeof gtag === "function" && Barba.HistoryManager.history.length >= 1) { gtag("config", "トラッキングID", { page_path: location.pathname }) } });
に、複数の外部のJavaScriptを読み込ませられるようにしたいです。
方法を教えてください。お願いします。
これはお読みになりましたか? https://qiita.com/NomuraS/items/29b72c9b12993154f91c#javascript%E3%81%AE%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88
読みましたが、javascriptが全くと言ってもいいほどわからないので、カンペがないとわかりません(泣)
そちらに書いてあるとおり、Barba.Dispatcher.on('newPageReady', function () { ... }) に、ロード時のスクリプトを置けばいいのですが、難しいですか?
はい、HTMLとCSSくらいしかできませんね、お恥ずかしい話ですが
上のスクリプトもgoogleで調べながらなんとか書いたものなので、、、
どうやって、bxSlider を置いたんですか? 業者さんに発注したのであれば、今回もそのようにした方がいいと思います。
いいえ、自分で設置しました
CDNで読み込むだけなので、、、
bxSlider のサンプルコードを見ましたが、CDNで読み込む他に、ロードイベントでメソッドを叩いているはずですが。
$(document).ready(function(){ $('.bxslider').bxSlider(); });ですか?
そうですね。いずれにせよ、「ここが分かればあとは自分でできる」ということであればお手伝いできますが、そうでなければご自分でがんばるしかないですよね。
{ Barba.Dispatcher.on('newPageReady', function () { $(document).ready(function(){ $('.bxslider').bxSlider(); }); }) })とすればいいのですか?
$(document).ready(function(){ ... }) はいらないと思います。中身だけでいいかと。
あ、本当でした、ありがとうございました。
swiper.jsはロードのスクリプトだけでは動かないのですが、、、
var swiper=new Swiper(".swiper-container",{slidesPerView:1,spaceBetween:30,loop:true,pagination:{el:".swiper-pagination",clickable:true},navigation:{nextEl:".swiper-button-next",prevEl:".swiper-button-prev"}});
これですね
jqueryがいらないので移行を考えているのですがボタンが反応しません
それで動きそうな気がしますが…… ちょっと、これだけだと何とも言えないです。
また捨て垢さんだったか。
あなたの回答
tips
プレビュー