Having trouble with two queries. Take a look at the live view here
First Query: Struggling to position the progress bar below my image using CSS.
Second Query: Want to make the images slide left instead of fading with the progress bar in my Javascript.
code for first query
.slideshow {
position:relative;
}
.slideshow-inner {
position:relative;
}
.slideshow-inner img {
position:absolute;
}
.progress-bar {
background-image: -webkit-linear-gradient(#383838 0%, #505050 100%);
background-image: -moz-linear-gradient(#383838 0%, #505050 100%);
background-image: -o-linear-gradient(#383838 0%, #505050 100%);
background-image: linear-gradient(#383838 0%, #505050 100%);
margin: 0;
padding: 0;
height: 20px;
position:relative;
width: 0%;
}
Code For Second Query
<script type="text/javascript">
var currentIndex = 0;
function progress() {
$(".slideshow img").hide();
$(".slideshow img").eq(currentIndex).show();
$(".progress-bar").css("width", "0");
currentIndex++;
if (currentIndex > 2) {
currentIndex = 0;
}
$('.slideshow-bar').animate({
width: '100%'
}, 5000, "linear", progress);
}
progress();
</script>
Code HTML
<div class="page-wrapper">
<div class="slideshow">
<div class="slideshow-inner">
<img data-src="holder.js/100%x280/grey" >
</div>
<div class="slideshow-inner">
<img data-src="holder.js/100%x280/sky">
</div>
<div class="slideshow-inner">
<img data-src="holder.js/100%x280/vine">
</div>
<div class="slideshow-inner">
<img data-src="holder.js/100%x280/lava">
</div>
<div class="progress-bar"></div>
</div>
</div>