A simple CSS3 based navigation styles for Sliders/Slideshows/Galleries [Download Source]

Sliders, slideshows and galleries are extremely common in modern day websites – that ranges from websites showcasing portfolios, product displays in e-commerce etc…There are plenty of free scripts out there with unique features and styles that helps you embed a slideshow in matter of minutes.  But this one feature can make your slideshow stand out – an unique navigation style (spiced up with creative CSS3 based transition effects) and well, that’s what we are going to learn in this demo.

In this demo , I have created a few navigation styles with CSS3 transition effects, which can be used for sliders, slideshows or in photo galleries.

Before we get into the tutorial, quickly jump to demo page (you’ll find a link after the fold) and have a look at the transition effects of slider navigation (hover the numbers at the bottom of the page to see the effects). For simplicity, I have set the slider images as page backgrounds (instead, you can also limit it to a div) and that gets changed when the numbers are clicked (the goal is to demonstrate transition effects for slider navigation, and not the slider itself – hopefully, in my next article I will demo transition effects for sliders).

Step1 : Add the below css code in your head section.

<style>
body {
  background:url("images/1.jpg") no-repeat center center fixed;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
  background-size: cover;
}
.intro_content {
  position: absolute;
  top: 0;
  padding: 4.8em;
  width: 85%;
  font-size: 1.15em;
}
.intro_title {
  color:#dbdbdb;
  margin: 0 0 20px;
  font-weight: 900;
  font-size: 4em;
  font-family: sans-serif;
  line-height: 1;
}
.intro_subtitle {
  color:#dbdbdb;
  margin: 0 auto 0 6em;
  font-family:"Josefin Sans", "Helvetica Neue", Helvetica, sans-serif;
  font-weight: normal;
  font-size: 1.15em;
  line-height: 1.8em;
}
.intro_subtitle a {text-decoration: none;
  color: #ee2a1b;
  margin: 5px;
}
.nav_thumb {
  bottom: 0px;
  position: fixed;
  width: 100%;
}
.nav_thumb div{
  display: -webkit-flex;
  display: flex;
  width:40%;
  margin:0 auto;
  z-index: 1000;
}
.nav_item {
  position: relative;
  display: block;
  margin-right: 20px;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  width:60px;
  height:60px;
  cursor:pointer;
}
.nav_item img {
  display: block;
  border-radius: 50%;
  opacity: 0.2;
  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  transition: opacity 0.3s, transform 0.3s;
}
.nav_item_current img, .nav_item:hover img {
  opacity: 0.95;
  -webkit-transform: scale3d(0.75, 0.75, 2);
  transform: scale3d(0.75, 0.75, 2);
}
.nav_item span {
  top:0px;
  left:0px;
  position: absolute;
  width: 100%;
  text-align: center;
  font-size: 1.5em;
  line-height: 65px;
}
</style>

Step 2: Include Jquery and the below Javascript code in your head section

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

<script>
function changeclass(my_id){
        $('.nav_item_current').removeClass('nav_item_current');
        $("#" + my_id).attr("class", "nav_item nav_item_current");
        $('body').css('background', 'url(images/' + my_id + '.jpg) no-repeat center center fixed');
        $('body').css('background-size', 'cover');
        switch (my_id) {
        case 1:
                $('#intro_title').text("Crepuscular Rays");
                break;
        case 2:
                $('#intro_title').text("Digital Photography");
                break;
        case 3:
                $('#intro_title').text("Colorful Window");
                break;
        case 4:
                $('#intro_title').text("Beautiful Sunrise");
                break;
        case 5:
                $('#intro_title').text("Sparkling Cracker");
                break;
        case 6:
                $('#intro_title').text("Beach Sunset");
                break;
        }
    }
</script>

Step 3: Add the below HTML code in your body section. Change the images path accordingly.

<div class="intro_content">
<h1 class="intro_title" id="intro_title">Crepuscular Rays</h1>
<div class="intro_subtitle">A simple-slideshow navigation with cool css3 transitions
</div>
</div>
<nav class="nav_thumb">
<div>
<a id="1" onclick="changeclass(1);" class="nav_item nav_item_current"><img src="images/thumbnail/thumbnail1.jpg" /><span>1</span></a>
<a id="2" onclick="changeclass(2);" class="nav_item"><img src="images/thumbnail/thumbnail2.jpg" /><span>2</span></a>
<a id="3" onclick="changeclass(3);" class="nav_item"><img src="images/thumbnail/thumbnail3.jpg" /><span>3</span></a>
<a id="4" onclick="changeclass(4);" class="nav_item"><img src="images/thumbnail/thumbnail4.jpg" /><span>4</span></a>
<a id="5" onclick="changeclass(5);" class="nav_item"><img src="images/thumbnail/thumbnail5.jpg" /><span>5</span></a>
<a id="6" onclick="changeclass(6);" class="nav_item"><img src="images/thumbnail/thumbnail6.jpg" /><span>6</span></a>
</div>
</nav>

Thanks to @CSS-Tricks for teaching how to make a Perfect Full Page Background Image.