Small Easy jQuery Content Carousel Slider Plugin - heroCarousel

heroCarousel is a simple, lightweight jQuery plugin which enables you to present Html elements in a fully configurable carousel slider.

Features:

• Autoplay & pause on hover.
• Arrows navigation and dot pagination.
• x items on one slide.
• Item counter.
• Infinite loop.

How to use it:

1. Load jQuery library and the jQuery heroCarousel plugin in the html page.

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

2. The html structure to create a basic image carousel with hero text.

<div class="heroCarousel">
  <div class="heroCarouselWindow">
    <ul>
    
      <li>
        <div class="heroCarouselImage"><a href="#"><img src="1.jpg"></a></div>
        <div class="heroCarouselContent">
          <div class="heroCarouselContentInner">
            <div class="heroCarouselHeader">Header 1</div>
            <div class="heroCarouselText">Tetx 1</div>
            <div class="heroCarouselButton"><a href="">Button 1</a></div>
          </div>
        </div>
      </li>
      
      <li>
        <div class="heroCarouselImage"><a href="#"><img src="2.jpg"></a></div>
        <div class="heroCarouselContent">
          <div class="heroCarouselContentInner">
            <div class="heroCarouselHeader">Header 2</div>
            <div class="heroCarouselText">Tetx 2</div>
            <div class="heroCarouselButton"><a href="">Button 2</a></div>
          </div>
        </div>
      </li>
      
      <li>
        <div class="heroCarouselImage"><a href="#"><img src="3.jpg"></a></div>
        <div class="heroCarouselContent">
          <div class="heroCarouselContentInner">
            <div class="heroCarouselHeader">Header 3</div>
            <div class="heroCarouselText">Tetx 3</div>
            <div class="heroCarouselButton"><a href="">Button 3</a></div>
          </div>
        </div>
      </li>
      
      ...
      
    </ul>
  </div>
</div>

3. The primary CSS styles for the carousel plugin. Add the following CSS snippets into your CSS file.

.heroCarousel {
  position: relative;
  margin: 0 0 25px;
}

.heroCarousel .heroCarouselWindow {
  border: 1px solid #bbbbbb !important;
  overflow: hidden;
 *position: relative;
}

.heroCarousel .heroCarouselWindow ul {
  position: relative;
  left: 0;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
  width: 10000px;
  list-style-type: none;
  white-space: nowrap;
  -webkit-transition-property: left;
  -moz-transition-property: left;
  -o-transition-property: left;
  transition-property: left;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;
}

.heroCarousel .heroCarouselWindow ul li {
  position: relative;
  float: left;
  white-space: normal;
}

.heroCarousel .heroCarouselImage a { display: block; }

.heroCarousel .heroCarouselImage img {
  width: 938px;
  height: 298px;
}

.heroCarousel .heroCarouselContent {
  display: table;
  position: absolute;
  background-color: black;
  color: white;
  margin: 20px 0;
  top: 0;
  right: 0;
  width: 500px;
  height: 258px;
}

.heroCarousel .heroCarouselContent.flip { left: 0; }

.heroCarousel .heroCarouselContent .heroCarouselContentInner {
  padding: 25px;
  display: table-cell;
  vertical-align: middle;
}

.heroCarousel .heroCarouselContent .heroCarouselContentInner .heroCarouselHeader {
  margin: 0 0 15px;
  font-size: 22px;
  line-height: 1.4;
}

.heroCarousel .heroCarouselContent .heroCarouselContentInner .heroCarouselText {
  font-size: 15px;
  margin: 0 0 15px;
}

.heroCarousel .heroCarouselContent .heroCarouselContentInner .heroCarouselButton a {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  display: inline-block;
  background-color: #1c3e60;
  color: white !important;
  line-height: 25px;
  font-size: 12px;
  padding: 1px 15px 0;
}

.heroCarousel .heroCarouselControls {
  clear: both;
  text-align: center;
}

.heroCarousel .heroCarouselPrevious,
.heroCarousel .heroCarouselNext {
  display: inline-block;
  overflow: hidden;
  width: 32px;
  height: 33px;
  background-color: transparent;
  background-position: 0 0;
  background-repeat: no-repeat;
  text-indent: 100%;
  white-space: nowrap;
 *text-indent: 0;
 *font-size: 0;
}

