├── .gitignore
├── README.md
├── _demos
├── _benchmarks
│ └── _general
│ │ ├── _css
│ │ ├── common.css
│ │ └── default.css
│ │ ├── _js
│ │ └── common.js
│ │ └── index.html
├── _examples
│ ├── 1-Default
│ │ └── index.html
│ ├── 10-Multislide-Visible-Next-Prev
│ │ ├── _css
│ │ │ ├── common.css
│ │ │ └── default.css
│ │ └── index.html
│ ├── 11-200-Slides
│ │ └── index.html
│ ├── 12-image-slides
│ │ └── index.html
│ ├── 13-full-width-image-slides
│ │ └── index.html
│ ├── 14-Full-Screen
│ │ ├── _css
│ │ │ ├── common.css
│ │ │ └── default.css
│ │ └── index.html
│ ├── 15-Buffer-Slides
│ │ ├── _css
│ │ │ ├── common.css
│ │ │ └── default.css
│ │ └── index.html
│ ├── 16-Site-Demo
│ │ ├── 1-v1
│ │ │ ├── _css
│ │ │ │ ├── common.css
│ │ │ │ └── default.css
│ │ │ ├── _fonts
│ │ │ │ └── norican
│ │ │ │ │ └── Norican-Regular.ttf
│ │ │ └── index.html
│ │ └── 2-v2
│ │ │ ├── _css
│ │ │ ├── common.css
│ │ │ └── default.css
│ │ │ ├── _fonts
│ │ │ └── norican
│ │ │ │ └── Norican-Regular.ttf
│ │ │ └── index.html
│ ├── 17-Custom-Snap-Groups
│ │ └── 1-Basic
│ │ │ └── index.html
│ ├── 18-RTL
│ │ └── index.html
│ ├── 2-Rotating-Banner
│ │ └── index.html
│ ├── 3-Photo-Gallery
│ │ └── index.html
│ ├── 4-Embedded-HTML
│ │ └── index.html
│ ├── 5-Double-Slider-Gallery
│ │ └── index.html
│ ├── 6-Double-Slider-2
│ │ ├── _css
│ │ │ ├── common.css
│ │ │ └── default.css
│ │ └── index.html
│ ├── 7-Centered-Slides
│ │ ├── 1-Images
│ │ │ ├── _css
│ │ │ │ ├── common.css
│ │ │ │ └── default.css
│ │ │ └── index.html
│ │ ├── 2-Background-Images
│ │ │ ├── _css
│ │ │ │ ├── common.css
│ │ │ │ └── default.css
│ │ │ └── index.html
│ │ ├── 3-Short-Slides
│ │ │ ├── _css
│ │ │ │ ├── common.css
│ │ │ │ └── default.css
│ │ │ └── index.html
│ │ └── 4-Images-With-Slide-Edges
│ │ │ ├── _css
│ │ │ ├── common.css
│ │ │ └── default.css
│ │ │ └── index.html
│ ├── 8-Full-Height-Plus-Footer
│ │ ├── _css
│ │ │ ├── common.css
│ │ │ └── default.css
│ │ └── index.html
│ └── 9-Full-Width-Responsive-Height
│ │ ├── 1-Basic
│ │ └── index.html
│ │ ├── 2-full-width
│ │ ├── _css
│ │ │ ├── common.css
│ │ │ └── default.css
│ │ └── index.html
│ │ └── 3-variable-width
│ │ └── index.html
├── _resources
│ ├── container-bg.jpg
│ ├── h-slider-1-l.jpg
│ ├── h-slider-1-thumb.jpg
│ ├── h-slider-1.jpg
│ ├── h-slider-2-l.jpg
│ ├── h-slider-2-thumb.jpg
│ ├── h-slider-2.jpg
│ ├── h-slider-3-l.jpg
│ ├── h-slider-3-thumb.jpg
│ ├── h-slider-3.jpg
│ ├── h-slider-4-l.jpg
│ ├── h-slider-4-thumb.jpg
│ ├── h-slider-4.jpg
│ ├── h-slider-5-l.jpg
│ ├── h-slider-5.jpg
│ ├── selector-shadow.png
│ └── slider-buttons.png
└── _test-cases
│ └── Issue-244
│ └── index.html
├── _lib
├── jquery-1.4.min.js
├── jquery-1.7.min.js
├── jquery-1.8.2.min.js
└── jquery.easing-1.3.js
├── _src
├── jquery.iosslider.js
└── jquery.iosslider.min.js
└── component.json
/.gitignore:
--------------------------------------------------------------------------------
1 |
2 | _src/jquery.iosslider.demo.js
3 |
4 | _src/jquery.iosslider.demo.min.js
5 |
6 | _src/anti-piracy.js
7 |
8 | zsh/
9 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | iosslider – Touch Enabled, Responsive jQuery Horizontal Content Slider/Carousel/Image Gallery Pluginiosslider is a jQuery plugin which allows you to integrate a customizable, cross-browser content slider into your web presence. Designed for use as a content slider , carousel , scrolling website banner , or image gallery .
4 |
5 | Features
6 |
7 |
8 | Hardware accelerated - Using CSS3 for supported iOS, Surface, Android and WebKit browsers.
9 | Responsive support - To work with the most dynamic desktop and mobile sites.
10 | Non-intrusive JavaScript - Respects your code first. No unnecessary CSS attribute overrides or event bindings.
11 | Tons of API callbacks - To get the perfect slider feel for your web application.
12 | FF/Safari/Chrome/IE7+ - Full modern browser support for desktop.
13 | iOS/Surface/Android - Support for a wide range of mobile operating systems and platforms.
14 | Infinitely looping - Loop through your slides endlessly in both directions.
15 | Auto-sliding - Set your slider to automatically transition and pause on hover.
16 | Custom scrollbars - Over a dozen settings to control placement, look and feel, and user interaction.
17 | Slide Navigation - Built-in support for slide indicators and next/previous buttons.
18 | Robust demo package - Download package includes working examples of all features.
19 | First class service - Your license includes premium customer service from experienced plugin developers.
20 |
21 |
22 | Browser Support Details
23 |
24 | iOS - iPhone / iPad / iPod Touch
25 |
26 |
27 |
28 |
32 |
33 | Browser
34 | Version
35 |
36 |
37 |
38 |
39 |
40 | Safari
41 | 4.0+
42 |
43 |
44 | Chrome
45 | 19.0+
46 |
47 |
48 |
49 |
50 | Surface - Multi-platform
51 |
52 |
53 |
54 |
58 |
59 | Browser
60 | Version
61 |
62 |
63 |
64 |
65 |
66 | Internet Explorer
67 | 10+
68 |
69 |
70 |
71 |
72 | Desktop - Windows / Mac
73 |
74 |
75 |
76 |
80 |
81 | Browser
82 | Version
83 |
84 |
85 |
86 |
87 |
88 | Firefox
89 | 5.0+
90 |
91 |
92 | Chrome
93 | 19.0+
94 |
95 |
96 | Safari
97 | 5.0+
98 |
99 |
100 | Internet Explorer
101 | 7+
102 |
103 |
104 |
105 |
106 | Android - Multi-platform
107 |
108 |
109 |
110 |
114 |
115 | Browser
116 | Version
117 |
118 |
119 |
120 |
121 |
122 | Stock
123 | 2.3+
124 |
125 |
126 | Firefox
127 | 18.0+
128 |
129 |
130 | Chrome
131 | 19.0+
132 |
133 |
134 | Opera
135 | 12.0+
136 |
137 |
138 |
139 |
140 | iosslider may work in earlier versions of browsers listed, but are not supported at this time.
141 |
142 | Getting Ready
145 |
146 | To get started, you will need to download the iosslider script. The download package contains the iosslider script, the jQuery library, demos and benchmarks.
147 |
148 | Include the Necessary JavaScript Files
149 |
150 | The jQuery library and iosslider Plugin scripts must be included in the HTML header of the web page. The jQuery library must be included first for the iosslider plugin to function.
151 |
152 |
153 | <!-- jQuery library -->
154 | <script type = 'text/javascript' src = 'jquery-1.4.min.js'></script>
155 |
156 | <!-- iosslider plugin -->
157 | <script type = 'text/javascript' src = 'jquery.iosslider.js'></script>
158 |
159 |
160 | Add the HTML
161 |
162 | Add the iosslider HTML code within the body of the web page. The HTML can contain as little as one slide element.
163 |
164 |
165 | <div class = 'iosslider'>
166 |
167 | <!-- slider -->
168 | <div class = 'slider'>
169 |
170 | <!-- slides -->
171 | <div class = 'slide'>...</div>
172 | <div class = 'slide'>...</div>
173 | <div class = 'slide'>...</div>
174 |
175 | </div>
176 |
177 | </div>
178 |
179 |
180 | Add the CSS
181 |
182 | Place the CSS in your stylesheet. The required CSS attributes are included to guarantee optimal performance. Feel free to apply as many other CSS attributes as you want. To see some real-world examples of this, check the demos folder of the iosslider download package.
183 |
184 |
185 | /* slider container */
186 | .iosSlider {
187 | /* required */
188 | position: relative;
189 | top: 0;
190 | left: 0;
191 | overflow: hidden;
192 |
193 | width: px;
194 | height: px;
195 | }
196 |
197 | /* slider */
198 | .iosSlider .slider {
199 | /* required */
200 | width: 100%;
201 | height: 100%;
202 | }
203 |
204 | /* slide */
205 | .iosSlider .slider .slide {
206 | /* required */
207 | float: left;
208 |
209 | width: px;
210 | height: px;
211 | }
212 |
213 |
214 | Add the JavaScript
215 |
216 | Add the code below to your JavaScript file. The following code uses the jQuery selector to initialize the iosslider jQuery plugin. If you are unfamiliar with jQuery, here is a tutorial to get you started.
217 |
218 |
219 | $(document).ready(function() {
220 |
221 | /* basic - default settings */
222 | $('.iosSlider').iosSlider();
223 |
224 | /* some custom settings */
225 | $('.iosSlider').iosSlider({
226 | snapToChildren: true,
227 | scrollbar: true,
228 | scrollbarHide: false,
229 | desktopClickDrag: true,
230 | scrollbarLocation: 'bottom',
231 | scrollbarHeight: '6px',
232 | scrollbarBackground: 'url(_img/some-img.png) repeat 0 0',
233 | scrollbarBorder: '1px solid #000',
234 | scrollbarMargin: '0 30px 16px 30px',
235 | scrollbarOpacity: '0.75',
236 | onSlideChange: changeSlideIdentifier
237 | });
238 |
239 | });
240 |
241 |
242 | You can pass along any of the following key/value pairs listed below to the iosSlider() function or modify them within the iosslider JavaScript file directly.
245 |
246 | Basic Settings & Options
247 |
248 |
249 |
250 |
251 |
252 | Key
253 | Value
254 | Description
255 |
256 |
257 |
258 |
259 |
260 | elasticPullResistance
261 | 0.6
262 | (decimal, 0.0 - 1.0) The elastic resistance when pulling on the slider edge.
263 |
264 |
265 | frictionCoefficient
266 | 0.92
267 | (decimal, 0.0 - 1.0) The friction coefficient applied to the momentum on touch release affecting the rate of deceleration.
268 |
269 |
270 | elasticFrictionCoefficient
271 | 0.6
272 | (decimal, 0.0 - 1.0) Additonal friction coefficient applied when momentum slides outside the bounds of the slider.
273 |
274 |
275 | snapFrictionCoefficient
276 | 0.92
277 | (decimal, 0.0 - 1.0) Friction applied to the slider when snapping to an element.
278 |
279 |
280 | snapToChildren
281 | false
282 | (boolean) Slider will slide to the closest child element on touch release.
283 |
284 |
285 | snapSlideCenter
286 | false
287 | (boolean) When snapToChildren is true, this option will snap the slide to the center of the draggable area.
288 |
289 |
290 | startAtSlide
291 | 1
292 | (integer) Current slide when slider is initially loaded.
293 |
294 |
295 | scrollbar
296 | false
297 | (boolean) Show or hide the scrollbar.
298 |
299 |
300 | scrollbarDrag
301 | false
302 | (boolean) Enables click/drag, touch/drag functionality on the scrollbar. When enabled, the options scrollbar and scrollbarHide are automatically set to true and false respectively.
303 |
304 |
305 | scrollbarHide
306 | true
307 | (boolean) Show or hide the scrollbar when it is idle.
308 |
309 |
310 | scrollbarLocation
311 | 'top'
312 | (string, 'bottom' or 'top') Location that the scrollbar will appear.
313 |
314 |
315 | scrollbarContainer
316 | ''
317 | (string) A jQuery selection (ex. $('#scrollbarContainer') ), the scrollbar will be loaded and contained by this selection. The scrollbar width will be defined by this container.
318 |
319 |
320 | scrollbarOpacity
321 | 0.4
322 | (decimal) The css opacity of the scrollbar when visible.
323 |
324 |
325 | scrollbarHeight
326 | '4px'
327 | (string) The css height in 'px' of the scrollbar.
328 |
329 |
330 | scrollbarBorder
331 | 'none'
332 | (string) The css border of the scrollbar.
333 |
334 |
335 | scrollbarMargin
336 | '5px'
337 | (string) The css margin of the scrollbar.
338 |
339 |
340 | scrollbarBackground
341 | 'none'
342 | (string) The css background of the scrollbar.
343 |
344 |
345 | scrollbarBorderRadius
346 | '100px'
347 | (string) The css border-radius of the scrollbar.
348 |
349 |
350 | scrollbarShadow
351 | 'none'
352 | (string) The css box-shadow of the scrollbar.
353 |
354 |
355 | scrollbarElasticPullResistance
356 | 0.9
357 | (decimal, 0.0 - 1.0) Additonal friction coefficient applied to the scrollbar when momentum/user moves slides outside the bounds of the slider.
358 |
359 |
360 | desktopClickDrag
361 | false
362 | (boolean) Desktop click and drag fallback for the desktop slider.
363 |
364 |
365 | keyboardControls
366 | false
367 | (boolean) Left/right keyboard arrows can be used to navigate the slider.
368 |
369 |
370 | tabToAdvance
371 | false
372 | (boolean) Tab key can be used to navigate the slider forward.
373 |
374 |
375 | responsiveSlideContainer
376 | true
377 | (boolean) Width of slide container becomes responsive to the width/height of its parent element. Slide container dynamically collapse to the width/height of the parent element when wider/taller.
378 |
379 |
380 | responsiveSlides
381 | true
382 | (boolean) Width of slides becomes responsive to the width/height of its parent element. Slides dynamically collapse to the width/height of the parent element of the slider when wider/taller.
383 |
384 |
385 | navSlideSelector
386 | null
387 | (string) A jQuery selection (ex. $('.navButtons .button') ), each element returned by the selector will activate navigation to each slide respectively. ie. element 0 when clicked (or touched) will animate to the first slide and so on.
388 |
389 |
390 | navPrevSelector
391 | null
392 | (string) A jQuery selection (ex. $('#previousSlide') ), the element returned by the selector will navigate to the previous slide when clicked.
393 |
394 |
395 | navNextSelector
396 | null
397 | (string) A jQuery selection (ex. $('#nextSlide') ), the element returned by the selector will navigate to the next slide when clicked.
398 |
399 |
400 | autoSlide
401 | false
402 | (boolean) Enables automatic cycling through slides.
403 |
404 |
405 | autoSlideTimer
406 | 5000
407 | (integer) the time (in milliseconds) that a slide will wait before automatically navigating to the next slide.
408 |
409 |
410 | autoSlideTransTimer
411 | 750
412 | (integer) the time (in milliseconds) required for all automatic animations to move between slides. See navSlideSelector , navPrevSelector , navNextSelector for details on activating elements for automatic sliding.
413 |
414 |
415 | autoSlideToggleSelector
416 | null
417 | (string) A jQuery selection (ex. $('#autoScrollToggle') ), the element returned by the selector will disable/enable automatic scrolling when clicked. Note: Only works when autoSlide is set to 'true'.
418 |
419 |
420 | autoSlideHoverPause
421 | true
422 | (boolean) Enables pausing of the autoSlide function when the user mouses over the slider area.
423 |
424 |
425 | infiniteSlider
426 | false
427 | (boolean) Makes the slider loop in both directions infinitely with no end. When set to true, the option scrollbar is automatically disabled.
428 |
429 |
430 | snapVelocityThreshold
431 | 5
432 | Minimum slide velocity threshold required to trigger slide snapping to next/previous slide.
433 |
434 |
435 | slideStartVelocityThreshold
436 | 0
437 | Minimum slide velocity threshold required to begin slider movement.
438 |
439 |
440 | horizontalSlideLockThreshold
441 | 5
442 | Minimum slide velocity threshold required to lock vertical sliding in the browser.
443 |
444 |
445 | verticalSlideLockThreshold
446 | 3
447 | Minimum slide velocity threshold required to lock horizontal slider movement.
448 |
449 |
450 | stageCSS
451 | { position: 'relative', top: '0', left: '0', overflow: 'hidden', zIndex: 1 }
452 | (object) The customizable CSS of the stage object.
453 |
454 |
455 |
456 | sliderCSS
457 | { overflow: 'hidden' }
458 | (object) The customizable CSS of the slider object.
459 |
460 |
461 |
462 | unselectableSelector
463 | null
464 | (string) A jQuery selection (ex. $('.unselectable') ), each element returned by the selector will become removed from touch/click move events.
465 |
466 |
467 |
468 |
469 | Advanced Settings & Options
470 |
471 | Advanced callbacks allow further customization through end user created functions/hooks. For additional information regarding parameters supplied to these callbacks, see parameter object details directly below the following table.
472 |
473 |
474 |
475 |
476 |
477 | Key
478 | Value
479 | Description
480 |
481 |
482 |
483 |
484 |
485 | onSliderLoaded
486 | null
487 | (function) Executed when slider has finished loading initially.
488 |
489 |
490 | onSliderUpdate
491 | null
492 | (function) Executed when public method 'update' has been completed.
493 |
494 |
495 | onSliderResize
496 | null
497 | (function) Executed when the window has been resized or a device has been rotated.
498 |
499 |
500 | onSlideStart
501 | null
502 | (function) Executed when the slider has begun to move.
503 |
504 |
505 | onSlideChange
506 | null
507 | (function) Executed when the slider has entered the range of a new slide.
508 |
509 |
510 | onSlideComplete
511 | null
512 | (function) Executed when the slider has come to a stop on a new slide.
513 |
514 |
515 |
516 |
517 | Callback Parameter Object Details
518 |
519 | All callback functions listed above return the same object, for our example, we will call this object 'args'.
520 |
521 |
522 | args = {
523 | settings: {
524 | /* all basic/advanced settings & options from above */
525 | },
526 | data: {
527 | obj,
528 | settings,
529 | scrollerNode,
530 | numberOfSlides,
531 | sliderNumber,
532 | childrenOffsets,
533 | sliderMax,
534 | scrollbarClass,
535 | scrollbarWidth,
536 | scrollbarStageWidth,
537 | stageWidth,
538 | scrollMargin,
539 | scrollBorder,
540 | infiniteSliderOffset,
541 | infiniteSliderWidth
542 | },
543 | sliderObject,
544 | sliderContainerObject,
545 | targetSlideObject,
546 | targetSlideNumber,
547 | currentSlideObject,
548 | currentSlideNumber,
549 | currentSliderOffset
550 | }
551 |
552 |
553 | Accessing callback parameter data following the above object structure.
554 |
555 |
556 | $('.iosSlider').iosSlider({
557 | onSlideChange: someCallback
558 | });
559 |
560 | function someCallback(args) {
561 |
562 | /* accessing user defined settings from initialization */
563 | var autoSlideToggleSelector = args.settings.autoSlideToggleSelector;
564 |
565 | /* accessing data from the slider object */
566 | var sliderMax = args.data.sliderMax;
567 |
568 | /* additional calculated variables supplied to the 'args' object */
569 | var currentSlideNumber = args.currentSlideNumber;
570 |
571 | }
572 |
573 |
574 | jQuery .data() Object Details
575 |
576 | Additional public information is stored using the jQuery.data() object. For usage and access instructions, please consult the jQuery.data() object reference .
577 |
578 |
579 | /* General variables. These variables are set during initialization,
580 | * window resize, orientation change, and via the 'update' public method
581 | */
582 | $('.iosSlider').data('iosslider', {
583 | obj,
584 | settings,
585 | scrollerNode,
586 | numberOfSlides,
587 | sliderNumber,
588 | childrenOffsets,
589 | sliderMax,
590 | scrollbarClass,
591 | scrollbarWidth,
592 | scrollbarStageWidth,
593 | stageWidth,
594 | scrollMargin,
595 | scrollBorder,
596 | infiniteSliderOffset,
597 | infiniteSliderWidth
598 | });
599 |
600 | /* Dynamic variables. These variables are updated with every user interaction. */
601 | $('.iosSlider').data('args', {
602 | sliderObject,
603 | sliderContainerObject,
604 | slideChanged,
605 | prevSlideNumber,
606 | prevSliderOffset
607 | targetSlideObject,
608 | targetSlideNumber,
609 | currentSlideObject,
610 | currentSlideNumber,
611 | currentSliderOffset
612 | });
613 |
614 |
615 |
618 |
619 |
620 | Method
621 | Description
622 |
623 |
624 |
625 |
626 |
627 | $(element).iosSlider('destroy');
628 | Destroys the selected slider.Optional parameter: 'clearStyle' (boolean, default: true) when iosslider is destroyed, all inline style applied to the slider will be removed.
629 |
630 |
631 |
632 | $(element).iosSlider('goToSlide', slideNum);
633 | Moves to the selected slide.Required parameter: 'slideNumber' (integer, default: null)
634 |
635 |
636 |
637 | $(element).iosSlider('prevSlide', slideNum);
638 | Slides to the previous slide.
639 |
640 |
641 |
642 | $(element).iosSlider('nextSlide', slideNum);
643 | Slides to the next slide.
644 |
645 |
646 |
647 | $(element).iosSlider('update');
648 | Updates/reinitializes internal variables/CSS attributes based on changes to the HTML/CSS/JS structure of the slider.
649 |
650 |
651 |
652 | $(element).iosSlider('addSlide', slideHTML, slidePosition);
653 | Adds a slide defined by 'slideHTML' and placed at position 'slidePosition'.Required parameters: 'slideHTML' (string, default: null), 'slidePosition' (integer, default: null)
654 |
655 |
656 |
657 | $(element).iosSlider('removeSlide', slideNum);
658 | Removes a slide from the slider.Required parameter: 'slideNumber' (integer, default: null)
659 |
660 |
661 |
662 | $(element).iosSlider('lock');
663 | Locks the slider. Temporarily disabling touch/drag events within the slider without unbinding them.
664 |
665 |
666 |
667 | $(element).iosSlider('unlock');
668 | Unlocks the slider. Enables touch/drag events previously disabled by the lock method.
669 |
670 |
671 |
672 | $(element).iosSlider('autoSlidePlay');
673 | Starts and enables auto-sliding on the slider.
674 |
675 |
676 |
677 | $(element).iosSlider('autoSlidePause');
678 | Stops the slider from auto-sliding.
679 |
680 |
681 |
682 |
683 | Licensing options can be found at http://iosscripts.com/iosslider/#licensing
686 |
687 | Help & Support
688 |
689 | Product Support
690 |
691 | Need help setting up one of our plugins? Drop us a line and we'll do our best to help.
692 |
693 | Access support
694 |
695 | Feature Request
696 |
697 | If you have an idea for a new feature or if our plugins are missing something your application needs, tell us about it and we'll consider adding it!
698 |
699 | Submit request
700 |
701 | Report a Bug
702 |
703 | If you think you might have found a bug in one of our plugins, let us know. We'll take a look under the hood and see if we can fix it.
704 |
705 | Submit a bug
--------------------------------------------------------------------------------
/_demos/_benchmarks/_general/_css/default.css:
--------------------------------------------------------------------------------
1 |
2 | /*
3 | ----------------------------------------------------------------------------------
4 | Default css
5 | ----------------------------------------------------------------------------------
6 | */
7 |
8 | /* Reset all of the document's element styles to zero... */
9 |
10 | html, body, div, span, applet, object, iframe,
11 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
12 | a, abbr, acronym, address, big, cite, code,
13 | del, dfn, em, font, img, ins, kbd, q, s, samp,
14 | small, strike, strong, sub, sup, tt, var,
15 | b, u, i, center,
16 | dl, dt, dd, ol, ul, li,
17 | fieldset, form, label, legend,
18 | table, caption, tbody, tfoot, thead, tr, th, td {
19 | margin: 0;
20 | padding: 0;
21 | border: 0;
22 | outline: 0;
23 | font-size: 100%;
24 | vertical-align: baseline;
25 | background: transparent;
26 | }
27 | body {
28 | line-height: 1;
29 | }
30 | ol, ul {
31 | list-style: none;
32 | }
33 | blockquote, q {
34 | quotes: none;
35 | }
36 | blockquote:before, blockquote:after,
37 | q:before, q:after {
38 | content: '';
39 | content: none;
40 | }
41 |
42 | /* remember to define focus styles! */
43 | :focus {
44 | outline: 0;
45 | }
46 |
47 | /* remember to highlight inserts somehow! */
48 | ins {
49 | text-decoration: none;
50 | }
51 | del {
52 | text-decoration: line-through;
53 | }
54 |
55 | /* tables still need 'cellspacing="0"' in the markup */
56 | table {
57 | border-collapse: collapse;
58 | border-spacing: 0;
59 | }
60 |
61 |
62 |
63 | /* Clearing Floats Class STARTS */
64 | .Wrapper {
65 | display: inline-block;}
66 | .Wrapper:after {
67 | Content: "."; display: block; height: 0; clear: both; visibility: hidden;}
68 | * html .Wrapper {
69 | height: 1%; }
70 | .Wrapper {
71 | display: block;}
72 | /* Clearing Floats Class ENDS */
73 |
74 |
75 |
76 |
77 |
78 | /* */
79 |
80 | .hide, .Hide {
81 | display: none;}
82 | .clear {
83 | width: 100%; height: 1px; clear: both; display: block; overflow: hidden;}
84 |
85 |
--------------------------------------------------------------------------------
/_demos/_benchmarks/_general/_js/common.js:
--------------------------------------------------------------------------------
1 | $(document).ready(function() {
2 |
3 | $('.debug #touch').html('isTouch: ' + ('ontouchstart' in window) + ' ');
4 | $('.debug #orientation').html('orientationChange: ' + ('onorientationchange' in window) + ' ');
5 | $('.debug #css3dTransform').html('css3dTransform: ' + hasCss3dTransform() + ' ');
6 |
7 | $('.default-slider').iosSlider({
8 | desktopClickDrag: true,
9 | navNextSelector: $('.default-slider .next'),
10 | navPrevSelector: $('.default-slider .prev')
11 | });
12 |
13 | $('.default-slider-container .goToBlock .go').each(function(i) {
14 | $(this).bind('click', function() {
15 | $('.default-slider').iosSlider('goToSlide', i + 1);
16 | });
17 | });
18 |
19 | $('.snap-slider').iosSlider({
20 | desktopClickDrag: true,
21 | snapToChildren: true
22 | });
23 |
24 | $('.infinite-slider').iosSlider({
25 | desktopClickDrag: true,
26 | snapToChildren: true,
27 | infiniteSlider: true
28 | });
29 |
30 | $('.responsive-slider').iosSlider({
31 | desktopClickDrag: true,
32 | snapToChildren: true,
33 | infiniteSlider: true,
34 | responsiveSlideContainer: false
35 | });
36 |
37 | $('.responsive-slider-2').iosSlider({
38 | desktopClickDrag: true,
39 | snapToChildren: true,
40 | infiniteSlider: true,
41 | responsiveSlides: false
42 | });
43 |
44 | $('.autoslide-slider1').iosSlider({
45 | desktopClickDrag: true,
46 | snapToChildren: true,
47 | autoSlide: true,
48 | startAtSlide: '2',
49 | scrollbar: true
50 | });
51 |
52 | $('.autoslide-slider2').iosSlider({
53 | desktopClickDrag: true,
54 | snapToChildren: true,
55 | infiniteSlider: true,
56 | autoSlide: true,
57 | startAtSlide: '2',
58 | scrollbar: true,
59 | navNextSelector: $('.autoslide-slider2 .next'),
60 | navPrevSelector: $('.autoslide-slider2 .prev')
61 | });
62 |
63 | $('.autoslide-slider2-container .goToBlock .go').each(function(i) {
64 | $(this).bind('click', function() {
65 | $('.autoslide-slider2').iosSlider('goToSlide', i + 1);
66 | });
67 | });
68 |
69 | $('.autoslide-slider4').iosSlider({
70 | desktopClickDrag: true,
71 | snapToChildren: true,
72 | infiniteSlider: true,
73 | autoSlide: false,
74 | autoSlideTimer: 2000,
75 | startAtSlide: '2',
76 | scrollbar: true,
77 | navNextSelector: $('.autoslide-slider4 .next'),
78 | navPrevSelector: $('.autoslide-slider4 .prev'),
79 | autoSlideToggleSelector: $('.autoslide-slider6-container .goToBlock .go').eq(2)
80 | });
81 |
82 | $('.autoslide-slider4-container .goToBlock .go').eq(0).bind('click', function() {
83 |
84 | $('.autoslide-slider4').iosSlider('autoSlidePlay');
85 |
86 | });
87 |
88 | $('.autoslide-slider4-container .goToBlock .go').eq(1).bind('click', function() {
89 |
90 | $('.autoslide-slider4').iosSlider('autoSlidePause');
91 |
92 | });
93 |
94 | $('.autoslide-slider5').iosSlider({
95 | desktopClickDrag: true,
96 | snapToChildren: true,
97 | infiniteSlider: true,
98 | autoSlide: true,
99 | autoSlideTimer: 2000,
100 | startAtSlide: '2',
101 | scrollbar: true,
102 | navNextSelector: $('.autoslide-slider4 .next'),
103 | navPrevSelector: $('.autoslide-slider4 .prev'),
104 | autoSlideToggleSelector: $('.autoslide-slider5-container .goToBlock .go:eq(2)')
105 | });
106 |
107 | $('.autoslide-slider5-container .goToBlock .go').eq(0).bind('click', function() {
108 |
109 | $('.autoslide-slider5').iosSlider('autoSlidePlay');
110 |
111 | });
112 |
113 | $('.autoslide-slider5-container .goToBlock .go').eq(1).bind('click', function() {
114 |
115 | $('.autoslide-slider5').iosSlider('autoSlidePause');
116 |
117 | });
118 |
119 | $('.variable-width-slider').iosSlider({
120 | desktopClickDrag: true,
121 | snapToChildren: true
122 | });
123 |
124 | $('.short-width-slider').iosSlider({
125 | desktopClickDrag: true,
126 | snapToChildren: true
127 | });
128 |
129 | $('.short-width-slider-2').iosSlider({
130 | desktopClickDrag: true,
131 | snapToChildren: true,
132 | infiniteSlider: true,
133 | navNextSelector: '.short-width-slider-2 .next',
134 | navPrevSelector: '.short-width-slider-2 .prev'
135 | });
136 |
137 | $('.short-width-slider-3').iosSlider({
138 | desktopClickDrag: true,
139 | snapToChildren: true
140 | });
141 |
142 | $('.autoslide-slider3').iosSlider({
143 | desktopClickDrag: true,
144 | snapToChildren: true,
145 | infiniteSlider: true,
146 | autoSlide: true,
147 | autoSlideTransTimer: 0,
148 | navNextSelector: $('.autoslide-slider3 .next'),
149 | navPrevSelector: $('.autoslide-slider3 .prev')
150 | });
151 |
152 | $('.destroy-slider').iosSlider({
153 | desktopClickDrag: true,
154 | snapToChildren: true,
155 | infiniteSlider: true,
156 | autoSlide: true,
157 | navNextSelector: $('.destroy-slider .next'),
158 | navPrevSelector: $('.destroy-slider .prev')
159 | });
160 |
161 | $('.destroy-slider-container .goToBlock .go').each(function(i) {
162 | $(this).bind('click', function() {
163 | $('.destroy-slider').iosSlider('goToSlide', i + 1);
164 | });
165 | });
166 |
167 | $('.destroy-slider-container .destInitBlock .dest').each(function(i) {
168 |
169 | $(this).bind('click', function() {
170 | $('.destroy-slider').iosSlider('destroy');
171 | });
172 |
173 | });
174 |
175 | $('.destroy-slider-container .destInitBlock .init').each(function(i) {
176 |
177 | $(this).bind('click', function() {
178 | $('.destroy-slider').iosSlider({
179 | desktopClickDrag: true,
180 | snapToChildren: true,
181 | infiniteSlider: true,
182 | autoSlide: true,
183 | navNextSelector: $('.destroy-slider .next'),
184 | navPrevSelector: $('.destroy-slider .prev')
185 | });
186 | });
187 |
188 | });
189 |
190 | $('.callback-slider').iosSlider({
191 | desktopClickDrag: true,
192 | snapToChildren: true,
193 | infiniteSlider: true,
194 | keyboardControls: true,
195 | navSlideSelector: $('.callback-slider .paging .box'),
196 | onSliderLoaded: callbackSliderLoadedChanged,
197 | onSlideChange: callbackSliderChanged,
198 | onSlideComplete: callbackSliderComplete,
199 | onSlideStart: callbackSliderStart,
200 | onSliderUpdate: callbackSliderUpdate
201 | });
202 |
203 | $('.callback-slider-container .destInitBlock .dest').each(function(i) {
204 |
205 | $(this).bind('click', function() {
206 | $('.callback-slider').iosSlider('destroy');
207 | });
208 |
209 | });
210 |
211 | $('.callback-slider-container .destInitBlock .update').each(function(i) {
212 |
213 | $(this).bind('click', function() {
214 | $('.callback-slider').iosSlider('update');
215 | });
216 |
217 | });
218 |
219 | $('.callback-slider-container .destInitBlock .init').each(function(i) {
220 |
221 | $(this).bind('click', function() {
222 | $('.callback-slider').iosSlider({
223 | desktopClickDrag: true,
224 | snapToChildren: true,
225 | infiniteSlider: true,
226 | autoSlide: true,
227 | navNextSelector: $('.destroy-slider .next'),
228 | navPrevSelector: $('.destroy-slider .prev')
229 | });
230 | });
231 |
232 | });
233 |
234 | $('.callback-slider-container .goToBlock .go').each(function(i) {
235 | $(this).bind('click', function() {
236 | $('.callback-slider').iosSlider('goToSlide', i + 1);
237 | });
238 | });
239 |
240 | $('.full-width-slider').iosSlider({
241 | desktopClickDrag: true,
242 | snapToChildren: true,
243 | infiniteSlider: true
244 | });
245 |
246 | $('.form-slider').iosSlider({
247 | desktopClickDrag: true,
248 | snapToChildren: true,
249 | infiniteSlider: true
250 | });
251 |
252 | $('.media-query-slider').iosSlider({
253 | desktopClickDrag: true,
254 | snapToChildren: true,
255 | infiniteSlider: true
256 | });
257 |
258 | $('.thirty-slider').iosSlider({
259 | desktopClickDrag: true,
260 | snapToChildren: true
261 | });
262 |
263 | $('.undefined-height-slider').iosSlider({
264 | desktopClickDrag: true,
265 | snapToChildren: true
266 | });
267 |
268 | $('.bind-event-slider .linkBlock').bind('click', function() {
269 | window.open('http://google.ca');
270 | });
271 |
272 | $('.bind-event-slider').iosSlider({
273 | desktopClickDrag: true,
274 | snapToChildren: true,
275 | infiniteSlider: true
276 | });
277 |
278 | $('.image-drag-slider').iosSlider({
279 | desktopClickDrag: true,
280 | snapToChildren: true,
281 | infiniteSlider: true
282 | });
283 |
284 | $('.add-remove-slide-slider').iosSlider({
285 | desktopClickDrag: true,
286 | snapToChildren: true,
287 | scrollbar: true,
288 | scrollbarHide: false
289 | });
290 |
291 | $('.short-content-slider').iosSlider({
292 | desktopClickDrag: true,
293 | snapToChildren: true
294 | });
295 |
296 | $('.add-remove-slide-slider-container .destInitBlock .add').bind('click', function() {
297 |
298 | var slide = $("
", {
299 | 'class': 'item item6'
300 | }).append($('
').css({
455 | 'webkitTransform': 'matrix(1,1,1,1,1,1)',
456 | 'MozTransform': 'matrix(1,1,1,1,1,1)',
457 | 'transform': 'matrix(1,1,1,1,1,1)'
458 | });
459 |
460 | if(testElement.attr('style') == '') {
461 | has3D = false;
462 | } else if(testElement.attr('style') != undefined) {
463 | has3D = true;
464 | }
465 |
466 | return has3D;
467 |
468 | }
--------------------------------------------------------------------------------
/_demos/_examples/1-Default/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Ex #1: Default
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
iosScripts/iosSlider demos - Multislide Visible Next/Prev Buttons
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
Ex #1: Default
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
Ex #12: Image Slides
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
Ex #12: Image Slides
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
iosScripts/iosSlider demos - Full Screen Slides
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
slider 1
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
iosScripts/iosSlider demos - Full Screen Slides
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
iosScripts.com demo
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
Touch Me.
109 |
110 |
Hardware accelerated using
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
Responsive.
119 |
120 |
Respond to change in browser
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
Flexible.
129 |
130 |
Run multiple sliders on
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
Cross-platform.
139 |
140 |
Support a wide variety of browsers
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
Customize.
149 |
150 |
Set momentum, elasticity,
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
179 |
180 |
181 |
182 |
--------------------------------------------------------------------------------
/_demos/_examples/16-Site-Demo/2-v2/_css/common.css:
--------------------------------------------------------------------------------
1 | .iosSliderDemo {
2 | clear: both;
3 | width: 100%;
4 | /* padding: 0 0 30% 0; */
5 | padding: 0 0 490px;
6 | margin: 0 0 -40px 0;
7 | position: relative;
8 | }
9 |
10 | .fluidHeight {
11 | position: absolute;
12 | width: 100%;
13 | height: 400px;
14 | padding: 45px 0;
15 | background: #363739 url(../_img/container-bg.jpg) repeat 50% 0;
16 | box-shadow: inset 0 3px 10px -4px #000, inset 0 -3px 10px -4px #000;
17 | }
18 |
19 | .sliderContainer {
20 | height: 100%;
21 | max-height: 400px;
22 | padding: 0 0;
23 | }
24 |
25 | .iosSlider {
26 | position: relative;
27 | top: 0;
28 | left: 0;
29 | overflow: hidden;
30 | width: 100%;
31 | height: 100%;
32 | }
33 |
34 | .iosSlider .slider {
35 | width: 100%;
36 | height: 100%;
37 | }
38 |
39 | .iosSlider .slider .item {
40 | width: 1200px;
41 | height: 100%;
42 | padding: 0 0 0 0;
43 | text-align: center;
44 | }
45 |
46 | .iosSlider .slider .item .inner {
47 | position: relative;
48 | top: 0;
49 | left: 0;
50 | width: 95%;
51 | margin: 0 auto;
52 | height: 100%;
53 | box-shadow: 0 0 10px -5px #000;
54 | background-position: 50% 0;
55 | background-repeat: no-repeat;
56 | }
57 |
58 | .iosSlider .slider .item .inner img {
59 | position: relative;
60 | top: 0;
61 | left: 0;
62 | width: 100%;
63 | margin: 0 auto;
64 | }
65 |
66 | .iosSlider .slider .item .inner .selectorShadow {
67 | position: absolute;
68 | left: 0;
69 | bottom: 0;
70 | background: url(../_img/selector-shadow.png) no-repeat 0 0;
71 | width: 120px;
72 | height: 30px;
73 | display: none;
74 | }
75 |
76 | .iosSlider .slider .item .inner .text1 {
77 | background: none repeat scroll 0 0 #000000;
78 | opacity: 0;
79 | filter: alpha(opacity=0);
80 | position: absolute;
81 | left: 100px;
82 | top: 30px;
83 | padding: 0 2px 0 7px;
84 | height: 75px;
85 | text-align: left;
86 | }
87 |
88 | .iosSlider .slider .item .inner .text1 span {
89 | color: #fff;
90 | font-size: 420%;
91 | font-weight: 100;
92 | line-height: 76px;
93 | padding: 0 8px;
94 | }
95 |
96 | .iosSlider .slider .item .inner .text1 span i {
97 | margin: 0 0 0 5px;
98 | }
99 |
100 | .iosSlider .slider .item .inner .text2 {
101 | background: none repeat scroll 0 0 #000000;
102 | opacity: 0;
103 | filter: alpha(opacity=0);
104 | padding: 10px 7px 7px;
105 | position: absolute;
106 | left: 100px;
107 | top: 115px;
108 | text-align: left;
109 | }
110 |
111 | .iosSlider .slider .item .inner .text2 span {
112 | display: block;
113 | color: #fff;
114 | font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
115 | font-size: 120%;
116 | line-height: 120%;
117 | font-weight: 100;
118 | padding: 0 8px;
119 | }
120 |
121 | .sliderContainer .slideSelectors {
122 | position: relative;
123 | bottom: -17px;
124 | left: 0;
125 | width: 137px;
126 | margin: 0 auto;
127 | z-index: 1;
128 | height: 11px;
129 | }
130 |
131 | .sliderContainer .slideSelectors .prev {
132 | float: left;
133 | width: 11px;
134 | height: 11px;
135 | background: url(../_img/selector-prev.png) no-repeat 50% 0;
136 | }
137 |
138 | .sliderContainer .slideSelectors .next {
139 | float: left;
140 | width: 11px;
141 | height: 11px;
142 | margin: 0 0 0 10px;
143 | background: url(../_img/selector-next.png) no-repeat 50% 0;
144 | }
145 |
146 | .sliderContainer .slideSelectors .item {
147 | float: left;
148 | width: 9px;
149 | height: 9px;
150 | background: #aaa;
151 | margin: 1px 1px 1px 11px;
152 | /* opacity: 0.25; */
153 | filter: alpha(opacity=25);
154 | border-radius: 10px;
155 | }
156 |
157 | .sliderContainer .slideSelectors .item.first {
158 | margin-left: 1px;
159 | }
160 |
161 | .sliderContainer .slideSelectors .selected {
162 | width: 11px;
163 | height: 11px;
164 | margin: 0 0 0 10px;
165 | background: #eee;
166 | opacity: 1;
167 | filter: alpha(opacity=100);
168 | box-shadow: none;
169 | }
170 |
171 | .sliderContainer .slideSelectors .selected.first {
172 | margin-left: 0;
173 | }
174 |
175 | .sliderContainer .scrollbarContainer {
176 | position: relative;
177 | bottom: 4px;
178 | left: 0;
179 | width: 1024px;
180 | height: 4px;
181 | margin: 0 auto;
182 | z-index: 1;
183 | }
184 |
185 | @media screen and (max-width: 1200px) {
186 |
187 | .iosSliderDemo {
188 | padding-bottom: 424px;
189 | }
190 |
191 | .fluidHeight {
192 | height: 334px;
193 | }
194 |
195 | .iosSlider .slider .item {
196 | width: 100%;
197 | }
198 |
199 | .iosSlider .slider .item .inner {
200 | width: 954px;
201 | }
202 |
203 | .sliderContainer .slideSelectors {}
204 |
205 | }
--------------------------------------------------------------------------------
/_demos/_examples/16-Site-Demo/2-v2/_css/default.css:
--------------------------------------------------------------------------------
1 |
2 | /*
3 | ----------------------------------------------------------------------------------
4 | Default css
5 | ----------------------------------------------------------------------------------
6 | */
7 |
8 | /* Reset all of the document's element styles to zero... */
9 |
10 | html, body, div, span, applet, object, iframe,
11 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
12 | a, abbr, acronym, address, big, cite, code,
13 | del, dfn, em, font, img, ins, kbd, q, s, samp,
14 | small, strike, strong, sub, sup, tt, var,
15 | b, u, i, center,
16 | dl, dt, dd, ol, ul, li,
17 | fieldset, form, label, legend,
18 | table, caption, tbody, tfoot, thead, tr, th, td {
19 | margin: 0;
20 | padding: 0;
21 | border: 0;
22 | outline: 0;
23 | font-size: 100%;
24 | vertical-align: baseline;
25 | background: transparent;
26 | }
27 | body {
28 | line-height: 1;
29 | }
30 | ol, ul {
31 | list-style: none;
32 | }
33 | blockquote, q {
34 | quotes: none;
35 | }
36 | blockquote:before, blockquote:after,
37 | q:before, q:after {
38 | content: '';
39 | content: none;
40 | }
41 |
42 | /* remember to define focus styles! */
43 | :focus {
44 | outline: 0;
45 | }
46 |
47 | /* remember to highlight inserts somehow! */
48 | ins {
49 | text-decoration: none;
50 | }
51 | del {
52 | text-decoration: line-through;
53 | }
54 |
55 | /* tables still need 'cellspacing="0"' in the markup */
56 | table {
57 | border-collapse: collapse;
58 | border-spacing: 0;
59 | }
60 |
61 |
62 |
63 | /* Clearing Floats Class STARTS */
64 | .Wrapper {
65 | display: inline-block;}
66 | .Wrapper:after {
67 | Content: "."; display: block; height: 0; clear: both; visibility: hidden;}
68 | * html .Wrapper {
69 | height: 1%; }
70 | .Wrapper {
71 | display: block;}
72 | /* Clearing Floats Class ENDS */
73 |
74 |
75 |
76 |
77 |
78 | /* */
79 |
80 | .hide, .Hide {
81 | display: none;}
82 | .clear {
83 | width: 100%; height: 1px; clear: both; display: block; overflow: hidden;}
84 |
85 |
--------------------------------------------------------------------------------
/_demos/_examples/16-Site-Demo/2-v2/_fonts/norican/Norican-Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iosscripts/iosslider/382d051f276756f82050b5f91c73d2e3e7885ca9/_demos/_examples/16-Site-Demo/2-v2/_fonts/norican/Norican-Regular.ttf
--------------------------------------------------------------------------------
/_demos/_examples/16-Site-Demo/2-v2/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | iosScripts.com demo
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
Lorem ipsum
114 |
115 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
Powerful
126 |
127 |
Hardware accelerated using CSS3 for supported
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
Responsive
138 |
139 |
Works with the most dynamic desktop
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
Multi-platform
150 |
151 |
Support for the latest desktop, iOS, Microsoft Surface,
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
Customize
162 |
163 |
Set momentum, elasticity, scrollbars and more to
164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |
182 |
183 |
184 |
185 |
186 |
187 |
188 |
189 |
190 |
191 |
192 |
193 |
196 |
197 |
198 |
199 |
--------------------------------------------------------------------------------
/_demos/_examples/17-Custom-Snap-Groups/1-Basic/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Ex #17.1: Custom Snap Grouping
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
Ex #18: RTL
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
LOCK UNLOCK
151 |
152 |
153 |
154 |
--------------------------------------------------------------------------------
/_demos/_examples/2-Rotating-Banner/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Ex #2: Rotating Banner
182 |
183 |
184 |
185 |
186 |
187 |
188 |
189 |
190 |
191 |
192 |
193 |
Touch Me.
194 |
195 |
Hardware accelerated using
196 |
197 |
198 |
199 |
200 |
201 |
Responsive.
202 |
203 |
Respond to change in browser
204 |
205 |
206 |
207 |
208 |
209 |
Flexible.
210 |
211 |
Run multiple sliders on
212 |
213 |
214 |
215 |
216 |
217 |
Customize.
218 |
219 |
Set momentum, elasticity,
220 |
221 |
222 |
223 |
224 |
225 |
231 |
232 |
Ex #3: Photo Gallery
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
1 Touch Me. | Hardware accelerated using CSS3 for supported iOS, Android and WebKit
179 |
180 |
181 |
182 |
183 |
184 |
185 |
2 Responsive. | Respond to change in browser width and adjust automatically
186 |
187 |
188 |
189 |
190 |
191 |
192 |
3 Flexible |Run multiple sliders on the same web page
193 |
194 |
195 |
196 |
197 |
198 |
199 |
4 Customize. | Settings for momentum, elastic, scrollbars and more...
200 |
201 |
202 |
203 |
204 |
205 |
206 |
Ex #4: Embedded HTML
183 |
184 |
185 |
186 |
187 |
188 |
189 |
190 |
191 |
192 |
193 |
194 |
197 |
198 |
199 |
200 |
201 |
202 |
203 | Touch Me.
204 |
205 |
206 |
207 | Hardware accelerated using CSS3 for supported iOS, Android and WebKit
208 |
209 |
210 |
211 | Read More ›
212 |
213 |
214 |
215 |
216 |
217 |
218 |
219 |
220 |
223 |
224 |
225 |
226 |
227 |
228 |
229 | Respond.
230 |
231 |
232 |
233 | Responsive to change in browser width and adjust automatically
234 |
235 |
236 |
237 | Read More ›
238 |
239 |
240 |
241 |
242 |
243 |
244 |
245 |
246 |
249 |
250 |
251 |
252 |
253 |
254 |
255 | Flexible.
256 |
257 |
258 |
259 | Run multiple sliders on the same web page
260 |
261 |
262 |
263 | Read More ›
264 |
265 |
266 |
267 |
268 |
269 |
270 |
271 |
272 |
275 |
276 |
277 |
278 |
279 |
280 |
281 | Custom.
282 |
283 |
284 |
285 | Set momentum, elasticity, scrollbars and more...
286 |
287 |
288 |
289 | Read More ›
290 |
291 |
292 |
293 |
294 |
295 |
296 |
297 |
298 |
299 |
300 |
301 |
302 |
Ex #5: Double Slider
223 |
224 |
225 |
226 |
227 |
228 |
229 |
230 |
231 |
232 |
233 |
234 |
Flexible | Run multiple sliders on the same web page
235 |
236 |
237 |
238 |
239 |
240 |
241 |
Touch Enabled | Hardware accelerated using CSS3 for supported iOS, Android and WebKit
242 |
243 |
244 |
245 |
246 |
247 |
248 |
Animate | Add your own JavaScript to maximize your slider
249 |
250 |
251 |
252 |
253 |
254 |
255 |
Customize | Settings for momentum, elastic, scrollbars and more...
256 |
257 |
258 |
259 |
260 |
261 |
262 |
Flexible | Run multiple sliders on the same web page
263 |
264 |
265 |
266 |
267 |
268 |
269 |
Touch Enabled | Hardware accelerated using CSS3 for supported iOS, Android and WebKit
270 |
271 |
272 |
273 |
274 |
275 |
276 |
Animate | Add your own JavaScript to maximize your slider
277 |
278 |
279 |
280 |
281 |
282 |
283 |
Customize | Settings for momentum, elastic, scrollbars and more...
284 |
285 |
286 |
287 |
288 |
289 |
290 |
Flexible | Run multiple sliders on the same web page
291 |
292 |
293 |
294 |
295 |
296 |
297 |
Touch Enabled | Hardware accelerated using CSS3 for supported iOS, Android and WebKit
298 |
299 |
300 |
301 |
302 |
303 |
304 |
Animate | Add your own JavaScript to maximize your slider
305 |
306 |
307 |
308 |
309 |
310 |
311 |
Customize | Settings for momentum, elastic, scrollbars and more...
312 |
313 |
314 |
315 |
316 |
317 |
318 |
321 |
322 |
323 |
324 |
325 |
326 |
329 |
332 |
335 |
338 |
341 |
344 |
347 |
350 |
353 |
356 |
359 |
362 |
363 |
364 |
365 |
368 |
369 |
370 |
371 |
--------------------------------------------------------------------------------
/_demos/_examples/6-Double-Slider-2/_css/common.css:
--------------------------------------------------------------------------------
1 | .container {
2 | position: relative;
3 | width: 960px;
4 | margin: 0 auto;
5 | }
6 |
7 | /* slider 1 */
8 | .container .iosSlider1Container {
9 | position: absolute;
10 | top: 0;
11 | left: 0;
12 | width: 460px;
13 | height: 382px;
14 | margin: 20px 0 0 0;
15 | }
16 |
17 | .container .iosSlider1Container .iosSlider1 {
18 | position: relative;
19 | top: 0;
20 | left: 0;
21 | overflow: hidden;
22 |
23 | width: 100%;
24 | height: 382px;
25 | }
26 |
27 | .container .iosSlider1Container .iosSlider1 .slider {
28 | width: 100%;
29 | height: 100%;
30 | }
31 |
32 | .container .iosSlider1Container .iosSlider1 .slider .item {
33 | float: left;
34 | width: 100%;
35 | height: 100%;
36 | }
37 |
38 | .container .iosSlider1Container .iosSlider1 .slider .item1 {
39 | background: #999;
40 | }
41 |
42 | .container .iosSlider1Container .iosSlider1 .slider .item2 {
43 | background: #aaa;
44 | }
45 |
46 | .container .iosSlider1Container .iosSlider1 .slider .item3 {
47 | background: #ddd;
48 | }
49 |
50 | /* slider 2 */
51 | .container .iosSlider2Container {
52 | position: absolute;
53 | top: 0;
54 | right: 0;
55 | width: 460px;
56 | height: 382px;
57 | margin: 20px 0 0 0;
58 | }
59 |
60 | .container .iosSlider2Container .iosSlider2 {
61 | position: relative;
62 | top: 0;
63 | left: 0;
64 | overflow: hidden;
65 |
66 | width: 100%;
67 | height: 382px;
68 | }
69 |
70 | .container .iosSlider2Container .iosSlider2 .slider {
71 | width: 100%;
72 | height: 100%;
73 | }
74 |
75 | .container .iosSlider2Container .iosSlider2 .slider .item {
76 | float: left;
77 | width: 100%;
78 | height: 100%;
79 | }
80 |
81 | .container .iosSlider2Container .iosSlider2 .slider .item1 {
82 | background: #999;
83 | }
84 |
85 | .container .iosSlider2Container .iosSlider2 .slider .item2 {
86 | background: #aaa;
87 | }
88 |
89 | .container .iosSlider2Container .iosSlider2 .slider .item3 {
90 | background: #ddd;
91 | }
92 |
93 | /* next/prev */
94 | .container .iosSlider2Container .iosSlider2 .next {
95 | position: absolute;
96 | top: 0;
97 | right: 0;
98 | width: 100px;
99 | height: 40px;
100 | background: #000;
101 | }
102 |
103 | .container .iosSlider2Container .iosSlider2 .prev {
104 | position: absolute;
105 | top: 0;
106 | left: 0;
107 | width: 100px;
108 | height: 40px;
109 | background: #000;
110 | }
111 |
112 | /* indicators */
113 | .container .iosSlider2Container .iosSlider2 .indicatorsBlock {
114 | position: absolute;
115 | left: 0;
116 | bottom: 10px;
117 | width: 100%;
118 | height: 10px;
119 | }
120 |
121 | .container .iosSlider2Container .iosSlider2 .indicatorsBlock .indicators {
122 | margin: 0 auto;
123 | width: 50px;
124 | height: 10px;
125 | }
126 |
127 | .container .iosSlider2Container .iosSlider2 .indicatorsBlock .indicators .item {
128 | float: left;
129 | width: 10px;
130 | height: 10px;
131 | margin: 0 0 0 10px;
132 | background: #666;
133 | }
134 |
135 | .container .iosSlider2Container .iosSlider2 .indicatorsBlock .indicators .first {
136 | margin-left: 0;
137 | }
138 |
139 | .container .iosSlider2Container .iosSlider2 .indicatorsBlock .indicators .selected {
140 | background: #000;
141 | }
142 |
143 | /* Smaller than standard 960 (devices and browsers) */
144 | @media only screen and (max-width: 959px) {
145 |
146 | .container {
147 | width: 768px;
148 | }
149 |
150 | .container .iosSlider1Container,
151 | .container .iosSlider2Container {
152 | width: 364px;
153 | height: 322px;
154 | }
155 |
156 | }
157 |
158 | /* Tablet Portrait size to standard 960 (devices and browsers) */
159 | @media only screen and (min-width: 768px) and (max-width: 959px) {}
160 | /* All Mobile Sizes (devices and browser) */
161 |
162 | @media only screen and (max-width: 767px) {
163 |
164 | .container {
165 | width: 420px;
166 | }
167 |
168 | .container .iosSlider1Container,
169 | .container .iosSlider2Container {
170 | position: static;
171 | width: 420px;
172 | height: 382px;
173 | }
174 |
175 | }
176 |
177 | /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
178 | @media only screen and (min-width: 480px) and (max-width: 767px) {}
179 |
180 | /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
181 | @media only screen and (max-width: 479px) {
182 |
183 | .container {
184 | width: 300px;
185 | }
186 |
187 | .container .iosSlider1Container,
188 | .container .iosSlider2Container {
189 | position: static;
190 | width: 300px;
191 | height: 275px;
192 | }
193 |
194 | }
--------------------------------------------------------------------------------
/_demos/_examples/6-Double-Slider-2/_css/default.css:
--------------------------------------------------------------------------------
1 |
2 | /*
3 | ----------------------------------------------------------------------------------
4 | Default css
5 | ----------------------------------------------------------------------------------
6 | */
7 |
8 | /* Reset all of the document's element styles to zero... */
9 |
10 | html, body, div, span, applet, object, iframe,
11 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
12 | a, abbr, acronym, address, big, cite, code,
13 | del, dfn, em, font, img, ins, kbd, q, s, samp,
14 | small, strike, strong, sub, sup, tt, var,
15 | b, u, i, center,
16 | dl, dt, dd, ol, ul, li,
17 | fieldset, form, label, legend,
18 | table, caption, tbody, tfoot, thead, tr, th, td {
19 | margin: 0;
20 | padding: 0;
21 | border: 0;
22 | outline: 0;
23 | font-size: 100%;
24 | vertical-align: baseline;
25 | background: transparent;
26 | }
27 | body {
28 | line-height: 1;
29 | }
30 | ol, ul {
31 | list-style: none;
32 | }
33 | blockquote, q {
34 | quotes: none;
35 | }
36 | blockquote:before, blockquote:after,
37 | q:before, q:after {
38 | content: '';
39 | content: none;
40 | }
41 |
42 | /* remember to define focus styles! */
43 | :focus {
44 | outline: 0;
45 | }
46 |
47 | /* remember to highlight inserts somehow! */
48 | ins {
49 | text-decoration: none;
50 | }
51 | del {
52 | text-decoration: line-through;
53 | }
54 |
55 | /* tables still need 'cellspacing="0"' in the markup */
56 | table {
57 | border-collapse: collapse;
58 | border-spacing: 0;
59 | }
60 |
61 |
62 |
63 | /* Clearing Floats Class STARTS */
64 | .Wrapper {
65 | display: inline-block;}
66 | .Wrapper:after {
67 | Content: "."; display: block; height: 0; clear: both; visibility: hidden;}
68 | * html .Wrapper {
69 | height: 1%; }
70 | .Wrapper {
71 | display: block;}
72 | /* Clearing Floats Class ENDS */
73 |
74 |
75 |
76 |
77 |
78 | /* */
79 |
80 | .hide, .Hide {
81 | display: none;}
82 | .clear {
83 | width: 100%; height: 1px; clear: both; display: block; overflow: hidden;}
84 |
85 |
--------------------------------------------------------------------------------
/_demos/_examples/6-Double-Slider-2/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | iosScripts/iosSlider demos - hostus
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
146 |
147 |
148 |
149 |
150 |
151 |
iosScripts/iosSlider demos - Centered Slides
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
87 |
88 |
89 |
90 |
91 |
92 |
iosScripts/iosSlider demos - Centered Slides
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
iosScripts/iosSlider demos - Centered Slides
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
iosScripts/iosSlider demos - Centered Slides
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
87 |
88 |
89 |
90 |
91 |
92 |
iosScripts/iosSlider demos - Full Height Plus Footer
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
slider 1
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
slider 2
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
show/hide toggle
110 |
111 |
Ex #9.1: Basic Responsive Example
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
iosScripts/iosSlider demos - Full Width Collapse Height
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
78 |
79 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
Ex #1: Default
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
Ex #17: Ref Issue #244
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
1
102 |
103 |
2
104 |
105 |
3
106 |
107 |
4
108 |
109 |
5
110 |
111 |
6
112 |
113 |
114 |
115 |
110 |
111 |
112 |
113 | 
122 |
123 |
124 |
125 | 
134 |
135 |
136 |
137 | 
146 |
147 |
148 |
149 | 
158 |
159 |
160 |
161 | 
64 | 
67 | 
70 | 
73 | 
76 | 
76 | 
79 | 
82 | 
85 | 
88 |