teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問複数のスライダーをひとつのナビゲーションで動かす方法

編集履歴

質問編集履歴

3

コード修正

2017/06/21 01:47

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -360,7 +360,7 @@
360
360
 
361
361
  currentSlide.animate({
362
362
 
363
- left: centerFlag ?"-=3000":"+=2000"
363
+ left: centerFlag ?"-=1800":"+=2000"
364
364
 
365
365
  },500,function(){
366
366
 
@@ -368,7 +368,7 @@
368
368
 
369
369
  $(this).css(
370
370
 
371
- 'left', centerFlag ?"+=3000":"-=2000"
371
+ 'left', centerFlag ?"+=1800":"-=2000"
372
372
 
373
373
  );
374
374
 
@@ -388,7 +388,7 @@
388
388
 
389
389
  nextSlide.css(
390
390
 
391
- 'left',centerFlag ?"+=3000":"-=2000"
391
+ 'left',centerFlag ?"+=1800":"-=2000"
392
392
 
393
393
  );
394
394
 
@@ -396,20 +396,20 @@
396
396
 
397
397
  nextSlide.animate({
398
398
 
399
- left:centerFlag ?"-=3000":"+=2000"
399
+ left:centerFlag ?"-=1800":"+=2000"
400
400
 
401
401
  },500, function(){
402
402
 
403
- setTimeout(slideMove,2000);
403
+ setTimeout(slideMove, 2000);
404
404
 
405
405
  });
406
406
 
407
407
  });
408
408
 
409
- slideMove();
410
-
411
409
  }
412
410
 
411
+ slideMove();
412
+
413
413
 
414
414
 
415
415
  });

2

コード修正

2017/06/21 01:47

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -326,12 +326,10 @@
326
326
 
327
327
  var windowWidth = $(window).width();
328
328
 
329
- var slideWidth = $('.slideList_node').width();
329
+ // var slideWidth = $('.slideList_node').width();
330
330
 
331
331
  var slideMax = $('.sliderCenter .slideList_node').length;
332
332
 
333
- var slideSetWidth = slideWidth * slideMax;
334
-
335
333
 
336
334
 