.heroCarousel .heroCarouselPrevious { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAhCAYAAAC4JqlRAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA7dpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wUmlnaHRzPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvcmlnaHRzLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcFJpZ2h0czpNYXJrZWQ9IkZhbHNlIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6NTJDOTA0RUMyQjIwNjgxMTgwODNENjQ3Nzg2MzMyMUQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MzMwQzk5QUZDMDI4MTFFMjkxNTdFQkI5NTlGMTFGMkQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MzMwQzk5QUVDMDI4MTFFMjkxNTdFQkI5NTlGMTFGMkQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAyODAxMTc0MDcyMDY4MTE4MDgzQ0I3NkY3MURCRTJFIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjUyQzkwNEVDMkIyMDY4MTE4MDgzRDY0Nzc4NjMzMjFEIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+n9zaCQAAAypJREFUeNpi/P//PwMJwAaKbYFYAoh1oeKXgfgFEB8G4iNQTBwAOYAAFgXiRiC+8Z94cAOqR5SQ+YQszwfi5//JB8+hZpDlgFX/qQdW4bKHEUsaEATiFUDshi7x7uMXhj3HLzLsO3mZ4fX7Twy3HjwFi6spSDOICvIxOJnrMrhY6jMI8fNgi+1dQBwBxO+RBbE5YCe65Z+/fmeYtnw7w5ItBxl+//mLN02xsjAzxPjYM2RFejLwcnNic4Q7PgfMA+JEZIFLtx4yZDXPZHgD9DEpQAQYItNq0xn01OTRpRYBcTyMw4QkkYxuOSio4yomkGw5CID0gPSCzEADcUCchs0BOciqbj14xlDUOY/hx6/fDOQCkF6QGSCz0EAmugNKgdgAWWNO62yKLEc2CxSF3378RBY2gNoJd0A4suzSzQcZHj1/zUAt8OTlW4blWw+jC4fDHAAqTo2RXTxrzS6iDQ90sWBY3JHPUJUWglcdyEy0EAXZqcUCLdvhYM+xiwwfP38jyvKOwliGAGdzotSCzASZ7eNgglK3MEErFjg4cOYKyZaDyom2WWsJ6jl87hq6kC0TcuIDgRv3npBseVzlRIbrROi7eucRupAxyAFSyCIv336kieUg8OzVe3QhOZAD+NGLXXwAOc7bZq8l2nIQQMuKIMANcgCKl7GU3yhgw96TcHZVajCDppIM0Q7g4mBHF/oKcgBKMSUuzI/XkIr+xXBHgBy7qD2faEdIiQmiCz0COeACsogGEYaR6wgsZl9ggrbj4MDBRIco36A7oiotmKAeLGYfZkFvQDpZ6DLw83IRVRiBHHHy8m2GIBdzYGJ8ilctyEyQ2WjgCKw9cB65PJi7dg9D9/wNDNQEpYkBDMnBLijBD8SGsMpoGbJMpLctg4y4MNUsB5kFMhMNLEOuDbuREyMou0yuTmXgYGOl2HKQGSCz0LLgBaidKA2S6cgqQKm6uzSBIkeA9ILMwJJDpuNqEy6ENpno1iYcdK1isONBjSJi+gWw2k1bRY7YfkE0qL1KbN+QLj0jJjyhGQbEBdBeL7ngBdSMsEHbO2akcHzACCp+jtzxAYAAAwCDr3iESyynAAAAAABJRU5ErkJggg==); }

.heroCarousel .heroCarouselPrevious.disabled {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAhCAYAAAC4JqlRAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA7dpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wUmlnaHRzPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvcmlnaHRzLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcFJpZ2h0czpNYXJrZWQ9IkZhbHNlIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6NTJDOTA0RUMyQjIwNjgxMTgwODNENjQ3Nzg2MzMyMUQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDYyQzBENkVDMDI4MTFFMjlEMzU5MzE4RUEzM0FBNDMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDYyQzBENkRDMDI4MTFFMjlEMzU5MzE4RUEzM0FBNDMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAyODAxMTc0MDcyMDY4MTE4MDgzQ0I3NkY3MURCRTJFIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjUyQzkwNEVDMkIyMDY4MTE4MDgzRDY0Nzc4NjMzMjFEIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+MWd2NwAAAuJJREFUeNrMWF2LElEYPo7fpEagoCIJgl6kieVte1v/YDcIigiCIKibfkDX/YC9CwpaYv9B3e5eao2KsCiIpuTiB5Ka3x+ddzgzHA/jzPGjZR94QN6Z87zPnHnnnPdoWC6XaAM8IDzA9GLeJfEc5iXmGeY5IR/AgA49mO8xL5b8uCBjPHr6esnfYNaX26NONLYycLrcH07X5TGo1MAtzK+YD9kLk8kENZtNifC73+9LcYfDgSwWC/J4PBLhtwq+Yz7G7NBBNQPf2OSz2QyVSiVUq9XQYrHQrClBEFAgEEChUAiZTCY1E4+0DHzEfE4Hut0uEkVReuJNALOQSCSQy+ViL33GfKYYpi68YJPDVKdSqY2Ty68LxoIGg6eYL9UMvKbvgveby+V0p1wLMBY05Fqh8Io18A4zQQ/MZrM7Jae1MpkMms/ndDhBcioGjuir1WoVDQYDtC8Mh0OpgBkcyQZgOU3SjsvlMre43+9HyWQSRSIRzftAk5lRyHnHRNZ2BY1GA02nU67k0WgU+Xw+rntBE7S9Xu/K3iKQjUVBq9XaODmsE4VCQXdMu91mQwcCXXyAXq+3cfJ0Os01DtYUBkkw4Kcj4/H4vyQHjEYjNnQbDNxkl10t0O8cpp03OYD5FAE3wMAfOqKyfq+gXq8rv6HynU4ntwGj0ciG/oKB33TEarVqiuTzecUEmIVPkNeEzWZjQ7/AgEhHeMS2NaFyjyiQPk6B2+3mehrWhN5CtEb7zMQ2kNBQmM1mrsUITHQ6Hakw9YoRNEGbwbncD/yk14NKpYKKxSLaJ8LhMAoGgyvTj3lP3oxO6CvQ0djt9r0lBy3QZHBC74Yf6GKEzyUej0vt1a4ADdBiPkGR5FxpSI7Zio3FYjuZgLGgoVL9x+t6wk+kZbqynvDadcXS54r5hedcIO9u8JSc54InsOPzng2v5GSkVWGHmG/JqXdbXBKNw2t7Ojbs+P/AfRL/se3/A/8EGADgw3npnByXDQAAAABJRU5ErkJggg==);
  cursor: default;
}

