楽天APIから取り出した商品画像をSwiperで動かしたい

by shigetak

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<pre>
https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.jquery.js
https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.css
</pre>

<div id="contents">
  <div class="container">    
    <div class="item-container swiper-container mb60">    
      -- Slider main container --
    </div>
  </div>
</div>

CSS

.container{
  width:100%;
}

JavaScript

//HTMLが読み込まれたときに実行する処理
Url = "https://app.rakuten.co.jp/services/api/IchibaItem/Search/20140222?format=json&keyword=%E6%A5%BD%E5%A4%A9&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>';
  $('.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'
  })

  });