【週刊ドットインストール】 考える力を養うための新クラス『データで学ぶアルゴリズム』を256timesでリリース!
スライドの移動する距離は、moveSlides()関数の中の
moveSlides()
ul.style.transform = `translateX(${-1 * slideWidth * currentIndex}px)`;
で設定していますが、この時の移動の基準となる位置について教えてください。
スライドの幅が100pxだったとして、スライドaからbまたはcへの移動の場合、translateX(-100px)、translateX(-200px)となるので理解できます。 でも、スライドbからcの移動の場合もtranslateX(-200px)となるのですが、この場合移動距離は-100pxかと思います。 translateXで移動する基準値は現在のスライドの位置ではなく、初期の状態(スライドaが表示されている状態)からの移動距離ということでしょうか?
translateX(-100px)、translateX(-200px)
translateX(-200px)
translateX
よろしくお願いいたします。
ドットインストールは、3分動画でマスターできるプログラミング学習サービスです。
3分で気軽に学習でき、スマートフォンからも視聴可能です。ホームページやWebサービスの制作を通して、実践的にプログラミングを学べます。
他にも、ゲーム制作やデータ分析・機械学習・AIに使われる言語まで幅広くカバー。学びたい分野のレッスンがきっと見つかります。
この回答を見るにはプレミアムプランへの登録が必要です
スライドの移動する距離は、
moveSlides()関数の中ので設定していますが、この時の移動の基準となる位置について教えてください。
スライドの幅が100pxだったとして、スライドaからbまたはcへの移動の場合、
translateX(-100px)、translateX(-200px)となるので理解できます。でも、スライドbからcの移動の場合も
translateX(-200px)となるのですが、この場合移動距離は-100pxかと思います。translateXで移動する基準値は現在のスライドの位置ではなく、初期の状態(スライドaが表示されている状態)からの移動距離ということでしょうか?よろしくお願いいたします。