.heroCarousel .heroCarouselPrevious:focus { background-color: transparent !important; }

.heroCarousel .heroCarouselNext { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAhCAYAAAC4JqlRAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA7dpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wUmlnaHRzPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvcmlnaHRzLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcFJpZ2h0czpNYXJrZWQ9IkZhbHNlIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6NTJDOTA0RUMyQjIwNjgxMTgwODNENjQ3Nzg2MzMyMUQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzAyQzc3Q0VDMDI4MTFFMkEwNjVCQjc2QzA2MUFFRDMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzAyQzc3Q0RDMDI4MTFFMkEwNjVCQjc2QzA2MUFFRDMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAyODAxMTc0MDcyMDY4MTE4MDgzQ0I3NkY3MURCRTJFIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjUyQzkwNEVDMkIyMDY4MTE4MDgzRDY0Nzc4NjMzMjFEIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8++iGkfQAAAytJREFUeNpi/P//PwMJwAaKbYFYAoh1oeKXgfgFEB8G4iNQTBwAOYAAFgXiRiC+8Z94cAOqR5SQ+YQszwfi5//JB8+hZpDlgFX/qQdW4bKHEUsaEATiFUDshi7x7uMXhj3HLzLsO3mZ4fX7Twy3HjwFi6spSDOICvIxOJnrMrhY6jMI8fNgi+1dQBwBxO+RBbE5YCe65Z+/fmeYtnw7w5ItBxl+//mLN02xsjAzxPjYM2RFejLwcnNic4Q7PgfMA+JEZIFLtx4yZDXPZHgD9DEpQAQYItNq0xn01OTRpRYBcTw2ByQD8RxklaCgLuqcx/Dj128GcgAHGytDX3kSOGrQQDoQz0J3wHkgNoBxbj14xhBW1E225ciOWNVXCkwnUsjCF4DYEMRgggqUIlsOsjSndTbFlsPMAkXhtx8/kYUNoHbCHRCOLLt080GGR89fM1ALPHn5lmH51sPowuEwB4AiyBjZxbPW7MJrYFVaCMPijnyGQBcLoh0BMhMtREF2ajFBy3Y42HPsIsPHz9/wGqapJM1gqqPK0F4Qw9BRGEuUA0BmgsxGr1uYoBULHBw4c4WgYW2z1oLLBhAIcDYn2hGHz11DF7JlQk58IHDj3hOCBl0HqomrnEiyI67eeYQuZAxyAEr+ePn2I1G+IccRz169RxeSAzmAH73YJRaAHNE2ey2cD3IEPoCWFUGAG+QAFC9jKb/xJEYZhqrUYDh/w96TeNVzcbCjC30FOeAZsoi4MD/Rli9qz4c7GGR5Rf9ivHqkxATRhR4xQYtFONAAGkwLy3GYfYEJ2o6DAwcTHYIGVaUFk2w5DrMPs6A3IJ0sdBn4ebnwFkbX70EaIuv2nGRYv+cEUZaDzASZjQaOwGpDlJpw7to9DN3zNzBQE5QmBjAkB7tg1IiwymgZskykty2DjLgw1SwHmQUyEw0sQ64Nu5ETIyi7TK5OBdfllAKQGSCz0LLgBaidcAeAwHT0lN5dmkCRI0B6QWZoYqb+6bjahAuBOG6g2oSDolUMdjyoUURMvwBWu2mryBHbL4gG4jfE9g3p0jMa1H1DuvSOGSkcHzCCip8jd3wAIMAADEfjxHXJXyAAAAAASUVORK5CYII=); }

.heroCarousel .heroCarouselNext.disabled {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAhCAYAAAC4JqlRAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA7dpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wUmlnaHRzPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvcmlnaHRzLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcFJpZ2h0czpNYXJrZWQ9IkZhbHNlIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6NTJDOTA0RUMyQjIwNjgxMTgwODNENjQ3Nzg2MzMyMUQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NUEwOUNBRTVDMDI4MTFFMjhGMTJDRDlGMjg4OTI5NUMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NUEwOUNBRTRDMDI4MTFFMjhGMTJDRDlGMjg4OTI5NUMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAyODAxMTc0MDcyMDY4MTE4MDgzQ0I3NkY3MURCRTJFIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjUyQzkwNEVDMkIyMDY4MTE4MDgzRDY0Nzc4NjMzMjFEIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Wl9MhQAAAwNJREFUeNrMWF1LG0EUHddolEZLIJEapAQffEishCaP9bX9BdVCoaUUCoVC+9If0Gd/gOBDHwqV4j+wr/qYlNUgiIKEKon4Qamm+VKznbPMLtPbdXY2SYsHDoQ7O+ee3b07cyd9lmWxAHggOMt5h/OeiBc5DznXONcF9QADPoxzfuDctvSxLebE/fT9kr/lrFidoyI0OjKwYvUOK9flCXm8lSjnF86HdKDVarHj42Ob+F2tVu14JBJhg4ODLB6P28Rvgsecq5xPOH/IA30eRbhKk19eXrK9vT12cHDA2u22sqYMw2ATExNscnKShUJ/3d9XzkcqAx85X8iBs7MzZpqmfcdBgKeQyWTY6OgoHfrE+dw1LA28pMnxqPP5fODkzuvCXGgQPON85WXgjXwV3m+xWPR95CpgLjScWpHwmhp4z5mRJ25ubnaVXNba2NhgV1dXcjgjcroG5uXR/f19VqvVWK9Qr9ftAiaYdwxgOc3KjkulklJwamqKZbNZlkgktE1AkzxR5EwZYm13cXR0xC4uLpRiIyMjLBqNslQqxdLptJYBaEKb7i2G2FhcnJyc+Irt7OzYawMwPj6ubeL09JSGZg25+IDz83NfIVxTKBQCm8CaQpCFgT9eZLPZ1LqbTkw0Gg0augsDt+myqwuYwOtwABMqkE8RuAUDP+WIx/qtLEZ8EQ4qlYry+v7+fhr6BQNlORIOh7WT41N0DCP51taWcs7Q0BANfYcBkwr/i+TXaJuG6ONcxGIxXyE89qDJr9FeC9EGEg3FwMCAcjFyPlUkL5fLWsmhCW2C9ZDoaE1nPUChJJNJtru7q1yIggKapAiRs+hsRsvyCDqa4eHhnm1G0IImwbK8Gy7IxQinMzMzdnvVLaABLY+7X6ANySKt2Onp6a5MYC40PKp/0asjWhL9mouxsTGWy+W8ulytnhBzoeHREy7d2K7Y/lw5P+ucC5zdDZ2vz7nASf4UO77u2fC/nIxUFTbH+U6cejvFodCYu7Gn474u/x+4L+LfOv1/4LcAAwBAQGwf544RzQAAAABJRU5ErkJggg==);
  cursor: default;
}

