https://www.lens-apple.jp/js/goods/index.js

1
2//-----------------------------------------------
3// 商品画像スライダー
4//-----------------------------------------------
5$(function(){
6    // メイン画像スライダー
7    var visualMainSwiper = new Swiper(".js_goods_visual_main", {
8        navigation: {
9            nextEl: ".swiper-button-next",
10            prevEl: ".swiper-button-prev",
11        },
12        pagination: {
13            'el': '.swiper-pagination',
14            'type': 'fraction',
15        },
16        on: {
17            realIndexChange: function () {
18                // アクティブなサムネイルを切り替える関数を実行
19                toggleThumb(this.activeIndex);
20            },
21        }
22    });
23
24    // サムネイル要素を変数に格納
25    var $visualThumbs = $('.js_goods_visual_thumb > li');
26
27    // アクティブなサムネイルにクラスを追加、それ以外はクラスを削除
28    function toggleThumb(index) {
29        $visualThumbs.removeClass('active');
30        $visualThumbs.eq(index).addClass('active');
31    }
32
33    // サムネイルをクリックした時の処理
34    $visualThumbs.on('click', function(){
35        // インデックスを取得
36        var i = $visualThumbs.index(this);
37        // アクティブなサムネイルを切り替える関数を実行
38        toggleThumb(i);
39        // メイン画像をスライドさせる
40        visualMainSwiper.slideTo(i, 300);
41    });
42
43    // 1番目のサムネイルにクリックイベントを渡す
44    $visualThumbs.eq(0).trigger("click");
45});
46