Skip to content

Commit 1f9248c

Browse files
VinhVictorVinhVictor
committed
1 parent 671e0d2 commit 1f9248c

File tree

2 files changed

+349
-1
lines changed

2 files changed

+349
-1
lines changed

‎demos/000-solid.html

+342
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,342 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Swiper demo</title>
7+
<link rel="stylesheet" href="../package/css/swiper.min.css">
8+
<script src="../package/js/swiper.min.js"></script>
9+
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/css/swiper.min.css">-->
10+
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/js/swiper.min.js"></script>-->
11+
12+
<style>
13+
.slider-box {
14+
width: 520px;
15+
max-width: 100%;
16+
margin: auto;
17+
}
18+
19+
.swiper-container {
20+
width: 100%;
21+
margin-left: auto;
22+
margin-right: auto;
23+
}
24+
25+
26+
.swiper-slide {
27+
background-size: cover;
28+
background-position: center;
29+
}
30+
31+
.gallery-top {
32+
height: 400px;
33+
width: 100%;
34+
}
35+
36+
.gallery-thumbs {
37+
height: 100px;
38+
box-sizing: border-box;
39+
padding: 10px 0;
40+
}
41+
42+
.gallery-thumbs-v {
43+
height: 400px;
44+
width: 100px;
45+
box-sizing: border-box;
46+
padding: 10px 0;
47+
}
48+
49+
.gallery-thumbs .swiper-slide {
50+
width: 25%;
51+
height: 100%;
52+
opacity: 0.4;
53+
}
54+
55+
.gallery-thumbs .swiper-slide-thumb-active {
56+
opacity: 1;
57+
}
58+
59+
.swiper-pagination {
60+
background-color: #ffffff;
61+
}
62+
63+
#swiper-pagination-custom {
64+
text-align: center;
65+
}
66+
#swiper-pagination-custom button{
67+
opacity: .2;
68+
}
69+
#swiper-pagination-custom button.active{
70+
opacity: 1;
71+
}
72+
</style>
73+
</head>
74+
75+
<body>
76+
<div style="text-align: center; margin-bottom: 50px">
77+
<h1>TinySlider</h1>
78+
<p>
79+
What is Lorem Ipsum?
80+
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
81+
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
82+
type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
83+
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
84+
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of
85+
Lorem Ipsum.
86+
87+
Why do we use it?
88+
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its
89+
layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to
90+
using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web
91+
page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web
92+
sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on
93+
purpose (injected humour and the like).
94+
</p>
95+
</div>
96+
<div class="slider-box">
97+
<div style="display: flex; width: 630px; max-width: 100%; margin-bottom: 100px; justify-content: space-between">
98+
<div class="swiper-container gallery-thumbs-v">
99+
<div class="swiper-wrapper">
100+
<div class="swiper-slide 1" style="background-image:url(https://swiperjs.com/demos/images/nature-1.jpg)">
101+
</div>
102+
<div class="swiper-slide 2" style="background-image:url(https://swiperjs.com/demos/images/nature-2.jpg)">
103+
</div>
104+
<div class="swiper-slide 3" style="background-image:url(https://swiperjs.com/demos/images/nature-3.jpg)">
105+
</div>
106+
<div class="swiper-slide 4" style="background-image:url(https://swiperjs.com/demos/images/nature-4.jpg)">
107+
</div>
108+
<div class="swiper-slide 5" style="background-image:url(https://swiperjs.com/demos/images/nature-5.jpg)">
109+
</div>
110+
<div class="swiper-slide 6" style="background-image:url(https://swiperjs.com/demos/images/nature-5.jpg)">
111+
</div>
112+
<div class="swiper-slide 7" style="background-image:url(https://swiperjs.com/demos/images/nature-5.jpg)">
113+
</div>
114+
</div>
115+
</div>
116+
<div class="swiper-container gallery-top">
117+
<div class="swiper-wrapper">
118+
<div class="swiper-slide 1" style="background-image:url(https://swiperjs.com/demos/images/nature-1.jpg)">
119+
</div>
120+
<div class="swiper-slide 2" style="background-image:url(https://swiperjs.com/demos/images/nature-2.jpg)">
121+
</div>
122+
<div class="swiper-slide 3" style="background-image:url(https://swiperjs.com/demos/images/nature-3.jpg)">
123+
</div>
124+
<div class="swiper-slide 4" style="background-image:url(https://swiperjs.com/demos/images/nature-4.jpg)">
125+
</div>
126+
<div class="swiper-slide 5" style="background-image:url(https://swiperjs.com/demos/images/nature-5.jpg)">
127+
</div>
128+
<div class="swiper-slide 6" style="background-image:url(https://swiperjs.com/demos/images/nature-5.jpg)">
129+
</div>
130+
<div class="swiper-slide 7" style="background-image:url(https://swiperjs.com/demos/images/nature-5.jpg)">
131+
</div>
132+
</div>
133+
<!-- Add Arrows -->
134+
<div class="swiper-button-next swiper-button-white"></div>
135+
<div class="swiper-button-prev swiper-button-white"></div>
136+
<!-- Pagination -->
137+
<div class="swiper-pagination"></div>
138+
</div>
139+
</div>
140+
141+
<div class="swiper-container gallery-thumbs">
142+
<div class="swiper-wrapper">
143+
<div class="swiper-slide 1" style="background-image:url(https://swiperjs.com/demos/images/nature-1.jpg)">
144+
</div>
145+
<div class="swiper-slide 2" style="background-image:url(https://swiperjs.com/demos/images/nature-2.jpg)">
146+
</div>
147+
<div class="swiper-slide 3" style="background-image:url(https://swiperjs.com/demos/images/nature-3.jpg)">
148+
</div>
149+
<div class="swiper-slide 4" style="background-image:url(https://swiperjs.com/demos/images/nature-4.jpg)">
150+
</div>
151+
<div class="swiper-slide 5" style="background-image:url(https://swiperjs.com/demos/images/nature-5.jpg)">
152+
</div>
153+
<div class="swiper-slide 6" style="background-image:url(https://swiperjs.com/demos/images/nature-5.jpg)">
154+
</div>
155+
<div class="swiper-slide 7" style="background-image:url(https://swiperjs.com/demos/images/nature-5.jpg)">
156+
</div>
157+
</div>
158+
</div>
159+
160+
<div id="swiper-pagination-custom">
161+
162+
</div>
163+
164+
<div style="margin-top: 20px; text-align: center">
165+
<button type="button" onclick="goToSlide()">Go to slide 4</button>
166+
</div>
167+
</div>
168+
169+
<div style="margin-top: 30px">
170+
What is Lorem Ipsum?
171+
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
172+
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
173+
type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining
174+
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
175+
passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
176+
177+
Why do we use it?
178+
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its
179+
layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to
180+
using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web
181+
page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web
182+
sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on
183+
purpose (injected humour and the like).
184+
185+
186+
Where does it come from?
187+
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin
188+
literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College
189+
in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through
190+
the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections
191+
1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.
192+
This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum,
193+
"Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
194+
195+
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and
196+
1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied
197+
by English versions from the 1914 translation by H. Rackham.
198+
199+
Where can I get some?
200+
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some
201+
form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a
202+
passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the
203+
Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true
204+
generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence
205+
structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from
206+
repetition, injected humour, or non-characteristic words etc.
207+
</div>
208+
209+
210+
<script>
211+
var galleryThumbsV = new Swiper('.gallery-thumbs-v', {
212+
direction: 'vertical',
213+
spaceBetween: 10,
214+
slidesPerView: 4,
215+
freeMode: true,
216+
watchSlidesVisibility: true,
217+
watchSlidesProgress: true,
218+
});
219+
var galleryThumbs = new Swiper('.gallery-thumbs', {
220+
spaceBetween: 10,
221+
slidesPerView: 4,
222+
freeMode: true,
223+
watchSlidesVisibility: true,
224+
watchSlidesProgress: true,
225+
});
226+
var itemOnRow = 4;
227+
var itemOnPage = 2;
228+
var itemLength = 7;
229+
var loop = true;
230+
var galleryTop = new Swiper('.gallery-top', {
231+
spaceBetween: 10,
232+
loop: loop,
233+
slidesPerView: itemOnRow,
234+
slidesPerGroup: itemOnPage,
235+
speed: 800,
236+
a11y: {
237+
paginationBulletMessage: 'Go to slide {{index}}',
238+
},
239+
pagination: {
240+
el: '.swiper-pagination',
241+
clickable: true,
242+
renderBullet: function (index, classname) {
243+
return "<span style=\"display: inline-block !important; width: auto; height: auto; margin: 3px\" class=\"gt_control-pagination-item " + classname + " \">" +
244+
"<button>" + index + "</button>" +
245+
"</span>";
246+
}
247+
},
248+
navigation: {
249+
nextEl: '.swiper-button-next',
250+
prevEl: '.swiper-button-prev',
251+
},
252+
thumbs: {
253+
swiper: galleryThumbsV
254+
}
255+
});
256+
257+
var $slideCustom = document.getElementById('swiper-pagination-custom');
258+
if(loop) {
259+
for(var i = 0; i < galleryTop.pagination.bullets.length; i++) {
260+
var dot = document.createElement('button');
261+
var realIndex = i * itemOnPage;
262+
var itemClone = 2 * itemOnPage;
263+
var sliderItemLength = itemLength + itemClone;
264+
if ( realIndex > Math.ceil(sliderItemLength / itemOnPage)) {
265+
realIndex = Math.ceil(sliderItemLength / itemOnPage);
266+
}
267+
dot.setAttribute('data-index', realIndex);
268+
dot.innerHTML = i;
269+
if(realIndex == galleryTop.realIndex) {
270+
dot.classList.add('active');
271+
}
272+
dot.addEventListener('click', function (){
273+
var index = this.getAttribute('data-index');
274+
console.log("index", index);
275+
galleryTop.slideToLoop(Number(index));
276+
})
277+
$slideCustom.append(dot);
278+
}
279+
280+
galleryTop.on('slideChange', function () {
281+
var dotLength = $slideCustom.children.length;
282+
for(var i = 0; i < dotLength; i++) {
283+
$slideCustom.children[i].classList.remove('active');
284+
}
285+
286+
for(var i = 0; i < dotLength; i++) {
287+
if($slideCustom.children[i].getAttribute('data-index') == galleryTop.realIndex) {
288+
var dotActive = $slideCustom.children[i];
289+
dotActive.classList.add('active');
290+
break;
291+
}
292+
}
293+
})
294+
} else {
295+
for(var i = 0; i < galleryTop.pagination.bullets.length; i++) {
296+
var dot = document.createElement('button');
297+
var realIndex = i * itemOnPage;
298+
var nextItemActiveTotal = (i + 1) * itemOnPage;
299+
if(nextItemActiveTotal > itemLength) {
300+
var diff = itemOnPage - (itemLength - realIndex);
301+
realIndex = realIndex - diff;
302+
}
303+
dot.setAttribute('data-index', realIndex);
304+
dot.innerHTML = i;
305+
if(realIndex == galleryTop.activeIndex) {
306+
dot.classList.add('active');
307+
}
308+
dot.addEventListener('click', function (){
309+
var index = this.getAttribute('data-index');
310+
galleryTop.slideTo(Number(index));
311+
})
312+
$slideCustom.append(dot);
313+
}
314+
315+
galleryTop.on('slideChange', function () {
316+
var dotLength = $slideCustom.children.length;
317+
for(var i = 0; i < dotLength; i++) {
318+
$slideCustom.children[i].classList.remove('active');
319+
}
320+
321+
for(var i = 0; i < dotLength; i++) {
322+
if($slideCustom.children[i].getAttribute('data-index') == galleryTop.activeIndex) {
323+
var dotActive = $slideCustom.children[i];
324+
dotActive.classList.add('active');
325+
break;
326+
}
327+
}
328+
})
329+
}
330+
331+
function goToSlide() {
332+
galleryTop.slideTo(5);
333+
}
334+
335+
336+
337+
338+
339+
</script>
340+
</body>
341+
342+
</html>

‎src/components/pagination/pagination.js

+7-1
Original file line numberDiff line numberDiff line change
@@ -270,7 +270,13 @@ const Pagination = {
270270
}
271271

272272
if (params.clickable) {
273-
$el.on('click', `.${params.bulletClass.replace(/ /g, '.')}}`, function onClick(e) {
273+
$el.on('mousemove', `.${params.bulletClass}`, () => {
274+
swiper.allowTouchMove = false;
275+
});
276+
$el.on('mouseout', `.${params.bulletClass}`, () => {
277+
swiper.allowTouchMove = true;
278+
});
279+
$el.on('click', `.${params.bulletClass}`, function onClick(e) {
274280
e.preventDefault();
275281
let index = $(this).index() * swiper.params.slidesPerGroup;
276282
if (swiper.params.loop) index += swiper.loopedSlides;

0 commit comments

Comments
 (0)