.heroCarousel .heroCarouselNext:focus { background-color: transparent !important; }

.heroCarousel.heroCarouselNavigationOutside .heroCarouselPrevious,
.heroCarousel.heroCarouselNavigationOutside .heroCarouselNext {
  position: absolute;
  top: 0;
  height: 298px;
  background-position: 50% 50%;
}

.heroCarousel.heroCarouselNavigationOutside .heroCarouselPrevious { left: -16px; }

.heroCarousel.heroCarouselNavigationOutside .heroCarouselNext { right: -16px; }

.heroCarousel.heroCarouselNavigationInline .heroCarouselNext { margin: 0 0 0 20px; }

.heroCarousel.heroCarouselNavigationInline .heroCarouselPrevious { margin: 0 20px 0 0; }

.heroCarousel .heroCarouselPagination {
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fefefe), color-stop(100%, #ededed));
  background-image: -webkit-linear-gradient(#fefefe, #ededed);
  background-image: -moz-linear-gradient(#fefefe, #ededed);
  background-image: -o-linear-gradient(#fefefe, #ededed);
  background-image: linear-gradient(#fefefe, #ededed);
  display: block;
  width: 100%;
  height: 30px;
  line-height: 30px;
  text-align: center;
 *position: relative;
 *zoom: 1;
}

.heroCarousel .heroCarouselPaginationButton {
  display: inline-block;
  overflow: hidden;
  margin: 0 6px;
  width: 11px;
  height: 11px;
  background-color: transparent;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA7dpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wUmlnaHRzPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvcmlnaHRzLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcFJpZ2h0czpNYXJrZWQ9IkZhbHNlIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6NTJDOTA0RUMyQjIwNjgxMTgwODNENjQ3Nzg2MzMyMUQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RkQ5RUMxNDlDMDI3MTFFMjgyM0VBRkY0MjIxODg5NDMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RkQ5RUMxNDhDMDI3MTFFMjgyM0VBRkY0MjIxODg5NDMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAyODAxMTc0MDcyMDY4MTE4MDgzQ0I3NkY3MURCRTJFIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjUyQzkwNEVDMkIyMDY4MTE4MDgzRDY0Nzc4NjMzMjFEIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8++QTVQAAAAI5JREFUeNqMkbEJgDAURL+pBStbR3ALKyvdJeACVm7gCoKFlZBhBCvB1gG8g+vEkIMHyb9Hip8shGBKBQbQ6nyCHYw6Wya5ASvI7ZsH9CA4vbL8iKY5+4qyB4XFw95T7iwtHeUyUS4p34nyTXlLlDfKk9YTC/uJ8qE9PhGR/eE04M/UYAaXZpfutXp7BRgAIWseTXW04zIAAAAASUVORK5CYII=);
  background-position: 0 0;
  background-repeat: no-repeat;
  text-indent: 100%;
  white-space: nowrap;
 *text-indent: 0;
 *font-size: 0;
}

.heroCarousel .heroCarouselPaginationButton.active {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA7dpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wUmlnaHRzPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvcmlnaHRzLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcFJpZ2h0czpNYXJrZWQ9IkZhbHNlIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6NTJDOTA0RUMyQjIwNjgxMTgwODNENjQ3Nzg2MzMyMUQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RjI3REM2QjFDMDI3MTFFMkJBNEY4OEJENjcyN0Q4OTQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RjI3REM2QjBDMDI3MTFFMkJBNEY4OEJENjcyN0Q4OTQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAyODAxMTc0MDcyMDY4MTE4MDgzQ0I3NkY3MURCRTJFIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjUyQzkwNEVDMkIyMDY4MTE4MDgzRDY0Nzc4NjMzMjFEIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+0YlTIAAAAJFJREFUeNpiVPfOZoACOSCuAGJvKPsREO8A4lYom4EJqtAViK8CcSZUIUxzGlTcFaYYJLgaiHkYsAMeqLwcSHEpEPMz4Acg+VKQ4kAG4kAgSLEokYpFQYpfE6n4NUjxJiIVbwIp7gbiLwQUguS7QYrvA3EQHg1foPL3YZGyG4j1gHgWEL+Air2A8vWg8gwAAQYAOU0bCJzc3moAAAAASUVORK5CYII=);
  cursor: default;
}

.heroCarousel .heroCarouselPaginationButton:focus { background-color: transparent; }

.heroCarousel .heroCarouselNavigationCounter {
  color: #000;
  font-size: 12px;
  background-color: #fff;
  border: 1px solid #000;
  padding: 2px 0;
  position: absolute;
  top: -10px;
  left: 110px;
  text-align: center;
  width: 60px;
}

4. Call the function to active the content carousel.

$('.heroCarousel').heroCarousel({
  // OPTIONS
});

5. Customization options with default values.

// autoplay
autoplay: false,

// autoplay delay
autoplaySpeed: 5000,

// pause on hover
autoplayPauseOnHover: true,

// how many items shown per one slide
itemsToShow: 3,

// enable image links
heroImageLink: true,

// show hero text
showHeroText: true,

// show item counter
counter: false,

// enable pagination
pagination: true,

// enable pagination
navigation: true,

// the poistion of the arrows navigation
navigationPosition: 'Outside'

---

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