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

Beautiful Horizontal Image Carousel Plugin with jQuery and CSS3 - Hover Carousel
File Size: 3.78 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.