35825


楽天APIから取り出した商品画像をSwiperという画像をスライドさせるプラグインで動かしたいのですが動きません。  
htmlだけで設置した時にはスライドするのを確認できました。  
何か記載方法に問題があるのでしょうか。

[code]

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script type="text/javascript" src="swiper/js/swiper.min.js"></script>
    <link rel="stylesheet" href="swiper/css/swiper.css">
    <link rel="stylesheet" href="swiper/css/bootstrap.min.css">
    
    <script type="text/javascript">
        $(function(){
            //HTMLが読み込まれたときに実行する処理
            $url = "https://app.rakuten.co.jp/services/api/IchibaItem/Search/...";
    
            $.getJSON($url, function(json){
                $('.swiper-container').html("");
    
                var dtl = "";
                var j = -1;
                var i = 0;
                //alert(json.Items.length);
    
                for(i=0; i < json.Items.length; i++){
                    j++;
                    if (j===0){
                        dtl += '<div class="item-wrapper swiper-wrapper">';
                    }
                    var img = json.Items[i].Item.mediumImageUrls[0].imageUrl;
                    img = img.replace("128x128","182x182");
                    var itmUrl = json.Items[i].Item.itemUrl;
                    dtl += '<div class="item-slide swiper-slide"><a href="' + itmUrl + '" target="_top"><img src="' + img + '" alt="" title="" border="0"></a></div>';
                }
    
                dtl += '</div>';
                dtl += '<div class="swiper-pagination"></div>';
                dtl += '<div class="swiper-button-prev"></div>';
                dtl += '<div class="swiper-button-next"></div>';
    
    
    
                $('.swiper-container').html(dtl);
            });           
        })
    
    </script>
    </head>
    <body bgcolor="#fafafa">
        <div id="page">
            <div id="contents">
                <div class="container">    
                    <!-- Slider main container -->  
                    <div class="item-container swiper-container mb60">    
    
                    </div><!-- Slider main container -->
                </div>
            </div>    
        <footer id="footer"></footer><!-- / #footer -->
        </div><!-- #page -->
        <script>
    var mySwiper = new Swiper ('.swiper-container', {
      loop: true,
      slidesPerView: 2,
      spaceBetween: 10,
      centeredSlides : true,
      pagination: '.swiper-pagination',
      nextButton: '.swiper-button-next',
      prevButton: '.swiper-button-prev'
    })
        </script>    
    
[/code]


CC BY-SA 3.0
2017-06-20T09:28:02.023
35746
2019-12-14T21:11:10.980
2017-06-20T12:08:34.310
3974
23918
question
javascript json api ajax
楽天APIから取り出した商品画像をSwiperで動かしたい


これだと、非同期でapiを呼び出す前にSwiperのコードが実行されてしまいそうですね。  
非同期でapiを呼び出してdomに突っ込んだ後に、Swiperのコードを実行してあげたら、動きました。

[code]

    window.addEventListener("load", function() {
      //HTMLが読み込まれたときに実行する処理
      Url = "https://app.rakuten.co.jp/services/api/IchibaItem/Search/20140222?format=json&keyword=%E6%A5%BD%E5%A4%A9&genreId=559887&shopCode=rakuten24&applicationId=1011795129779275385";
      jQuery.getJSON(Url, function(json) {
        jQuery('.swiper-container').html("");
        var dtl = "";
        var j = -1;
        var i = 0;
        //alert(json.Items.length);
    
        for (i = 0; i < json.Items.length; i++) {
          j++;
          if (j === 0) {
            dtl += '<div class="item-wrapper swiper-wrapper">';
          }
          var img = json.Items[i].Item.mediumImageUrls[0].imageUrl;
          img = img.replace("128x128", "182x182");
          var itmUrl = json.Items[i].Item.itemUrl;
          dtl += '<div class="item-slide swiper-slide"><a href="' + itmUrl + '" target="_top"><img src="' + img + '" alt="" title="" border="0"></a></div>';
        }
    
        dtl += '</div>';
        dtl += '<div class="swiper-pagination"></div>';
        dtl += '<div class="swiper-button-prev"></div>';
        dtl += '<div class="swiper-button-next"></div>';
        jQuery('.swiper-container').html(dtl);
        var mySwiper = new Swiper('.swiper-container', {
          loop: true,
          slidesPerView: 2,
          spaceBetween: 10,
          centeredSlides: true,
          pagination: '.swiper-pagination',
          nextButton: '.swiper-button-next',
          prevButton: '.swiper-button-prev'
        })
    
      });
    }, false);
    
[/code]

動作サンプル  
<https://codepen.io/rekid/pen/vZJYbx>


CC BY-SA 4.0
2017-06-23T00:42:35.710
35825
2019-12-14T21:11:10.980
2019-12-14T21:11:10.980
32986
23963
35746
answer