https://santexnk.ru/js/powerSlide.js

1(function($){
2$.fn.powerSlide = function(options) { 
3var opt = {
4'width': 960, // Width and height of the images
5'height': 520,
6'position': 'bottom', // Position of the navigation
7'bullets': false, // Show numbering navigation
8'thumbs': true, // Show thumbnail navigation
9'row': 10, // Thumbnails per row
10'auto': true, // Auto rotate
11'autoSpeed': 5000,
12'fadeSpeed': 1000
13};
14this.each(function() { 
15if (options) { 
16$.extend(opt, options);
17}
18/* Container and wrapper
19-----------------------------------------------*/
20$(this).children().wrapAll('<div class="powerSlide" />');
21var container = $(this).find('.powerSlide');
22container.find('img').wrapAll('<div class="wrapper" />');
23var wrapper = container.find('.wrapper');
24/* Previous & next buttons
25-----------------------------------------------*/
26wrapper.append('<a href="#" class="prev">Prev</a><a href="#" class="next">Next</a>');
27/* Navigation & captions
28-----------------------------------------------*/
29switch (opt.position) { // Navigation position
30case 'top': container.prepend('<div class="nav" />'); break;
31case 'bottom': container.append('<div class="nav" />'); break;
32}
33var nav = container.find('.nav');
34wrapper.find('img').each(function(i){
35i += 1; // Start numbers at 1
36if (opt.bullets === true) { // Bullet navigation
37nav.append('<a href="#">'+ i +'</a>'); 
38}
39if (opt.thumbs === true) { // Thumbnail navigation
40nav.addClass('thumbs').append(
41'<img class="thumb" src="'+
42$(this).attr('src') +'" alt=""/>'); 
43}
44// Captions
45var title = $(this).attr('title');
46$(this).wrapAll('<div class="image" />');
47if (title !== undefined) {
48$(this).attr('title', '');
49$(this).after('<p>'+ title +'</p>');
50}
51});	
52/* Slider Object
53-----------------------------------------------*/	
54var Slider = function(){
55this.imgs = wrapper.find('div.image');
56this.imgCount = (this.imgs.length) - 1; // Match index
57this.navPrev = wrapper.find('a.prev');
58this.navNext = wrapper.find('a.next');
59this.bullets = container.find('.nav a');
60this.thumbs = container.find('.nav img.thumb');
61this.captions = this.imgs.find('p');
62this.getCurrentIndex = function(){ // Index
63return this.imgs.filter('.current').index();
64};
65this.go = function(index){ // Rotate images
66this.imgs
67.removeClass('current')
68.fadeOut(opt.fadeSpeed)
69.eq(index)
70.fadeIn(opt.fadeSpeed)
71.addClass('current');
72this.bullets
73.removeClass('current')
74.eq(index)
75.addClass('current');
76this.thumbs
77.removeClass('current')
78.eq(index)
79.addClass('current');
80};
81this.next = function(){
82var index = this.getCurrentIndex();
83if (index < this.imgCount) {
84this.go(index + 1); // Go next
85} else {
86this.go(0); // If last go first
87}
88};
89this.prev = function(){
90var index = this.getCurrentIndex();
91if (index > 0) {
92this.go(index - 1); // Go previous
93} else {
94this.go(this.imgCount); // If first go last
95}
96};	
97this.init = function(){ // Init
98wrapper
99.width(opt.width)
100.height(opt.height); /* Set width and height */
101this.imgs.hide().first().addClass('current').show(); /* Set current image */
102this.bullets.first().addClass('current');
103this.thumbs.first().addClass('current');
104// Dimensions for thumbnails and captions
105var padding = wrapper.css('padding-left').replace('px', '');
106var captionsPadding = this.captions.css('padding-left').replace('px', '');
107nav.width(opt.width);
108if (opt.thumbs === true) { // thumbs
109var thumbBorder = this.thumbs.css('border-left-width').replace('px', '');
110var thumbMargin = this.thumbs.css('margin-right').replace('px', '');
111var thumbMaxWidth = opt.width/opt.row;
112this.thumbs.width( (thumbMaxWidth - (thumbMargin * 2)) - (thumbBorder * 2) );
113}
114this.captions // captions
115.width(opt.width - (captionsPadding * 2) + 'px')
116.css('margin-bottom', padding + 'px');
117this.navNext.css('margin-right', padding + 'px');
118};
119};
120var slider = new Slider();
121slider.init();	
122/* Mouse Events
123-----------------------------------------------*/
124wrapper.hover(function(){ // Hover image wrapper
125slider.navNext.stop(true, true).fadeToggle();
126slider.navPrev.stop(true, true).fadeToggle();
127});
128slider.navNext.click(function(e){ // Click next button
129e.preventDefault();
130slider.next(); 
131});
132slider.navPrev.click(function(e){ // Click previous button
133e.preventDefault();
134slider.prev();
135});
136slider.bullets.click(function(e){ // Click numbered bullet
137e.preventDefault(); slider.captions.hide();
138slider.go($(this).index());
139});
140slider.thumbs.click(function(){ // Click thumbnail
141slider.captions.hide();
142slider.go($(this).index());
143});
144/* Auto Rotate	
145-----------------------------------------------*/	
146if (opt.auto === true) {
147var timer = function(){
148slider.next();
149slider.captions.hide();
150};
151var interval = setInterval(timer, opt.autoSpeed);
152// Pause when hovering image
153wrapper.hover(function(){clearInterval(interval);}, function(){interval=setInterval(timer, opt.autoSpeed);});
154// Reset timer when clicking thumbnail or bullet
155slider.thumbs.click(function(){clearInterval(interval); interval=setInterval(timer, opt.autoSpeed);});
156slider.bullets.click(function(){clearInterval(interval); interval=setInterval(timer, opt.autoSpeed);});	
157}
158});
159};
160})(jQuery);