スライダーの画像を横スクロールした時に画像を拡大させたい

Question

実現したいこと

• スライダーの画像を横スクロールした時に画像が拡大すること

前提

html, css, jQueryを用いて無限ループありのスライダーを実装しました。スライダーの画像を横スクロール時に画像が拡大するようにしたいのですが、拡大されません。cssは動きと関係しないので省略します。

該当のソースコード

<div class="multiple">
            <div><img src="" ></div>
            <div><img src="" ></div>
            <div><img src="" ></div>
            <div><img src="" ></div>
</div>
画像は省略します。

$(document).ready(function(){
            $('.multiple').slick({
                autoplay: false,
                infinite: true,
                slidesToShow: 1, 
                slidesToScroll: 1, 
                touchThreshold: 5,
                centerMode: false,
                arrows: false,
            });
        });
$(function() {
            $(window).on('scroll', function(){
                var scrollX = $(window).scrollLeft();
                var bgSize = 100+(scrollX/10);
                if(bgSize < 200){
                $('.multiple img').css('background-size', bgSize+'%');
            }
        });

試したこと

jQueryソースコード14行目のscrollLeftをscrollRightに変えたり、16行目の<、>を変えたりしたこと。

補足情報（FW/ツールのバージョンなど）

Comments

[yukihide1188]

src=""にパスを指定して画像表示していますか？

[ryuhosoy2]

しています。画像はしっかりうつっていて、スライダーの動作に問題はないのが前提です。

Answer 1

• transform: scale()を使用する。

もしくは、

• 画像をbackground-imageで指定する。

---

画像をbackground-sizeで拡大しようとしているのが原因ではないかと思います。
background-sizeはbackground-imageを拡大縮小するプロパティなので、imgタグには効きません。
そのため、transform: scale()で拡大するか、imgタグではなくbackground-imageで画像を指定してあげる必要があります。