Simple HTML5 Image Carousel Plugin With jQuery - yeliex.Carousel

yeliex.Carousel is a lightweight jQuery carousel plugin for creating a responsive, fullscreen (or fixed size) slider carousel with a subtle crossfade effect based on CSS3 transitions.

How to use it:

1. Add images with custom html content to the carousel as follow:

• data-content: true or false. whether to display html content
• data-img: image path
• data-content: slide content
• data-link: slide link
• data-btn: text for button

<div class="carousel" data-content="true">
  <div class="list active" 
       data-img="1.jpg" 
       data-content="Heading 1 / Description 1" 
       data-link='1.html'
       data-btn="Button 1">
  </div>
  <div class="list active" 
       data-img="2.jpg" 
       data-content="Heading 2 / Description 2" 
       data-link='2.html'
       data-btn="Button 2">
  </div>
  <div class="list active" 
       data-img="3.jpg" 
       data-content="Heading 3 / Description 3" 
       data-link='3.html'
       data-btn="Button 3">
  </div>
  ...
</div>

2. The basic CSS styles for the carousel.

.carousel {
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-transition: background 1s ease;
  -moz-transition: background 1s ease;
  -ms-transition: background 1s ease;
  -o-transition: background 1s ease;
  transition: background 1s ease;
  background-size: cover;
}

.carousel .list { display: none; }

.carousel .content {
  background: rgba(0, 0, 0, .2);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  color: #FFFFFF;
  position: absolute;
  cursor: pointer;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

.carousel .content .a {
  margin-top: 236px;
  margin-bottom: 10px;
  font-size: 60px;
  line-height: 76px;
}

.carousel .content .b { font-size: 24px; }

.carousel .content .button {
  margin-top: 4rem;
  font-weight: normal;
  padding: .78571429em 3em;
}

.ui.button {
  cursor: pointer;
  display: inline-block;
  min-height: 1em;
  outline: 0;
  border: none;
  vertical-align: baseline;
  background: #e0e1e2;
  color: rgba(0, 0, 0, .6);
  margin: 0 .25em 0 0;
  padding: .78571429em 1.5em;
  text-transform: none;
  text-shadow: none;
  font-weight: 700;
  line-height: 1em;
  font-style: normal;
  text-align: center;
  text-decoration: none;
   border-radius: .28571429rem;
  box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, .15) inset;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: opacity .1s ease, background-color .1s ease, color .1s ease, box-shadow .1s ease, background .1s ease;
  transition: opacity .1s ease, background-color .1s ease, color .1s ease, box-shadow .1s ease, background .1s ease;
  will-change: '';
  -webkit-tap-highlight-color: transparent;
  transition: all 1s ease;
}

.ui.button { font-size: 1rem; }

.ui.inverted.button {
  box-shadow: 0 0 0 2px #fff inset !important;
  background: 0 0;
  color: #fff;
  text-shadow: none !important;
}

.ui.inverted.button:hover {
  background: #FFF;
  color: #000;
  transition: all 1s ease;
}

.ui.huge.button { font-size: 1.42857143rem; }

3. Import jQuery JavaScript library and the jQuery yeliex.Carousel plugin into your web page. That's it.

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

---

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