cssとjsで作るスライダー 左から右でtransform:scaleも含む。

Question

cssで下記サイトのようなスライダーを作っています（トップ部分）
スライド機能を実装中に思ったような動きになりません。

画像が自動的にスライドされて切り替わる部分です。

https://www.kingjim.co.jp/sp/sr-mk1/

以前こちらでいただいた参考記事を参考に実装してみました。

↓参考記事
https://teratail.com/questions/248255

↓私が実装したもの
http://test.room705.jp/%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%80%E3%83%BCex/

<style>
.slider {
  position: relative;
  overflow: hidden;
  width: 500px;
  height: 500px;
  margin: 0 auto
}
.slide {
  position: absolute; 
  width: 0!important;
  height: 500px;
  overflow: hidden;
  transition: width 3s ease-in-out;
}
.slide > .et_pb_image_wrap > img {
  position: absolute; 
  transform:scale(1);
  transition: 3s .7s ease-in-out;
}
.slide.is-now >.et_pb_image_wrap >  img, .slide.is-now > .et_pb_image_wrap > img {
  left: 0;  
  transform:scale(1.1);
}
.slide.is-old {
  width: 500px;
  z-index: 1;
}
.slide.is-now {
  width: 500px;
  z-index: 2;
}
</style>

<script>
jQuery(document).ready(function($) {
var idx = 0;
var interval = 3000;
var items = $(".slide");

timer = setInterval(slideTimer, interval);

function slideTimer() {
items.removeClass("is-now is-old");
items.eq(idx).addClass("is-old");
items.eq(idx==3 ? idx=0 : ++idx).addClass("is-now");
};
});
</script>

scaleは動いてるんですが、cssの
slide{
width:0;
transition;3s ease-in-out;}

が機能していないように思えます。

なお使用しているテーマはdiviです。

Comments

[kuma_kuma_]

実装したURLがあるとしてもこちらにHTMLの記載は行ってください。
(ちなみに実装されたというURL先でも画像が表示されていませんが...)

あと元のコードが良すぎて回答しずらい...

[Lhankor_Mhy]

「思ったような動きになりません」とのことですが、具体的には、どのような動きをすると想定していて、実際にはどのような動きになっているのですか？

ご提示のページを見てみましたが、
width: 0!important;
が効いていて、画像のサイズが0になっているようですが、そのことでしょうか？

[sora135]

回答ありがとうございます。以前もご教授いただいたかたのコードです、無事解決いたしました。ありがとうございます

[Lhankor_Mhy]

ご解決されて何よりです。
自己解決の処理をお願いします。

https://teratail.com/help#resolve-myself