CSS3 Animated Cover Flow Rotator Plugin For JQuery - Yys-Slider

Yys-Slider is a jQuery plugin used to create a pretty cool, 3D cover flow-style image showcase slider/rotator using CSS3 transitions and transforms.

How to use it:

1. The primary HTML structure for the Yys slider.

<div class="content-part part-tese">
  <div class="gallery_container">
    <div class="gallery_wrap threeD_gallery_wrap" style="margin-left: -360px; margin-top: -260px;">
      <div href="javascript:;" class="gallery_item threeD_gallery_item gallery_left_middle">
        <img src="images/yys_banner1.jpg" class="show">
        <div class="line-t"></div>
        <div class="line-r"></div>
        <div class="line-b"></div>
        <div class="line-l"></div>
      </div>
      <div href="javascript:;" class="gallery_item threeD_gallery_item front_side">
        <img src="images/yys_banner2.jpg" class="show">
        <div class="line-t"></div>
        <div class="line-r"></div>
        <div class="line-b"></div>
        <div class="line-l"></div>
      </div>
      <div href="javascript:;" class="gallery_item threeD_gallery_item gallery_right_middle">
        <img src="images/yys_banner3.jpg" class="show">
        <div class="line-t"></div>
        <div class="line-r"></div>
        <div class="line-b"></div>
        <div class="line-l"></div>
      </div>
      <div href="javascript:;" class="gallery_item threeD_gallery_item gallery_out">
        <img src="images/yys_banner4.jpg" class="show">
        <div class="line-t"></div>
        <div class="line-r"></div>
        <div class="line-b"></div>
        <div class="line-l"></div>
      </div>
    </div>
    <a class="prev" href="javascript:;"></a>
    <a class="next" href="javascript:;"></a>
  </div>
</div>

2. Import jQuery library together with the Yys-Slider plugin's files into the html file.

<link rel="stylesheet" href="jquery-yys-slider.css">
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="jquery-yys-slider.js"></script>

3. Activate the slider and specify the number of slides.

$('.content-part.part-tese').addClass('show');
$('.gallery_container').gallery_slider({imgNum: 4});

4. More configuration options with default values.

$('.gallery_container').gallery_slider({

  // default CSS selectors
  gallery_item_left: '.prev' ,
  gallery_item_right: '.next' ,
  gallery_left_middle: '.gallery_left_middle', 
  gallery_right_middle: '.gallery_right_middle',
  threeD_gallery_item: '.threeD_gallery_item'
  
});

Change log:

2017-12-13

• Changed styles.

2017-08-01

• code improvement

---

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