Mobile-friendly Skewed Carousel Plugin For jQuery - nanameSlider

nanameSlider is a fancy jQuery slider plugin that lets you create a responsive, touch-enabled, multi-media carousel using CSS3 2D & 3D transforms (skewY and translate3d).

How to use it:

1. Insert your slide contents as list items to an unordered html list:

<ul class="naname slider-demo">
  <li>
    <div class="row">
      <div class="rowin">
        <div>
          <p class="ti center">Slide-1</p>
        </div>
      </div>
    </div>
  </li>
  <li>
    <div class="row">
      <div class="rowin">
        <div>
          <p class="ti center">Slide-2 </p>
        </div>
      </div>
    </div>
  </li>
  <li>
    <div class="row">
      <div class="rowin">
        <div>
          <p class="ti center">Slide-3</p>
        </div>
      </div>
    </div>
  </li>
</ul>

2. Put jQuery library and the jQuery nanameSlider plugin's script at the bottom of the webpage.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.nanameSlider.js"></script>

3. Initialize the plugin by calling the function on the html list as this.

$( '.slider-demo' ).nanameSlider();

4. The primary CSS styles for the carousel.

ul.naname {
  position: relative;
  clear: both;
  transform-origin: left top;
}

ul.naname li {
  float: left;
  position: relative;
  box-sizing: border-box;
}

ul.naname li:after {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  content: " ";
  /*box-shadow: 0 2px 2px -1px rgba(255, 255, 255, .9) inset, 0 -2px 2px -1px rgba(255, 255, 255, .9) inset;*/
  box-shadow: 0 2px 2px -1px rgba(238, 238, 238, .9) inset, 0 -2px 2px -1px rgba(238, 238, 238, .9) inset;
}

.row { position: relative; }

.row .rowin {
  width: 100%;
  height: 100%;
  font-size: 150%;
  top: 0;
  margin: 0;
  padding: 0;
  color: #fff;
  position: absolute;
}

.row .rowin > div {
  margin: 0 auto;
  font-size: 1rem;
  line-height: 1.7;
  padding: 0 60px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.row .rowin p.ti {
  font-size: 24px;
  font-weight: 600;
  z-index: 2;
}

.skewy-wrapper {
  position: relative;
  margin: 0 auto;
  padding: 0;
  max-width: 100%;
}

.skewy-wrapper .viewport-viewport {
  box-shadow: none;
  border: none;
  left: 0;
  width: 100%;
  position: relative;
}

.skewy-prev {
  left: 15px;
  z-index: 1;
}

.skewy-next {
  right: 15px;
  z-index: 1;
}

.skewy-prev, .skewy-next {
  position: absolute;
  display: block;
  cursor: pointer;
  color: transparent;
  background: transparent;
}

.skewy-pager a:hover, .skewy-pager a.active { background: #000; }

.skewy-pager a {
  text-indent: -9999px;
  display: block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  outline: 0;
  border-radius: 5px;
  background: #ccc;
}

.skewy-pager-item { display: inline-block; }

.skewy-pager {
  text-align: center;
  font-size: .85em;
  font-family: Arial;
  font-weight: bold;
  color: #666;
  position: absolute;
  z-index: 1;
  width: 100%;
  transform-origin: left top;
}

5. Default plugin options.

$( '.slider-demo' ).nanameSlider({
  skewYangle: -5,
  beforeSelector: '',
  afterSelector: '',
  slideDirection: 'left',
  autoPlay: false,
  autoPause: 3000,
  speed: 0.35,
  repeatMax: 10,
  pagerVisibility: true,
  pNbuttonVisibility: true,
  pNiconfontLclass: 'icon-chevron-left',
  pNiconfontRclass: 'icon-chevron-right',
  prevButtonTop: 0,
  nextButtonTop: 0,
  pagerTop: 10,
  wrapperClass: 'skewy-wrapper',
  touchEnabled: true,
});

---

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