https://www.paris-miki.co.jp/cms/js/geteventdata_ranking.js

1function loadRankingList(eventName, targetId) {
2    var path = '';
3    var jsonUrl = path + "/api/goodslistapi.aspx?event=" + eventName + "&type=json&top=5";
4    
5    jQuery.getJSON(jsonUrl, function(data) {
6        data = data.slice(0, 5);
7        var targetLi = jQuery('#' + targetId).find('.block-ranking-r--items li');
8        var allDlHtml = "";
9
10        jQuery.each(data, function(index, item) {
11            var detailUrl = "/shop/g/g" + item.goods + "/";
12            var rank = index + 1;
13            // dl自体に swiper-slide を付与
14            allDlHtml += 
15                '<dl class="block-ranking-r--goods block-ranking-r--goods-rank-' + rank + ' js-enhanced-ecommerce-item swiper-slide" goodsid="' + item.goods + '">' +
16                '  <dt class="block-ranking-r--goods-image">' +
17                '    <a href="' + detailUrl + '" title="' + item.name + '" class="js-enhanced-ecommerce-image">' +
18                '      <figure class="img-center">' +
19                '        <img alt="' + item.name + '" src="' + item.src_s + '">' +
20                '      </figure>' +
21                '    </a>' +
22                '    <div class="block-ranking-r--rank block-ranking-r--rank-' + rank + '">' + rank + '</div>' +
23                '  </dt>' +
24                '  <dd class="block-ranking-r--goods-description">' +
25                '    <div class="block-ranking-r--goods-name">' +
26                '      <a href="' + detailUrl + '" title="' + item.name + '" class="js-enhanced-ecommerce-goods-name">' + item.name + '</a>' +
27                '    </div>' +
28                '    <div class="variation-name js-enhanced-ecommerce-variation-name">' + item.variation_name2 + '</div>' +
29                '    <div class="block-icon js-block-icon">' + '</div>' +
30                '    <div class="block-ranking-r--price-infos"><div class="block-ranking-r--price-items"><div class="block-ranking-r--price price">' + item.format_price + '<span>円(税込)</span></div></div></div>' +
31                '  </dd>' +
32                '</dl>';
33        });
34
35        // 1. 一旦HTMLを流し込む
36        targetLi.html(allDlHtml);
37
38        jQuery.each(data, function(index, item) {
39            var detailUrl = '/shop/g/g' + item.goods + '/';
40
41            jQuery.get(detailUrl, function(html) {
42                var iconHtml;
43                if (jQuery(html).find('.pane-goods-right-side form > .block-icon').length != 0) {
44                    iconHtml = jQuery(html).find('.pane-goods-right-side form > .block-icon').html();
45                } else if (jQuery(html).find('.pane-goods-left-side > .block-icon').length != 0) {
46                    iconHtml = jQuery(html).find('.pane-goods-left-side > .block-icon').html();
47                }
48                if (!iconHtml) {
49                    return;
50                }
51                jQuery('#' + targetId).find('.block-ranking-r--goods[goodsid=' + item.goods + ']' + ' .js-block-icon').html(iconHtml);
52            });
53        });
54
55        // 2. Swiperの標準構造に合わせてラップし直す
56        // 不要な .swiper-inner を省き、標準的な階層構造にします
57        targetLi.wrapInner('<div class="swiper"><div class="swiper-inner"><div class="swiper-wrapper"></div></div><div class="swiper-scrollbar"></div><div class="swiper-buttons"><div class="swiper-button-prev swiper-button"></div><div class="swiper-button-next swiper-button"></div></div></div>');
58
59        // 3. 要素を確実に指定して初期化
60        const swiperEl = targetLi.find('.swiper-inner')[0];
61        
62        const swiperranking = new Swiper(swiperEl, {
63            watchSlidesProgress: true,
64            spaceBetween: 24, // 0だと繋がって見えるので少し隙間をあけるのが一般的
65            slidesPerView: 'auto',
66            observer: true,           // 追加：DOMの変化を監視
67            observeParents: true,     // 追加：親要素の変化を監視
68            autoplay: {
69                delay: 5000,
70                disableOnInteraction: false,
71            },

72            speed: 800,
73            navigation: {
74                nextEl: targetLi.find('.swiper-button-next')[0],
75                prevEl: targetLi.find('.swiper-button-prev')[0]
76            },    
77            scrollbar: {
78                el: targetLi.find('.swiper-scrollbar')[0],
79                hide: false,
80                draggable: true,
81                snapOnRelease: true
82            },
83            breakpoints: {
84            // PCはスライダー無効
85                768: {
86                    enabled: false,
87                    autoplay: false,
88                }
89            }
90        }); 
91
92    }).fail(function(jqXHR, textStatus, errorThrown) {
93        console.error("JSONの取得に失敗しました: ", textStatus, errorThrown);
94    });
95}