webp対応とslickスライダー

やりたいこと

jqueryのプラグインでslickというスライダーを作れるプラグインを使っています。
今まで,
jpegのみでスライダーを作っていましたが、今回webpも対応することになり、
webp対応を進めています。
ですが、既存のslickの設定でlayzyloadの設定を入れてるためか、webp対応するとwebpが読み込まれず,jpegが読み込まれてしまっているので、webpを読み込ませるようにしたいです。

コード

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8" />
5    <title>slick slider</title>
6    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
7    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
8    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
9  </head>
10  <body>
11
12    <ul class="slick01">
13      <li>
14        <picture>
15          <source type="image/webp" srcset="./img/sample1.webp" />
16          <img alt="画像1" data-lazy="./img/sample1.jpg" />
17        </picture>
18      </li>
19      <li>
20        <picture>
21          <source type="image/webp" srcset="./img/sample2.webp" />
22          <img alt="画像2" data-lazy="./img/sample2.jpg" />
23        </picture>
24      </li>
25      <li>
26        <picture>
27          <source type="image/webp" srcset="./img/sample3.webp" />
28          <img alt="画像3" data-lazy="./img/sample3.jpg" />
29        </picture>
30      </li>
31    </ul>
32
33    <script src="js/index.js"></script>
34  </body>
35</html>

js`
$('.slick01').slick({
lazyLoad: 'ondemand',
});

試したこと

ネットワークで、確認するとwebpは読み込まれているのですが、
jpegも読み込まれてしまっており、imgタグの方ではjpgが表示されている状況です。

lazyLoad: 'ondemand',の設定を取って、imgの方をsrcで定義すれば問題ないんですが、
それだと遅延読み込みできないので、他の対応策を考えています。

調べてみたのですが、
webp対応とslickの記事があまりなかったのでどう対応するのがベストなのか知りたいです。

mmkkmm

2021/11/22 15:42 編集

時間たってるので解決済みかもしれませんが…。 sample*.jpgがブラウザ画面に表示されていて、 sample*.webpはブラウザ画面に表示されない、ということでしょうか？記載いただいているコードで試してみたのですが、上記問題だとするとこちらの手元では再現せず、うまくsample*.webpがブラウザ画面に表示されるようでした…。