複数のSwiperスライダーが連動した時のコードの短縮(リファクタリング)

JS

1<!-- 2 <script defer> 3 let swiper1 = new Swiper('#swiper1', { 4 loop:true, 5 pagination: { 6 el: '.swiper-pagination', 7 clickable:true, 8 }, 9 navigation: { 10 nextEl: '.swiper-button-next', 11 prevEl: '.swiper-button-prev', 12 }, 13 }); 14 let swiper2 = new Swiper('#swiper2', { 15 loop:true, 16 pagination: { 17 el: '.swiper-pagination', 18 clickable:true, 19 }, 20 navigation: { 21 nextEl: '.swiper-button-next', 22 prevEl: '.swiper-button-prev', 23 }, 24 }); 25 const swiper3 = new Swiper('#swiper3', { 26 loop:true, 27 pagination: { 28 el: '.swiper-pagination', 29 clickable:true, 30 }, 31 navigation: { 32 nextEl: '.swiper-button-next', 33 prevEl: '.swiper-button-prev', 34 }, 35 }); 36 const swiper4 = new Swiper('#swiper4', { 37 loop:true, 38 pagination: { 39 el: '.swiper-pagination', 40 clickable:true, 41 }, 42 navigation: { 43 nextEl: '.swiper-button-next', 44 prevEl: '.swiper-button-prev', 45 }, 46 }); 47 const swiper5 = new Swiper('#swiper5', { 48 loop:true, 49 pagination: { 50 el: '.swiper-pagination', 51 clickable:true, 52 }, 53 navigation: { 54 nextEl: '.swiper-button-next', 55 prevEl: '.swiper-button-prev', 56 }, 57 }); 58 const swiper6 = new Swiper('#swiper6', { 59 loop:true, 60 pagination: { 61 el: '.swiper-pagination', 62 clickable:true, 63 }, 64 navigation: { 65 nextEl: '.swiper-button-next', 66 prevEl: '.swiper-button-prev', 67 }, 68 }); 69 swiper1.controller.control = [swiper2]; 70 swiper2.controller.control = [swiper1]; 71 swiper3.controller.control = [swiper4]; 72 swiper4.controller.control = [swiper3]; 73 swiper5.controller.control = [swiper6]; 74 swiper6.controller.control = [swiper5]; 75 </script> -->

コメントを投稿

0 コメント