image positioning inside a box for slideshow - html

Question

I've created a box containing images, but what I am trying to do is:
either display the images inline or position them on top of each other, then navigate among them using JQuery.
I've tried absolute positioning on both .box and .box img as well as display: inline but they mess up the code.
here it is so far:
.box {
position: absolute;
left: 10%;
width: 80%;
border: 10px solid white;
border-radius: 10px;
box-shadow: 0 0 4px black;
}
.box img {
width: 100%;
}
.prev, .next {
border: 1px solid black;
padding: 5px;
}
.prev:Hover, .next:Hover {
background-color: red;
color: white;
text-decoration: none;
}
<div class="container-fluid">
<h1>Welcome Within</h1>
<div class="box">
<img src="http://www.dan-dare.org/FreeFun/Images/PrinceOfPersiaWallpaper21024.jpg" />
<img src="https://www.gamewallpapers.com/img_script/mobile_dir2/img.php?src=wallpaper_prince_of_persia_warrior_within_18_ipad.jpg&height=755&width=850&crop-to-fit" />
<img src="https://r.mprd.se/media/images/66295-Prince_Of_Persia_Warrior_Within_READNFO-4.jpg" />
<br /></br />
PREVIOUS
NEXT
</div>
</div>

Answer 1

Try this:
.box {
position: absolute;
left: 10%;
width: 80%;
border: 10px solid white;
border-radius: 10px;
box-shadow: 0 0 4px black;
height: 300px;
overflow: hidden;
margin-bottom: 10px;
}
.caption {
position: absolute;
top: 10px;
color: red;
font-size: 20px;
background: #fff;
left: 30%;
}
.box img {
width: 100%;
}
.prev,
.next {
border: 1px solid black;
padding: 5px;
}
.prev:Hover,
.next:Hover {
background-color: red;
color: white;
text-decoration: none;
}
<div class="container-fluid">
<h1>Welcome Within</h1>
<div class="slider">
PREVIOUS
NEXT
<div class="box">
<img src="http://www.dan-dare.org/FreeFun/Images/PrinceOfPersiaWallpaper21024.jpg" />
<p class="caption">Caption1</p>
</div>
<div class="box">
<img src="https://www.gamewallpapers.com/img_script/mobile_dir2/img.php?src=wallpaper_prince_of_persia_warrior_within_18_ipad.jpg&height=755&width=850&crop-to-fit" />
<p class="caption">Caption2</p>
</div>
<div class="box">
<img src="https://r.mprd.se/media/images/66295-Prince_Of_Persia_Warrior_Within_READNFO-4.jpg" />
<p class="caption">Caption3</p>
</div>
</div>
</div>

Answer 2

I've tried this:
$(document).ready(function() {
$('.lightbox').click(function() {
$('.backdrop, .box').animate({
'opacity': '.50'
}, 300, 'linear');
$('.box').animate({
'opacity': '1.00'
}, 300, 'linear');
$('.backdrop, .box').css('display', 'block');
});
$('.close').click(function() {
close_box();
});
$('.backdrop').click(function() {
close_box();
});
//SlideShow
$('.next').click(function(){
clickNext();
});
$('.prev').click(function(){
clickPrev();
});
});
function close_box() {
$('.backdrop, .box').animate({
'opacity': '0'
}, 300, 'linear', function() {
$('.backdrop, .box').css('display', 'none');
});
}
//PREVIOUS
function clickPrev() {
$('.img_1').css('display', 'block');
//Move to the prev Image
$('.img_2').css('display', 'none');
}
//NEXT
function clickNext() {
$('.img_1').css('display', 'none');
//Move to the next Image
$('.img_2').css('display', 'block');
}
body {
font-family: Helvetica, Arial;
}
.backdrop {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: #000;
opacity: .0;
filter: alpha(opacity=0);
z-index: 50;
display: none;
}
.box {
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
left: 50%;
background: white;
text-align: left;
z-index: 51;
padding: 0;
margin: 0;
display: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 5px #444444;
-webkit-box-shadow: 0px 0px 5px #444444;
box-shadow: 0px 0px 5px #444444;
border: 10px solid #fff;
width: 44%;
}
.box img {
width: 100%;
}
.box img:nth-child(2) {
display: none;
}
.caption {
padding-top: 10px;
font-size: 15px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<h1>Welcome Within</h1>
Open Lightbox
<div class="backdrop"></div>
<div class="box">
<img class="img_1" src="http://www.dan-dare.org/FreeFun/Images/PrinceOfPersiaWallpaper21024.jpg" />
<img class="img_2" src="https://www.gamewallpapers.com/img_script/mobile_dir2/img.php?src=wallpaper_prince_of_persia_warrior_within_18_ipad.jpg&height=755&width=850&crop-to-fit" />
<div class="caption">
<p>This thing is called 'Caption'...Feels nice. Let me tell you:</p>
<hr />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
PREVIOUS
NEXT
</div>
</div>