GeorGios GeorGios - 3 months ago 28
CSS Question

CSS: Placing arrows (images) of a slideshow on top of it's inner elements

First I need to apologize for my weak English language.

I am making a slideshow using

HTML
,
CSS
and
JavaScript
(but
JavaScrpt
isn't needed for this task). the issue is that when I resize the
window
, the arrows which are on the left and on the right are not above of the elements but it pushes the list item. To avoid confusion I have the JSfiddle

And the code used below:



h1 {
font-family: 'Raleway', sans-serif;
text-align: center;
padding: 50px 0px;
text-transform: uppercase;
font-weight: 200;
}
.games-slideshow {
position: relative;
width: 100%;
height: 500px;
background-color: red;
}
.games-slideshow .left-arrow {
float: left;
opacity: .5;
margin-left: 20px;
cursor: pointer;
position: relative;
top: 50%;
transform: translateY(-50%);
z-index: 9999;
}
.games-slideshow .right-arrow {
float: right;
opacity: .5;
margin-right: 20px;
cursor: pointer;
position: relative;
top: 50%;
transform: translateY(-50%);
z-index: 9999;
}
.games-slideshow .navigate {
width: 100px;
margin: auto;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.games-slideshow .navigate ul {
padding: 0px;
margin: 0px;
list-style: none;
}
.games-slideshow .navigate ul li {
display: inline-block;
padding: 0px 5px 0px 0px;
list-style: none;
}
.games-slideshow .navigate ul li img {
height: 20px;
cursor: pointer;
opacity: .5;
transform: opacity 0.15s ease-in-out;
}
.games-slideshow .navigate ul li img:hover {
opacity: 1;
transform: opacity 0.15s ease-in-out;
}
.games-slideshow .page1 {
position: relative;
max-width: 1200px;
height: 60%;
background-color: yellow;
top: 50%;
transform: translateY(-50%);
margin: auto;
padding: 0px;
}
.games-slideshow .page1 li {
position: relative;
height: 100%!important;
max-width: 320px;
display: inline-block;
background-color: green;
list-style: none;
}
.games-slideshow .page1 .not-last {
margin-right: 12.15%;
}
.games-slideshow .page1 .last {
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>





Try resizing the window to see the issue where the arrows push the list item. This is the issue I am facing. Does anyone know how can I make these arrows to not push or affect the elements inside the slideshow?

I appreciate your answers!

Answer

You'll find plenty of examples for the same.

The logic is simple: Put your arrows with absolute position to left and right of images' container. In your images' container, set white-space: nowrap so that your items do not float down. Set the width of the items accordingly. And then use JS/jQuery to process your slider. Or wait, you can actually use any existing JS slider!

Some nice sliders are:

http://www.menucool.com/slider/javascript-image-slider-demo4

http://www.jssor.com/