swiper.js HTMLをスライドさせたい

今、swiper.jsを使って、

以下のように生のHTMLを表示かつ、スライドさせたいとおもっており、
一応スライドさせることはできたのですが、（laravelのblade内にかいています）

HTML記入、の中にgoogle chartだったり、chart.jsで作成したグラフを
いれて、スライドさせようとすると、読み込みに時間がかかるのか
グラフの読み込みがスライドと同時に行われず、表示が遅く、
もともとこれも大分強引なやり方だと思うので
探しているのですが見つからず。。

他に何かいい方法がありましたが
ご教示いただけますと
幸いでございます。

どうぞよろしくお願い致します。

<div class="swiper-container">
	<!-- メイン表示部分 -->
	<div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="graph">
              <div i="chart-div"></div>
          </div>
         <div class="swiper-slide">
　　        <h3>title</h3>
         </div>
         <div class="swiper-slide">
　　       <h3>title2</h3>
         </div>
    </div>
</div>
<script>
  //----------画面全体スライドショー----------//
 
    // ライブラリのロード
    // name:visualization(可視化),version:バージョン(1),packages:パッケージ(corechart)
    google.load('visualization', '1', {'packages':['corechart']});     

    // グラフを描画する為のコールバック関数を指定
    google.setOnLoadCallback(drawChart);
  
    // グラフの描画   
    function drawChart() {         

      // 配列からデータの生成
      var data = google.visualization.arrayToDataTable([

        ['年度', '目標', '実績'],
        ['4月',  5000, 1000 ],
        ['5月',  6000, 2000 ],            
        ['6月',  7000, 1500 ],
        ['7月',  8000, 3000 ], 
        ['8月',  9000, 4500 ],
        ['9月',  10000, 8000 ]  
      ]);
      
      // オプションの設定
      var options = {
        title: '推移',
        colors:['DDA0DD','87CEFA'],
        backgroundColor: '757575',
        chartArea: {
         backgroundColor: '757575'
       },
       titleTextStyle: { color: '#FFF' },
       hAxis: {
        textStyle: {color:'#FFF'},
      },
      vAxis: {
        textStyle:{color:'#FFF'},
      },
      subtitle: {
        textStyle:{color:'#FFF'},
      },
      legend: {
        textStyle: {color: '#FFF'},
      }
      };      


      // 指定されたIDの要素に棒グラフを作成
      var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    
      // グラフの描画
      chart.draw(data, options);
  }

  var mySwiper = new Swiper('.swiper-container', {
      loop: true,
      speed: 2000,
      autoplay: {
          delay:10000,
          stopOnLast:false,
          desableOnInteraction:true
      },
      effect: 'slide'
  });

  

</script>

Lhankor_Mhy

2020/09/02 01:23

「google chartだったり、chart.jsで作成したグラフ」のコードをご提示ください。

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

回答1件

こんにちは。

補足依頼にお答えいただけなかったので、推測で回答します。

当方の環境で試したところ、問題なく動作しました。

サンプル

ただ、swiperのコードをchart.jsのコードの前に実行すると表示がされないようでしたので、rinkoroさんのコードもそのようになっているのではありませんか？

投稿2020/09/03 02:56

Lhankor_Mhy

総合スコア36126

rinkoro

2020/09/08 05:44

こんにちは。返信遅くなって申し訳ありません。しかもご丁寧にサンプルまで作っていただいてありがとうございます。コードを追加しました。現在、クリックでスライドを次ページに遷移させるという形ではなく自動で何秒後化に切り替わる設定にしており、（すみませんこちら説明不足でした）この設定で行くと、やはりグラフの表示が遅い状態です。。。