https://www.gov.hk/js/swiper-slider.js?20180214.101056

1/*
29:41 2016-12-07
3$(document).ready(function () {
4   initSwiperSlider();
5});
6*/
7
8function initSwiperSlider(){
9
10	// move rotating banner fix to feedin.js 9:41 2016-12-07
11	
12	
13   var swiper = new Swiper('.promote-slider', {
14      pagination: '.swiper-pagination',
15      slidesPerView: 1,
16      nextButton: '.swiper-button-next-custom',
17      prevButton: '.swiper-button-prev-custom',
18      slidesPerGroup: 1,
19      loop: true,
20      observer: true,
21      observeParents: true,
22      autoplay: 5000,
23      paginationClickable: true,
24      autoplayDisableOnInteraction: false,
25      paginationBulletRender: function (swiper, index, className) {
26         var txtSlide = getTxtByLang(['To slide no. ' + (index + 1), '去第' + (index + 1) + '張', '去第' + (index + 1) + '张'])
27         return '<span class="' + className + '" title="' + txtSlide + '">' + '</span>';
28      },
29      breakpoints: {
30         1200: {
31            slidesPerView: 3,
32            slidesPerGroup: 1
33         },
34         767: {
35            slidesPerView: 2,
36            slidesPerGroup: 1
37         },
38         479: {
39            slidesPerView: 1,
40            slidesPerGroup: 1
41         }
42
43      },
44      onInit: function () {
45         initSwiperPause();
46      }
47   });
48
49   var swiper2 = new Swiper('.mobile-app-slider', {
50      pagination: '.swiper-pagination',
51      slidesPerView: 5,
52      nextButton: '.swiper-button-next-custom',
53      prevButton: '.swiper-button-prev-custom',
54      slidesPerGroup: 5,
55      autoplay: 5000,
56      observer: true,
57      observeParents: true,
58      paginationClickable: true,
59      autoplayDisableOnInteraction: false,
60      paginationBulletRender: function (swiper, index, className) {
61         var txtSlide = getTxtByLang(['To slide no. ' + (index + 1), '去第' + (index + 1) + '張', '去第' + (index + 1) + '张'])
62         return '<span class="' + className + '" title="' + txtSlide + '">' + '</span>';
63      },
64      breakpoints: {
65         1200: {
66            slidesPerView: 3,
67            slidesPerGroup: 3
68         },
69         767: {
70            slidesPerView: 3,
71            slidesPerGroup: 1
72         },
73         479: {
74            slidesPerView: 2,
75            slidesPerGroup: 1
76         }
77      },
78      onInit: function () {
79         initSwiperPause2();
80
81      }
82   });
83
84   var swiper3 = new Swiper('.check-it-out-slider', {
85      pagination: '.swiper-pagination',
86      slidesPerView: 5,
87      slidesPerGroup: 5,
88      autoplay: false,
89      observer: true,
90      observeParents: true,
91      nextButton: '.swiper-button-next-custom',
92      prevButton: '.swiper-button-prev-custom',
93      paginationClickable: true,
94      loop: true,
95      spaceBetween: 15,
96      autoplayDisableOnInteraction: false,
97      paginationBulletRender: function (swiper, index, className) {
98         var txtSlide = getTxtByLang(['To slide no. ' + (index + 1), '去第' + (index + 1) + '張', '去第' + (index + 1) + '张'])
99         return '<span class="' + className + '" title="' + txtSlide + '">' + '</span>';
100      },
101      breakpoints: {
102         1200: {
103            slidesPerView: 3,
104            slidesPerGroup: 1,
105            autoplay: 5000,
106         },
107         767: {
108            slidesPerView: 1,
109            slidesPerGroup: 1,
110            autoplay: 5000,
111         }
112      },
113      onInit: function () {
114         initSwiperPause3();
115
116      }
117   });
118
119   var swiper4 = new Swiper('.do-you-know-slider', {
120      pagination: '.swiper-pagination',
121      slidesPerView: 1,
122      slidesPerGroup: 1,
123      autoplay: 5000,
124      paginationClickable: true,
125      nextButton: '.swiper-button-next-custom',
126      prevButton: '.swiper-button-prev-custom',
127      observer: true,
128      observeParents: true,
129      loop: true,
130      paginationBulletRender: function (swiper, index, className) {
131         var txtSlide = getTxtByLang(['To slide no. ' + (index + 1), '去第' + (index + 1) + '張', '去第' + (index + 1) + '张'])
132         return '<span class="' + className + '" title="' + txtSlide + '">' + '</span>';
133      },
134      autoplayDisableOnInteraction: false,
135      onInit: function () {
136         initSwiperPause4();
137
138      }
139   });
140
141   var swiper5 = new Swiper('.announcement-slider', {
142      pagination: '.swiper-pagination',
143      slidesPerView: 1,
144      slidesPerGroup: 1,
145      autoplay: 5000,
146      paginationClickable: true,
147      nextButton: '.swiper-button-next-custom',
148      prevButton: '.swiper-button-prev-custom',
149      observer: true,
150      observeParents: true,
151      loop: true,
152      paginationBulletRender: function (swiper, index, className) {
153         var txtSlide = getTxtByLang(['To slide no. ' + (index + 1), '去第' + (index + 1) + '張', '去第' + (index + 1) + '张'])
154         return '<span class="' + className + '" title="' + txtSlide + '">' + '</span>';
155      },
156      autoplayDisableOnInteraction: false,
157      onInit: function () {
158         initSwiperPause5();
159
160      }
161   });
162
163
164   function initSwiperPause() {
165      var swiperSlider = $('.promote-slider');
166      var pauseBtn = swiperSlider.find('.swiper-button-pause');
167      pauseBtn.unbind().click(function () {
168         var thisPauseBtn = $(this);
169         if (!swiperSlider.hasClass('swiper-paused')) {
170            swiperSlider.addClass('swiper-paused');
171            swiper.stopAutoplay();
172            var txtPause = getTxtByLang(['Play', '播放', '播放']);
173            var txtPauseAccess = '<span class="access">' + txtPause + '</span>';
174            thisPauseBtn.attr('title', txtPause);
175            thisPauseBtn.html(txtPauseAccess);
176         } else {
177            swiperSlider.removeClass('swiper-paused');
178            swiper.startAutoplay();
179            var txtPause = getTxtByLang(['Pause', '暫停', '暂停']);
180            var txtPauseAccess = '<span class="access">' + txtPause + '</span>';
181            thisPauseBtn.attr('title', txtPause);
182         }
183      });
184   }
185
186   function initSwiperPause2() {
187      var swiperSlider = $('.mobile-app-slider');
188      var pauseBtn = swiperSlider.find('.swiper-button-pause');
189      pauseBtn.unbind().click(function () {
190         var thisPauseBtn = $(this);
191         if (!swiperSlider.hasClass('swiper-paused')) {
192            swiperSlider.addClass('swiper-paused');
193            swiper2.stopAutoplay();
194            var txtPause = getTxtByLang(['Play', '播放', '播放']);
195            var txtPauseAccess = '<span class="access">' + txtPause + '</span>';
196            thisPauseBtn.attr('title', txtPause);
197            thisPauseBtn.html(txtPauseAccess);
198         } else {
199            swiperSlider.removeClass('swiper-paused');
200            swiper2.startAutoplay();
201            var txtPause = getTxtByLang(['Pause', '暫停', '暂停']);
202            var txtPauseAccess = '<span class="access">' + txtPause + '</span>';
203            thisPauseBtn.attr('title', txtPause);
204         }
205      });
206   }
207
208   function initSwiperPause3() {
209      var swiperSlider = $('.check-it-out-slider');
210      var pauseBtn = swiperSlider.find('.swiper-button-pause');
211      pauseBtn.unbind().click(function () {
212         var thisPauseBtn = $(this);
213         if (!swiperSlider.hasClass('swiper-paused')) {
214            swiperSlider.addClass('swiper-paused');
215            swiper3.stopAutoplay();
216            var txtPause = getTxtByLang(['Play', '播放', '播放']);
217            var txtPauseAccess = '<span class="access">' + txtPause + '</span>';
218            thisPauseBtn.attr('title', txtPause);
219            thisPauseBtn.html(txtPauseAccess);
220         } else {
221            swiperSlider.removeClass('swiper-paused');
222            swiper3.startAutoplay();
223            var txtPause = getTxtByLang(['Pause', '暫停', '暂停']);
224            var txtPauseAccess = '<span class="access">' + txtPause + '</span>';
225            thisPauseBtn.attr('title', txtPause);
226         }
227      });
228   }
229
230   function initSwiperPause4() {
231      var swiperSlider = $('.do-you-know-slider');
232      var pauseBtn = swiperSlider.find('.swiper-button-pause');
233      pauseBtn.unbind().click(function () {
234         var thisPauseBtn = $(this);
235         if (!swiperSlider.hasClass('swiper-paused')) {
236            swiperSlider.addClass('swiper-paused');
237            swiper4.stopAutoplay();
238            var txtPause = getTxtByLang(['Play', '播放', '播放']);
239            var txtPauseAccess = '<span class="access">' + txtPause + '</span>';
240            thisPauseBtn.attr('title', txtPause);
241            thisPauseBtn.html(txtPauseAccess);
242         } else {
243            swiperSlider.removeClass('swiper-paused');
244            swiper4.startAutoplay();
245            var txtPause = getTxtByLang(['Pause', '暫停', '暂停']);
246            var txtPauseAccess = '<span class="access">' + txtPause + '</span>';
247            thisPauseBtn.attr('title', txtPause);
248         }
249      });
250   }
251
252   function initSwiperPause5() {
253      var swiperSlider = $('.announcement-slider');
254      var pauseBtn = swiperSlider.find('.swiper-button-pause');
255      pauseBtn.unbind().click(function () {
256         var thisPauseBtn = $(this);
257         if (!swiperSlider.hasClass('swiper-paused')) {
258            swiperSlider.addClass('swiper-paused');
259            swiper5.stopAutoplay();
260            var txtPause = getTxtByLang(['Play', '播放', '播放']);
261            var txtPauseAccess = '<span class="access">' + txtPause + '</span>';
262            thisPauseBtn.attr('title', txtPause);
263            thisPauseBtn.html(txtPauseAccess);
264         } else {
265            swiperSlider.removeClass('swiper-paused');
266            swiper5.startAutoplay();
267            var txtPause = getTxtByLang(['Pause', '暫停', '暂停']);
268            var txtPauseAccess = '<span class="access">' + txtPause + '</span>';
269            thisPauseBtn.attr('title', txtPause);
270         }
271      });
272   }
273}