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