jQueryの「Cycle」プラグインが原因でコンテンツが中央に配置されない場合、これを修正するにはどうすればよいですか?
-
27-09-2019 - |
質問
jQueryの「Cycle」プラグイン(http://jquery.malsup.com/cycle/)を使用して、<span>
s内にある紹介文をローテーションしようとしています...しかし、プラグインが原因でコンテンツが中央に配置されていません。昨日の朝、ここの誰かが、<span>
要素がプラグインによって絶対的に配置されていることを指摘しました:$slides.css({position: 'absolute', top:0, left:0}).hide()
JSを知らず、まだHTML / CSSに取り組んでいるので、ここの誰かがこれに対する修正を知っていて、私を助けてくれることを望んでいました。うまくいかない場合:/
left:50%
を追加しようとしましたが、中央に表示されていますが、スライドが壊れており、すべての<span>
が一度に表示されます。
[編集]
HTMLとCSSは次のとおりです: ジェネラコディセタグプレ
単独で、すべてが計画どおりに機能します。次に、jQuery / Cycleプラグインを追加します。 ジェネラコディセタグプレ
これがすべてを台無しにするものです。現状では、<span>
は一度に1つずつ表示され、絶対的な配置のためにテキストが中央に配置されなくなったことを除いて、想定どおりにフェードインおよびフェードアウトします。そこで、left:0
をleft:50%
に変更しました-wha la!問題が解決されたテキストは中央に配置されますが、スパンがすべて同時に表示され、フェードイン/フェードアウトがない場合を除きます。
解決
コードがないと、これを呼び出すのは簡単ではありませんが、お客様の声はある種のブロック要素内にあると思います。その要素にposition:relative
を適用すると、絶対的に配置された<span>
がその要素に含まれます。スパン自体にポジショニングスタイルを実際に適用するのではなく、プラグインに任せてください。
お役に立てば幸いです
編集
これを試してみてください: ジェネラコディセタグプレ
<spans>
の幅と一致するように、div.slideshow
の幅も手動で設定する必要がある場合があります