Beautiful Horizontal Image Carousel Plugin with jQuery and CSS3 - Hover Carousel

Hover Carousel is a cool jQuery carousel plugin which allows you to horizontally scroll through a gallery of images by mouse moving. The carousel will move the images left of right, with a bottom scrollbar, according to the direction of your mouse movement.

How to use it:

1. Include the jQuery javascript library and the jQuery hover carousel plugin at the bottom of the page.

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

2. Markup Html structure. 

<div class="carousel right">
<div class="indicator"></div>
<div class="wrap">
<ul>
<li><img src="1.jpg"/></li>
<li><img src="2.jpg"/></li>
<li><img src="3.jpg"/></li>
...
</ul>
</div>
</div>

3. The CSS/CSS3 rules to style the carousel and give it some subtle effects.

.carousel {
display: block;
position: relative;
-webkit-transform: translateZ(0);
width: 55%;
min-width: 550px;
margin: 50px auto;
font-size: 0;
background: #eeeeee;
padding: 8px;
border-radius: 6px;
-webkit-box-shadow: 0 4px 10px #000;
box-shadow: 0 4px 10px #000;
height: 200px;
-webkit-overflow-scrolling: touch;/* for tablets */
}
.touch .carousel {
overflow: auto;
}
.carousel:before, .carousel:after {
content: '';
opacity: 0;
position: absolute;
top: 0;
bottom: 0;
z-index: 2;
width: 50px;
text-align: center;
font-size: 80px;
line-height: 190px;
font-family: arial;
color: #555;
font-weight: bold;
pointer-events: none;
-webkit-transition: 0.2s ease-out;
transition: 0.2s ease-out;
}
.carousel:before {
content: '\2039';
left: 0;
text-indent: -80px;
-webkit-box-shadow: 50px 0 20px -20px #eeeeee inset;
box-shadow: 50px 0 20px -20px #eeeeee inset;
}
.carousel:after {
content: '\203A';
right: 0;
text-indent: 50px;
-webkit-box-shadow: -50px 0 20px -20px #eeeeee inset;
box-shadow: -50px 0 20px -20px #eeeeee inset;
}
.carousel.right:after, .carousel.left:before {
opacity: 1;
}
.carousel.right:after {
right: 8px;
text-indent: 70px;
}
.carousel.left:before {
left: 8px;
text-indent: -120px;
}
.carousel > a {
position: absolute;
margin: 0;
top: 0;
bottom: 0;
color: #CCC;
font-size: 1.5em;
-webkit-transition: 0.1s;
transition: 0.1s;
}
.carousel > a:hover {
color: #FFF;
}
.carousel > a.prev {
left: -20px;
}
.carousel > a.next {
right: -20px;
}
.carousel > .indicator {
pointer-events: none;
position: absolute;
z-index: 4;
bottom: 0;
left: 0;
background: #d82b6a;
height: 4px;
border-radius: 10px;
opacity: 0;
-webkit-transition: opacity 0.2s, bottom 0.2s;
transition: opacity 0.2s, bottom 0.2s;
}
.carousel:hover > .indicator {
opacity: 1;
bottom: -10px;
}
.carousel > .wrap {
overflow: hidden;
border-radius: 5px;
}
.carousel > .wrap > ul {
list-style: none;
white-space: nowrap;
height: 200px;
}
.carousel > .wrap > ul > li {
display: inline-block;
vertical-align: middle;
height: 100%;
margin: 0 0 0 5px;
position: relative;
overflow: hidden;
-webkit-transition: 0.25s ease-out;
transition: 0.25s ease-out;
}
.carousel > .wrap > ul > li:first-child {
margin: 0;
}
.carousel > .wrap > ul > li > img {
display: block;
height: 100%;
margin: auto;
vertical-align: bottom;
position: relative;
z-index: 1;
-webkit-transition: 1s ease;
transition: 1s ease;
}

4. That's it. The plugin will automatically initialize the carousel by binding the function to all elements which have the class that is assigned to "carousel".

---

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