1
まず弱い英語をお詫び申し上げます。CSS：スライドショーの矢印（画像）を内側の要素の上に置く
HTML,CSS、JavaScript（ただし、JavaScrptはこの作業には必要ありません）を使用してスライドショーを作成しています。問題は、windowのサイズを変更すると、左側と右側の矢印は要素の上にはなく、リスト項目をプッシュすることです。混乱を避けるために、私はJSfiddle
を持っており、以下のコードは使用：
h1 {
\t font-family: 'Raleway', sans-serif;
\t text-align: center;
\t padding: 50px 0px;
\t text-transform: uppercase;
\t font-weight: 200;
}
.games-slideshow {
\t position: relative;
\t width: 100%;
\t height: 500px;
\t background-color: red;
}
.games-slideshow .left-arrow {
\t float: left;
\t opacity: .5;
\t margin-left: 20px;
\t cursor: pointer;
\t position: relative;
\t top: 50%;
\t transform: translateY(-50%);
\t z-index: 9999;
}
.games-slideshow .right-arrow {
\t float: right;
\t opacity: .5;
\t margin-right: 20px;
\t cursor: pointer;
\t position: relative;
\t top: 50%;
\t transform: translateY(-50%);
\t z-index: 9999;
}
.games-slideshow .navigate {
\t width: 100px;
\t margin: auto;
\t position: absolute;
\t bottom: 0;
\t left: 0;
\t right: 0;
}
.games-slideshow .navigate ul {
\t padding: 0px;
\t margin: 0px;
\t list-style: none;
}
.games-slideshow .navigate ul li {
\t display: inline-block;
\t padding: 0px 5px 0px 0px;
\t list-style: none;
}
.games-slideshow .navigate ul li img {
\t height: 20px;
\t cursor: pointer;
\t opacity: .5;
\t transform: opacity 0.15s ease-in-out;
}
.games-slideshow .navigate ul li img:hover {
\t opacity: 1;
\t transform: opacity 0.15s ease-in-out;
}
.games-slideshow .page1 {
\t position: relative;
\t max-width: 1200px;
\t height: 60%;
\t background-color: yellow;
\t top: 50%;
\t transform: translateY(-50%);
\t margin: auto;
\t padding: 0px;
}
.games-slideshow .page1 li {
\t position: relative;
\t height: 100%!important;
\t max-width: 320px;
\t display: inline-block;
\t background-color: green;
\t list-style: none;
}
.games-slideshow .page1 .not-last {
\t margin-right: 12.15%;
}
.games-slideshow .page1 .last {
\t margin-right: 0%!important;
}<body>
<div class="games-slideshow"> <img class="left-arrow" src="/Applications/XAMPP/xamppfiles/htdocs/MyFutureCompanyWebsite/images/leftSlideShowArrow.png"/> <img class="right-arrow" src="/Applications/XAMPP/xamppfiles/htdocs/MyFutureCompanyWebsite/images/rightSlideShowArrow.png"/>
<div class="navigate">
<ul>
<li><img class="slideshow-circle" src="/Applications/XAMPP/xamppfiles/htdocs/MyFutureCompanyWebsite/images/slideshowCircle.png"/></li>
<li><img class="slideshow-circle" src="/Applications/XAMPP/xamppfiles/htdocs/MyFutureCompanyWebsite/images/slideshowCircle.png"/></li>
<li><img class="slideshow-circle" src="/Applications/XAMPP/xamppfiles/htdocs/MyFutureCompanyWebsite/images/slideshowCircle.png"/></li>
<li class="last"><img class="slideshow-circle" src="/Applications/XAMPP/xamppfiles/htdocs/MyFutureCompanyWebsite/images/slideshowCircle.png"/></li>
</ul>
</div>
<ul class="page1">
<li class="not-last">
<div class="game">
<p>Game Title</p>
<a>More</a> </div>
</li>
<li class="not-last">
<div class="game">
<p>Game Title</p>
<a>More</a> </div>
</li>
<li class="last">
<div class="game">
<p>Game Title</p>
<a>More</a> </div>
</li>
</ul>
</div>
<p id="debug"></p>
</body>
\t \t \t \tは矢印がリスト項目を押して、問題を表示するには、ウィンドウのサイズを変更してください。これは私が直面している問題です。誰もがスライドショーの中の要素を押したり影響を与えないようにするにはどうすればよいでしょうか？
私はあなたの答えをありがとう！
おい、あなたは同じのための例をたくさん見つけることができます。ロジックは単純です：画像のコンテナの左右に絶対的な位置に矢印を置きます。あなたの画像のコンテナで、あなたのアイテムが浮き上がらないように 'white-space：nowrap'を設定してください。それに応じて項目の幅を設定します。そしてJS/jQueryを使ってスライダを処理します。または、実際には既存のJSスライダを使用することもできます。 – Sayed
ありがとう、男！私は位置を絶対と浮動小数点の代わりに変更する必要があります：左から左：0と浮動小数点：右から右：0.あなたのコメントを回答として投稿してください。あなたはいくつかの評判に値する！ – GeorGios
助けてくれてうれしい！ :) – Sayed