337
335
  $('.slideList').each(function(index){
@@ -344,72 +342,70 @@
344
342
 
345
343
  var max = slideItem.length;
346
344
 
347
-
348
-
349
- // 下記だと.slideListの数とslideItemが違うとうまくいかない？
345
+ var slideWidth = slideItem.width();
350
346
 
351
347
  slideItem.eq( current ).addClass( "active" );
352
348
 
353
349
  // eachの外で実行できるようにしたい
354
350
 
355
- var slideMove = function(){
351
+ function slideMove(){
356
-
352
+
357
- slideItem.each(function(index){
353
+ // slideItem.each(function(index){
358
-
354
+
359
- $(this).attr('data-index', index);
355
+ // $(this).attr('data-index', index);
356
+
357
+ // });
358
+
359
+ var currentSlide = slideItem.eq( current );
360
+
361
+ currentSlide.animate({
362
+
363
+ left: centerFlag ?"-=3000":"+=2000"
364
+
365
+ },500,function(){
366
+
367
+ $(this).removeClass( "active" );
368
+
369
+ $(this).css(
370
+
371
+ 'left', centerFlag ?"+=3000":"-=2000"
372
+
373
+ );
374
+
375
+ current++;
376
+
377
+
378
+
379
+ if ( current >= max ) {
380
+
381
+ current = 0;
382
+
383
+ }
384
+
385
+
386
+
387
+ var nextSlide = slideItem.eq( current );
388
+
389
+ nextSlide.css(
390
+
391
+ 'left',centerFlag ?"+=3000":"-=2000"
392
+
393
+ );
394
+
395
+ nextSlide.addClass( "active" );
396
+
397
+ nextSlide.animate({
398
+
399
+ left:centerFlag ?"-=3000":"+=2000"
400
+
401
+ },500, function(){
402
+
403
+ setTimeout(slideMove,2000);
404
+
405
+ });
360
406
 
361
407
  });
362
408
 
363
- var currentSlide = slideItem.eq( current );
364
-
365
- currentSlide.animate({
366
-
367
- left:isCenter ?"-=3000":"+=2000"
368
-
369
- },500,function(){
370
-
371
- $(this).removeClass( "active" );
372
-
373
- $(this).css(
374
-
375
- 'left',isCenter ?"+=3000":"-=2000"
376
-
377
- );
378
-
379
- current++;
380
-
381
-
382
-
383
- if ( current >= num ) {
384
-
385
- current = 0;
386
-
387
- }
388
-
389
-
390
-
391
- var nextSlide = slideItem.eq( current );
392
-
393
- nextSlide.css(
394
-
395
- 'left',isCenter ?"+=3000":"-=2000"
396
-
397
- );
398
-
399
- nextSlide.addClass( "active" );
400
-
401
- nextSlide.animate({
402
-
403
- left:isCenter ?"-=3000":"+=2000"
404
-
405
- },500, function(){
406
-
407
- setTimeout(slideAction,2000);
408
-
409
- });
410
-
411
- });
412
-
413
409
  slideMove();
414
410
 
415
411
  }

1

文法の修正

2017/06/21 01:39

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -1,3 +1,25 @@
1
+ 下記の質問を参考にやってみたのですが下記のことをやりたくてつまずいてしまいました。
2
+
3
+ 知恵をお貸しいただけませんでしょうか。よろしくお願いいたします。
4
+
5
+
6
+
7
+ [複数個のスライダーを時間差で動かして回転しているかのように見せる方法](https://teratail.com/questions/81061)
8
+
9
+
10
+
11
+ ＊実現したいこと
12
+
13
+ ・前のスライドに戻る、次のスライドに進むボタンのクリックイベントの実装
14
+
15
+ ・.slideListの数とslideItemの数に差異があっても問題ないようにしたい
16
+
17
+
18
+
19
+ よろしくお願いいたします。
20
+
21
+
22
+
1
23
  ```html
2
24
 
3
25
  <div class="slider">
@@ -296,64 +318,128 @@
296
318
 
297
319
 
298
320
 
299
- ```javascript
300
-
301
- <div class="slider">
302
-
303
- <div class="sliderInner">
304
-
305
- <div class="sliderPrev">
306
-
307
- <ul class="slideList">
308
-
309
- <li class="slideList_node"><img src="img1.jpg"></li>
310
-
311
- <li class="slideList_node"><img src="img2.png"></li>
312
-
313
- <li class="slideList_node"><img src="img3.jpg"></li>
314
-
315
- </ul>
316
-
317
- </div>
318
-
319
- <div class="sliderNext">
320
-
321
- <ul class="slideList">
322
-
323
- <li class="slideList_node"><img src="img1.jpg"></li>
324
-
325
- <li class="slideList_node"><img src="img2.png"></li>
326
-
327
- <li class="slideList_node"><img src="img3.jpg"></li>
328
-
329
- </ul>
330
-
331
- </div>
332
-
333
- <div class="sliderCenter">
334
-
335
- <ul class="slideList">
336
-
337
- <li class="slideList_node"><a href=""><img src="img1.jpg"></a></li>
338
-
339
- <li class="slideList_node"><a href=""><img src="img2.png"></a></li>
340
-
341
- <li class="slideList_node"><a href=""><img src="img3.jpg"></a></li>
342
-
343
- </ul>
344
-
345
- </div>
346
-
347
- <ul class="sliderController">
348
-
349
- <li class="sliderControllerPrev"></li>
350
-
351
- <li class="sliderControllerNext"></li>
352
-
353
- </ul>
354
-
355
- </div>
356
-
357
- </div>
321
+ ```jQuery
322
+
323
+ $(function(){
324
+
325
+
326
+
327
+ var windowWidth = $(window).width();
328
+
329
+ var slideWidth = $('.slideList_node').width();
330
+
331
+ var slideMax = $('.sliderCenter .slideList_node').length;
332
+
333
+ var slideSetWidth = slideWidth * slideMax;
334
+
335
+
336
+
337
+ $('.slideList').each(function(index){
338
+
339
+ var current = index;
340
+
341
+ var centerFlag = $(this).parent().hasClass('sliderCenter');
342
+
343
+ var slideItem = $(this).find('.slideList_node');
344
+
345
+ var max = slideItem.length;
346
+
347
+
348
+
349
+ // 下記だと.slideListの数とslideItemが違うとうまくいかない？
350
+
351
+ slideItem.eq( current ).addClass( "active" );
352
+
353
+ // eachの外で実行できるようにしたい
354
+
355
+ var slideMove = function(){
356
+
357
+ slideItem.each(function(index){
358
+
359
+ $(this).attr('data-index', index);
360
+
361
+ });
362
+
363
+ var currentSlide = slideItem.eq( current );
364
+
365
+ currentSlide.animate({
366
+
367
+ left:isCenter ?"-=3000":"+=2000"
368
+
369
+ },500,function(){
370
+
371
+ $(this).removeClass( "active" );
372
+
373
+ $(this).css(
374
+
375
+ 'left',isCenter ?"+=3000":"-=2000"
376
+
377
+ );
378
+
379
+ current++;
380
+
381
+
382
+
383
+ if ( current >= num ) {
384
+
385
+ current = 0;
386
+
387
+ }
388
+
389
+
390
+
391
+ var nextSlide = slideItem.eq( current );
392
+
393
+ nextSlide.css(
394
+
395
+ 'left',isCenter ?"+=3000":"-=2000"
396
+
397
+ );
398
+
399
+ nextSlide.addClass( "active" );
400
+
401
+ nextSlide.animate({
402
+
403
+ left:isCenter ?"-=3000":"+=2000"
404
+
405
+ },500, function(){
406
+
407
+ setTimeout(slideAction,2000);
408
+
409
+ });
410
+
411
+ });
412
+
413
+ slideMove();
414
+
415
+ }
416
+
417
+
418
+
419
+ });
420
+
421
+
422
+
423
+
424
+
425
+ $('.sliderControllerPrev').click(function(){
426
+
427
+ // autoplayを停止して前のSlideに戻るように実装したい
428
+
429
+ slideMove();
430
+
431
+ });
432
+
433
+
434
+
435
+ $('.sliderControllerNext').click(function(){
436
+
437
+ slideMove();
438
+
439
+ });
440
+
441
+
442
+
443
+ });
358
444
 
359
445
  ```