As a beginner in j-query, I am struggling with creating a slider image carousel using a full background image. Most of the solutions I found online require a fixed width for all pictures to slide smoothly. However, I believe there might be a way to use an array or index function in a loop to toggle visibility. Transitioning from basic JavaScript to jQuery has been challenging for me. Any tips or advice would be greatly appreciated. Below is the code snippet I'm currently working on. Thank you!
http://codepen.io/kevk87/pen/PPNPmg
<main>
<div class="container">
<ul>
<li class="one">
</li>
<li class="two"> </li>
<li class="three"></li>
<li class="four"></li>
</ul>
<div class="nav">
<ul >
<li class="first active"> </li>
<li class="second"> </li>
<li class="third"> </li>
<li class="fourth"> </li>
</ul>
</div>
</div>
</ul>
</main>
CSS
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
ul {
list-style:none;
height:100%;
}
main, html, body{
height:100%;
}
.container {
height:100%;
postion:relative;
}
.one {
height:100%; background:url(http://hamderser.dk/blog/images/clairvoyant/clairvoyant-nature-nature2.jpg) center center no-repeat fixed;
background-size:cover;
}
.two {
background: url(http://www.atilaminates.com/wp-content/uploads/2015/05/nature-wlk.jpeg) center center no-repeat fixed;
height:100%;
}
.three {
background: url(http://php.drishinfo.com/photostudioone/wp-content/uploads/2014/11/nature-wallpaper-hd-1920x1080.jpg) center center no-repeat fixed;
height:100%;
}
.four {
background: url(http://www.projecthappyhearts.com/wp-content/uploads/2015/04/green-nature-dual-monitor-other.jpg) center center no-repeat fixed;
height:100%;
}
.nav ul li {
width:20px;
background-color:white;
height:20px;
display:inline-block;
margin-right:20px;
}
.nav ul li:last-child {
margin-right:0px;
}
.nav {
position: absolute;
bottom:100px;
left:50%;
transform:translate(-50%,-50%);
}
.nav ul .active{
background-color:black;
}
.two, .three, .four {
display:none;
}
Javascript
//change active class
$('.nav ul').click(function(){
$(this).removeClass('active');
$(this).addClass('active');
});
//Click handlers to change image and active class
$('.first').click(function(){
$('.one').show();
$('.two').hide();
$('.three').hide();
$('.four').hide();
});
$('.second').click(function(){
$('.two').show();
$('.one').hide();
$('.three').hide();
$('.four').hide();
});
$('.third').click(function(){
$('.three').show();
$('.one').hide();
$('.two').hide();
$('.four').hide();
});
$('.fourth').click(function(){
$('.four').show();
$('.one').hide();
$('.three').hide();
$('.two').hide();
});