CSS3 Animated Cover Flow Rotator Plugin For JQuery - Yys-Slider
File Size: | 1.63 MB |
---|---|
Views Total: | 6714 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.