Stylish jQuery Image Gallery with Slider Control - Slider Gallery

Slider Gallery is an easy jQuery image gallery plugin that allows you to scroll through a set of images with a slider bar control at the bottom of the gallery.

How to use it:

1. Load the jQuery slider gallery plugin after jQuery javascript library.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/gallery.js"></script>

2. The markup structure to create an image gallery.

<div id="gallery">

<div id="galleryArea">
<ul id="galleryCon">
<li><a href="#"><img src="images/img1.jpg" alt=""></a></li>
<li><a href="#"><img src="images/img2.jpg" alt=""></a></li>
<li><a href="#"><img src="images/img3.jpg" alt=""></a></li>

...

</ul>
</div>

<div id="scrollbar"> 
<a id="scrollBtn" href="javascript:;"></a>
<div id="scrollBg"></div>
</div>

<a id="prevBtn" href="javascript:;"></a> 
<a id="nextBtn" href="javascript:;"></a> 

</div>

3. The CSS to style the gallery and controls.

#gallery {
position: absolute;
top: 50%;
left: 50%;
width: 1320px;
margin: -125px 0 0 -672px;
}
#galleryArea {
width: 100%;
overflow: hidden;
}
#galleryCon {
height: 154px;
padding: 13px 0;
margin-bottom: 50px;
background-color: #1D1D1F;
background: -webkit-linear-gradient(top, #27252A 0%, #232027 50%, #1D1D1F 50%, #1B1B1D 100%);
box-shadow: 0 1px 3px rgba(0,0,0,0.5), inset 0 1px 0 #37343B;
overflow: hidden;
}
#galleryCon li {
float: left;
display: inline;
margin: 0 10px;
border: 2px solid #37343B;
}
#galleryCon li img {
display: block;
width: 240px;
height: 150px;
}
#scrollbar {
position: relative;
width: 500px;
height: 7px;
margin: 0 auto 13px auto;
background: #1A1819;
box-shadow: inset 0 0 5px #0F0D12;
border-radius: 6px;
}
#scrollBtn {
display: block;
position: absolute;
top: -10px;
left: 0;
margin-left: 0;
width: 23px;
height: 23px;
cursor: pointer;
border: 2px solid #151318;
background-color: #1B1B1D;
background: -webkit-linear-gradient(top, #27252A 0%, #232027 50%, #1D1D1F 50%, #1B1B1D 100%);
}
#scrollBg {
position: absolute;
top: 0;
left: 0;
height: 7px;
background-color: #6B32B5;
background: -webkit-linear-gradient(top, #7532BD, #432364);
border-radius: 6px 0 0 6px;
overflow: hidden;
}
#scrollBtn:before {
content: '';
position: absolute;
top: 7px;
left: 7px;
width: 9px;
height: 9px;
background-color: #514559;
}
#scrollBtn:hover {
box-shadow: 0 0 10px #7337BB;
}
#scrollBtn:hover:before { /* IE10不支持该方法 */
background-color: #CE9CE1;
box-shadow: 0 0 5px #7337BB;
}
/* 扩展 */
#prevBtn, #nextBtn {
display: block;
position: absolute;
top: 68px;
width: 40px;
height: 40px;
border: 2px solid #151318;
box-shadow: inset 0 1px 0 #37343B;
background-color: #1B1B1D;
background: -webkit-linear-gradient(top, #27252A 0%, #232027 50%, #1D1D1F 50%, #1B1B1D 100%);
}
#prevBtn {
left: -50px;
}
#nextBtn {
right: -50px;
}
#prevBtn:before, #nextBtn:before {
content: '';
position: absolute;
top: 10px;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
#prevBtn:before {
left: 14px;
border-right: 10px solid #514559;
}
#nextBtn:before {
right: 14px;
border-left: 10px solid #514559;
}
#prevBtn:hover:before {
border-right: 10px solid #CE9CE1;
-webkit-filter: drop-shadow(0 1px 8px #7337BB);
}
#nextBtn:hover:before {
border-left: 10px solid #CE9CE1;
-webkit-filter: drop-shadow(0 1px 8px #7337BB);
}

4. Modify the CSS however you like to create your own style.

---

This awesome jQuery plugin is developed by zhonglimh. For more Advanced Usages, please check the demo page or visit the official website.