ページネイションを２回クリックすると要素が消えてしまう

タイトルの通りの現象が起こってしまいます。
jqueryのスライダープラグインで
ページネイションをクリックしたときに起こるのですが
最初にクリックした時点では通常通り動きますが、もう一回同じところを
クリックすると右から左へとアニメーションが発生すると共に消えてしまいます。

解決策をご存知の方、いらっしゃいますか？

下記コードはコピペだけで動くようにしています。
（html、css、JSを分割していません）

html
1<!doctype html>
2<html>
3<head>
4<meta charset="UTF-8">
5<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
6<title></title>
7<style>
8.jquery-slider-pages {
9overflow: visible;
10position: absolute;
11left: 0;
12bottom: 0;
13height: 14px;
14right: 0;
15}
16.jquery-slider-page {
17overflow: hidden;
18position: relative;
19display: block;
20float: right;
21width: 10px;
22height: 10px;
23border:1px solid #E3FFE3;
24background: #333;
25cursor: pointer;
26margin:2px;
27border-radius: 50%;
28}
29
30.jquery-slider-page:hover {
31background: #c0c0c0;
32}
33.jquery-slider-page-current {
34background: #c0c0c0;
35}
36
37.jquery-slider-control {
38position: absolute;
39text-align:center;
40width: 20px;
41color:#000;
42background: #fff;
43line-height: 40px;
44font-size: 4em;
45font-weight: normal;
46cursor: pointer;
47z-index:9000;
48overflow:hidden;
49margin:0px -10px 0 -10px;
50opacity:0.8;
51}
52
53.jquery-slider-control-prev {
54left: 6px;
55top:150px;
56border-radius:0px 3px 3px 0px;
57}	
58.jquery-slider-control-next {
59right: 6px;
60top:150px;
61border-radius:3px 0 0 3px;
62}
63
64.jquery-slider {
65overflow: hidden;
66position: relative;
67}
68.jquery-slider-element {
69overflow: hidden;
70display: none;
71position: absolute;
72left: 0;
73top: 0;
74width: 100%;
75height: 100%;
76}
77
78#slider {
79position: absolute;
80width:200px;
81height:100px;
82backgrond:#B1B1B1;
83}
84
85#slider div {
86width:200px;
87height:100px;
88backgrond:#B1B1B1;
89}
90</style>
91<script>
92(function($) {
93$.fn.slider = function(options) {
94var $this = this;
95var settings = {
96'width': this.width(),
97'height': this.height(),
98'wait': 4000,
99'fade': 750,
100'direction': 'left',
101'showControls': true,
102'showProgress': true,
103'hoverPause': true,
104'autoplay': true,
105'randomize': false,
106'slidebefore': function() {},
107'slideafter': function() {},
108'rewind': function() {}
109};
110var _timer = false;
111var _last = false;
112var _this = false;
113var _cycle = function() {
114clearTimeout(_timer);
115_last = _this;
116if (settings.direction == 'right') {
117_this = _this.prev('.jquery-slider-element');
118} else {
119_this = _this.next('.jquery-slider-element');
120}
121if (!_this.length) {
122_rewind();
123}
124_draw();
125if (!$this.hasClass('jquery-slider-paused') && settings.autoplay) {
126_timer = setTimeout(_cycle, settings.wait);
127}
128};
129var _rewind = function() {
130if (settings.direction == 'right') {
131_this = $this.children('.jquery-slider-element').last();
132} else {
133_this = $this.children('.jquery-slider-element').first();
134}
135settings.rewind(_this, $this);
136};
137var _draw = function() {
138$this.addClass('jquery-slider-sliding');
139if (settings.showProgress) {
140$this.find('.jquery-slider-page').removeClass('jquery-slider-page-current');
141$this.find('.jquery-slider-page:eq(' + (_this.nextAll('.jquery-slider-element').length) + ')').addClass('jquery-slider-page-current');
142}
143settings.slidebefore(_this, $this);
144if (settings.direction == 'right') {
145_this.show().css('left', -settings.width);
146} else {
147_this.show().css('left', settings.width);
148}
149_this.stop(true, true).animate({
150'left': (settings.direction == 'right' ? '+=' : '-=') + settings.width + 'px'
151}, {
152'duration': settings.fade,
153'complete': function() {
154settings.slideafter(_this, $this);
155$this.removeClass('jquery-slider-sliding');
156}
157});
158if (_last) {
159_last.stop(true, true).animate({
160'left': (settings.direction == 'right' ? '+=' : '-=') + settings.width + 'px'
161}, {
162'duration': settings.fade
163});
164}
165};
166var _next = function() {
167if ($this.hasClass('jquery-slider-sliding')) return;
168var direction = settings.direction;
169$this.addClass('jquery-slider-paused');
170settings.direction = 'left';
171_cycle();
172settings.direction = direction;
173};
174var _prev = function() {
175if ($this.hasClass('jquery-slider-sliding')) return;
176var direction = settings.direction;
177$this.addClass('jquery-slider-paused');
178settings.direction = 'right';
179_cycle();
180settings.direction = direction;
181};
182var _init = function() {
183if (options) {
184$.extend(settings, options);
185}
186if (settings.hoverPause) {
187$this.bind({
188'mouseenter': function() {
189$this.addClass('jquery-slider-paused')
190clearTimeout(_timer);
191},
192'mouseleave': function() {
193$this.removeClass('jquery-slider-paused');
194if (settings.autoplay) {
195_timer = setTimeout(_cycle, settings.wait);
196}
197}
198});
199}
200var positionEls = $('<span class="jquery-slider-pages"></span>');
201$this.addClass('jquery-slider').width(settings.width).height(settings.height);
202$this.children().each(function() {
203var $tmp = $(this);
204_this = $(this).addClass('jquery-slider-element');
205positionEls.prepend($('<span class="jquery-slider-page"></span>').on('click', function() {
206if ($this.hasClass('jquery-slider-sliding')) return;
207_last = _this;
208_this = $tmp;
209_draw();
210}));
211});
212if (settings.showProgress) {
213$this.append(positionEls);
214}
215if (settings.showControls) {
216var controlPrev = $('<span class="jquery-slider-control jquery-slider-control-prev">&#139;</span>').css('cursor','pointer').bind('click', function() {
217_prev();
218});
219var controlNext = $('<span class="jquery-slider-control jquery-slider-control-next">&#155;</span>').css('cursor','pointer').bind('click', function() {
220_next();
221});
222$this.append(controlPrev);
223$this.append(controlNext);
224}
225if (settings.randomize) {
226_this = $this.children('.jquery-slider-element').eq(parseInt($this.children('.jquery-slider-element').length * Math.random()));
227}
228_cycle();
229};
230_init();
231};
232})(jQuery);
233</script>
234</head>
235<body>
236<script>
237jQuery(function($) {
238$('#slider').slider({
239showControls: true,
240autoplay: true, 
241showPosition: true, 
242hoverPause: true, 
243wait: 2500,
244fade: 300, 
245direction: "left"
246});
247});
248</script>
249<div id="slider">
250<div>1</div>
251<div>2</div>
252<div>3</div>
253</div>
254</body>
255</html>

