Responsive jQuery Carousel/Slider with Slice Transitions - indySliceSlider

indySliceSlider is a tiny jQuery plugin to create a responsive content slider/carousel that uses CSS3 for fancy slide transition effects.

How to use it:

1. Include jQuery library and the jQuery indySliceSlider plugin's files in the document.

<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<link rel="stylesheet" href="css/indySliceSlider.css">
<script src="js/jquery.indySliceSlider.js"></script>

2. Markup html structure. Add your images as background into the carousel slider as displayed below.

<section id="indy-slice-slider" class="indy-slice-slider slider-template">
  <section class="slide-container">
    <article class="slice-slide active">
      <section class="slice-part" >
        <section class="slice-img-container">
          <section class="slice-img" style="background-image: url(img/1.jpg);"></section>
        </section>
      </section>
    </article>
    <article class="slice-slide prev">
      <section class="slice-part">
        <section class="slice-img-container">
          <section class="slice-img" style="background-image: url(img/2.jpg);"></section>
        </section>
      </section>
    </article>
    <article class="slice-slide">
      <section class="slice-part">
        <section class="slice-img-container">
          <section class="slice-img" style="background-image: url(img/3.jpg);"></section>
        </section>
      </section>
    </article>
    <article class="slice-slide">
      <section class="slice-part">
        <section class="slice-img-container">
          <section class="slice-img" style="background-image: url(img/4.jpg);"></section>
        </section>
      </section>
    </article>
    <article class="slice-slide">
      <section class="slice-part">
        <section class="slice-img-container">
          <section class="slice-img" style="background-image: url(img/5.jpg);"></section>
        </section>
      </section>
    </article>
    <article class="slice-slide">
      <section class="slice-part">
        <section class="slice-img-container">
          <section class="slice-img" style="background-image: url(img/6.jpg);"></section>
        </section>
      </section>
    </article>
    <article class="slice-slide">
      <section class="slice-part">
        <section class="slice-img-container">
          <section class="slice-img" style="background-image: url(img/7.jpg);"></section>
        </section>
      </section>
    </article>
  </section>
</section>

3. Call the plugin on the parent element.

$('#indy-slice-slider').indySliceSlider();

4. A little CSS to customize the arrows navigation. Requires the 'icomoon' icon font.

.slider-template {
  height: 400px;
}
.slider-template .slide {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.slider-template .arrow {
  z-index: 100;
}

.arrow {
  position: absolute;
  width: 30px;
  height: 50px;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 100;
}
.arrow button {
  font-size: 50px;
  line-height: 50px;
  background-color: transparent;
  color: black;
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
}
.arrow button:hover {
  color: #ffde00;
}
.arrow button:after {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
}
.arrow.prev {
  left: 20px;
}
.arrow.prev button:after {
  content: "\e602";
}
.arrow.next {
  right: 20px;
}
.arrow.next button:after {
  content: "\e601";
}

5. Options available.

$('#indy-slice-slider').indySliceSlider({

// CSS class for child slides
'slideClass' : '.slice-slide',

// autoplay interval
'autoplay'   : 5000,

});

---

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