kei344

2016/07/25 03:49

スライダープラグインは自作のものでしょうか。そうでなければ入手元URLを記載ください。

southern_flavor

2016/07/25 03:55

このプラグインは昔、MIT licenseで某サイトにあり（コード内に著作権表示なし）、現在はサイトごと消されてまして、URLをのせることができなくなってしました。

southern_flavor

2016/07/25 04:02

名称はdiv slider2というものだった思います。

行動規範の内容に同意します

回答1件

ベストアンサー

コードの「解決策」ではないのですが、同様の動きが可能な別ライブラリに差し替えるのが手早いと思います。メンテナンスの無いライブラリの「おかしい挙動」を直す事は、コード自体書き直すのと同じくらいの手間が必要になってしまいます。また、最新のライブラリであれば、現在のモバイルデバイス／新しい要素などへも対応されています。

いくつか有名ライブラリを挙げてみました。それぞれの使い方は日本語で説明してくれている記事が多数あり、ちょっと検索するとすぐ見つかると思います。

【Swiper - Most Modern Mobile Touch Slider】
http://idangero.us/swiper/

【slick - the last carousel you'll ever need】
http://kenwheeler.github.io/slick/

【FlexSlider 2】
http://flexslider.woothemes.com/

【Slider Pro - Elegant and Professional Sliders】
http://bqworks.com/slider-pro/

投稿2016/07/25 04:48

kei344

総合スコア69398