首页 > 移动平台 > 详细

移动端安卓和IOS开发框架Framework7教程-幻灯片

时间：2016-05-26 02:06:44      阅读：535      评论：0      收藏：0      [点我收藏+]

Framework7 comes with powerful and most modern touch slider ever - Swiper Slider with super flexible configuration and lot, lot of features.

Swiper Slider HTML Layout

Swiper HTML layout is pretty simple:

  1. <!--?Slider?container?-->
  2. <div?class="swiper-container">
  3. ????<!--?Slides?wrapper?-->
  4. ????<div?class="swiper-wrapper">
  5. ????????<!--?Slides?-->
  6. ????????<div?class="swiper-slide">Slide?1</div>
  7. ????????<div?class="swiper-slide">Slide?2</div>
  8. ????????<div?class="swiper-slide">Slide?3</div>
  9. ????????...?other?slides?...
  10. ????</div>
  11. ????<!--?Pagination,?if?required?-->
  12. ????<div?class="swiper-pagination"></div>
  13. </div>
复制

Where:

  • swiper-container?- main slider container with slides and paginations. Required element

    • swiper-wrapper?- additional wrapper for slides. Required element

      • swiper-slide?- single slide element. Could contain any HTML inside

    • swiper-pagination?- container with pagination bullets. Note, that pagination bullets will be created automatically. Optional element

Initialize Swiper with JavaScript

Now, when we have Swiper‘ HTML, we need to initialize it. We need to use related App‘s method:

myApp.swiper(swiperContainer, parameters) - initialize slider with options

  • swiperContainer - HTMLElement or string (with CSS Selector) of swiper container HTML element. Required.
  • parameters - object - object with Swiper parameters. Optional.
  • Method returns initialized Swiper instance

OR

new Swiper(swiperContainer, parameters) - initialize slider with options

  • swiperContainer - HTMLElement or string (with CSS Selector) of swiper container HTML element. Required.
  • parameters - object - object with Swiper parameters. Optional.
  • Method returns initialized Swiper instance

For example:

  1. var?mySwiper?=?app.swiper(‘.swiper-container‘,?{
  2. ????speed:?400,
  3. ????spaceBetween:?100
  4. });
复制
Note that Swiper container should be in DOM on a moment of initialization. So if you use slider not on home page, you need to initialize it within pageInit event

Swiper API (Parameters, Methods And Properties)

Сheck out Swiper API Website for the most relevant API parameters and methods.

Initialize Swiper with HTML

If you don‘t need Swiper callback you can initialize swiper using HTML without JavaScript. You can do that just by adding additional "swiper-init" class to?swiper-container

  1. <!--?swiper-init?to?initialize?swiper?automatically?-->
  2. <div?class="swiper-container?swiper-init">
  3. ????<div?class="swiper-wrapper">
  4. ????????<div?class="swiper-slide">Slide?1</div>
  5. ????????<div?class="swiper-slide">Slide?2</div>
  6. ????????<div?class="swiper-slide">Slide?3</div>
  7. ????????...?other?slides?...
  8. ????</div>
  9. </div>
复制

But what about Swiper parameters. In this case we need to pass them in?data-?attributes.

Parameters that used in camelCase, for example?slidesPerView, in data- attributes should be used as hypens-case as?data-slides-per-view

  1. <!--?swiper?properties?in?data-?attributes?-->
  2. <div?class="swiper-container?swiper-init"?data-speed="400"?data-space-between="40"?data-pagination=".swiper-pagination">
  3. ????<div?class="swiper-wrapper">
  4. ????????<div?class="swiper-slide">Slide?1</div>
  5. ????????<div?class="swiper-slide">Slide?2</div>
  6. ????????<div?class="swiper-slide">Slide?3</div>
  7. ????????...?other?slides?...
  8. ????</div>
  9. ????<div?class="swiper-pagination"></div>
  10. </div>
复制

Or we can pass all Swiper parameters in?valid JSON format?in data-swiper attribute:

  1. <!--?swiper?properties?in?JSON?format?in?data-swiper?attribute?-->
  2. <div?class="swiper-container?swiper-init"?data-swiper="{‘speed‘:‘400‘,?‘spaceBetween‘:‘40‘,?‘pagination‘:?‘.swiper-pagination‘}">
  3. ????<div?class="swiper-wrapper">
  4. ????????<div?class="swiper-slide">Slide?1</div>
  5. ????????<div?class="swiper-slide">Slide?2</div>
  6. ????????<div?class="swiper-slide">Slide?3</div>
  7. ????????...?other?slides?...
  8. ????</div>
  9. ????<div?class="swiper-pagination"></div>
  10. </div>
复制

Access to Swiper‘s Instance

If you initialize Swiper using HTML it is still possible to access to Swiper‘s instance. It is "swiper" property of slider‘s container HTML element:

  1. var?mySwiper?=?$$(‘.swiper-container‘)[0].swiper;
  2. ?
  3. //?Now?you?can?use?all?slider?methods?like
  4. mySwiper.slideNext();
复制

Examples

Default Swiper with pagination

  1. /*?A?bit?of?demo?styles?*/;
  2. .swiper-container?{
  3. ??height:?100%;
  4. }
  5. .swiper-slide?{
  6. ??background:#fff;
  7. }
  8. .swiper-slide?span?{
  9. ??text-align:center;
  10. ??display:block;
  11. ??margin:20px;
  12. ??font-size:21px;
  13. }
复制
  1. ...
  2. <div?class="page-content">
  3. ??<!--?Slider?-->
  4. ??<div?class="swiper-container">
  5. ????<div?class="swiper-wrapper">
  6. ??????<div?class="swiper-slide"><span>Slide?1</span></div>
  7. ??????<div?class="swiper-slide"><span>Slide?2</span></div>
  8. ??????<div?class="swiper-slide"><span>Slide?3</span></div>
  9. ??????<div?class="swiper-slide"><span>Slide?4</span></div>
  10. ????</div>
  11. ????<div?class="swiper-pagination"></div>
  12. ??</div>
  13. </div>
  14. ...
复制
  1. ??var?myApp?=?new?Framework7();?
  2. ?
  3. ??//?Init?slider?and?store?its?instance?in?mySwiper?variable
  4. ??var?mySwiper?=?myApp.swiper(‘.swiper-container‘,?{
  5. ????pagination:‘.swiper-pagination‘
  6. ??});
复制

?实例预览

Vertical Swiper

Styles and HTML layout are the same as in previous example

  1. ??var?myApp?=?new?Framework7();?
  2. ?
  3. ??//?Init?slider?and?store?its?instance?in?mySwiper?variable
  4. ??var?mySwiper?=?myApp.swiper(‘.swiper-container‘,?{
  5. ????pagination:‘.swiper-pagination‘,
  6. ????direction:?‘vertical‘
  7. ??});
复制

?实例预览

?

With space between slides

Styles and HTML layout are the same as in previous examples

  1. ??var?myApp?=?new?Framework7();?
  2. ?
  3. ??//?Init?slider?and?store?its?instance?in?mySwiper?variable
  4. ??var?mySwiper?=?myApp.swiper(‘.swiper-container‘,?{
  5. ????pagination:‘.swiper-pagination‘,
  6. ????spaceBetween:?100?//?100px?between?slides
  7. ??});
复制

?实例预览

?

Multiple Swipers

  1. .swiper-slide?{
  2. ??background:?#fff;
  3. ??box-sizing:?border-box;
  4. ??border:?1px?solid?#ccc;
  5. }
  6. .swiper-slide?span?{
  7. ??text-align:center;
  8. ??display:block;
  9. ??margin:?20px;
  10. ??font-size:21px;
  11. }
  12. .swiper-container?{
  13. ??height:?120px;
  14. ??margin:?35px?0;
  15. }
复制
  1. <div?class="page-content">
  2. ?
  3. ??<div?class="content-block-title">1?Slide?Per?View,?50px?Between</div>
  4. ??<div?class="swiper-container?swiper-1">
  5. ????<div?class="swiper-pagination"></div>
  6. ????<div?class="swiper-wrapper">
  7. ??????<div?class="swiper-slide"><span>Slide?1</span></div>
  8. ??????<div?class="swiper-slide"><span>Slide?2</span></div>
  9. ??????...
  10. ??????<div?class="swiper-slide"><span>Slide?10</span></div>
  11. ????</div>
  12. ??</div>
  13. ?
  14. ??<div?class="content-block-title">2?Slides?Per?View,?20px?Between</div>
  15. ??<div?class="swiper-container?swiper-2">
  16. ????<div?class="swiper-pagination"></div>
  17. ????<div?class="swiper-wrapper">
  18. ??????<div?class="swiper-slide"><span>Slide?1</span></div>
  19. ??????<div?class="swiper-slide"><span>Slide?2</span></div>
  20. ??????...
  21. ??????<div?class="swiper-slide"><span>Slide?10</span></div>
  22. ????</div>
  23. ??</div>
  24. ?
  25. ??<div?class="content-block-title">3?Slides?Per?View,?10px?Between</div>
  26. ??<div?class="swiper-container?swiper-3">
  27. ????<div?class="swiper-pagination"></div>
  28. ????<div?class="swiper-wrapper">
  29. ??????<div?class="swiper-slide"><span>Slide?1</span></div>
  30. ??????<div?class="swiper-slide"><span>Slide?2</span></div>
  31. ??????...
  32. ??????<div?class="swiper-slide"><span>Slide?10</span></div>
  33. ????</div>
  34. ??</div>
  35. ?
  36. ??<div?class="content-block-title">Vertical,?0px?Between</div>
  37. ??<div?class="swiper-container?swiper-vertical">
  38. ????<div?class="swiper-pagination"></div>
  39. ????<div?class="swiper-wrapper">
  40. ??????<div?class="swiper-slide"><span>Slide?1</span></div>
  41. ??????<div?class="swiper-slide"><span>Slide?2</span></div>
  42. ??????...
  43. ??????<div?class="swiper-slide"><span>Slide?5</span></div>
  44. ????</div>
  45. ??</div>
  46. ?
  47. ??<div?class="content-block-title">Slow?speed</div>
  48. ??<div?class="swiper-container?swiper-slow">
  49. ????<div?class="swiper-pagination"></div>
  50. ????<div?class="swiper-wrapper">
  51. ??????<div?class="swiper-slide"><span>Slide?1</span></div>
  52. ??????<div?class="swiper-slide"><span>Slide?2</span></div>
  53. ??????...
  54. ??????<div?class="swiper-slide"><span>Slide?10</span></div>
  55. ????</div>
  56. ??</div>
  57. ?
  58. </div>
复制
  1. var?myApp?=?new?Framework7();?
  2. ?
  3. //?1?Slide?Per?View,?50px?Between
  4. var?mySwiper1?=?myApp.swiper(‘.swiper-1‘,?{
  5. ??pagination:‘.swiper-1?.swiper-pagination‘,
  6. ??spaceBetween:?50
  7. });
  8. ?
  9. //?2?Slides?Per?View,?20px?Between
  10. var?mySwiper2?=?myApp.swiper(‘.swiper-2‘,?{
  11. ??pagination:‘.swiper-2?.swiper-pagination‘,
  12. ??spaceBetween:?20,
  13. ??slidesPerView:?2
  14. });
  15. ?
  16. //?3?Slides?Per?View,?10px?Between
  17. var?mySwiper3?=?myApp.swiper(‘.swiper-3‘,?{
  18. ??pagination:‘.swiper-3?.swiper-pagination‘,
  19. ??spaceBetween:?10,
  20. ??slidesPerView:?3
  21. });
  22. ?
  23. //?Vertical,?0px?Between
  24. var?mySwiperVertical?=?myApp.swiper(‘.swiper-vertical‘,?{
  25. ??pagination:‘.swiper-vertical?.swiper-pagination‘,
  26. ??direction:?‘vertical‘
  27. });
  28. ?
  29. //?Slow?speed
  30. var?mySwiperSlow?=?myApp.swiper(‘.swiper-slow‘,?{
  31. ??pagination:‘.swiper-slow?.swiper-pagination‘,
  32. ??speed:?600
  33. });
复制

?实例预览

Nested Swipers

Let‘s initialize slider in this example using just HTML:

  1. .swiper-slide?{
  2. ??background:#fff;
  3. }
  4. .swiper-slide?span?{
  5. ??text-align:center;
  6. ??display:block;
  7. ??margin:20px;
  8. ??font-size:21px;
  9. }
复制
  1. <div?class="page-content">
  2. ??<!--?Horizontal?parent?slider?-->
  3. ??<div?data-pagination=".swiper-pagination-h"class="swiper-container?swiper-init">
  4. ????<div?class="swiper-pagination?swiper-pagination-h"></div>
  5. ????<div?class="swiper-wrapper">
  6. ??????<div?class="swiper-slide"><span>Horizontal?Slide?1</span></div>
  7. ??????<div?class="swiper-slide">
  8. ?
  9. ????????<!--?Vertical?nested?child?slider?-->
  10. ????????<div?class="swiper-container?swiper-init"?data-pagination=".swiper-pagination-v"?data-direction="vertical">
  11. ??????????<div?class="swiper-pagination?swiper-pagination-v"></div>
  12. ??????????<div?class="swiper-wrapper">
  13. ????????????<div?class="swiper-slide"><span>Vertical?Slide?1</span></div>
  14. ????????????<div?class="swiper-slide"><span>Vertical?Slide?2</span></div>
  15. ????????????<div?class="swiper-slide"><span>Vertical?Slide?3</span></div>
  16. ??????????</div>
  17. ????????</div>
  18. ?
  19. ??????</div>
  20. ??????<div?class="swiper-slide"><span>Horizontal?Slide?3</span></div>
  21. ??????<div?class="swiper-slide"><span>Horizontal?Slide?4</span></div>
  22. ????</div>
  23. ??</div>
  24. ?
  25. </div>
复制

?实例预览

Custom Controls

  1. <div?class="page-content">
  2. ??<div?class="swiper-custom">
  3. ????<div?class="swiper-container">
  4. ??????<div?class="swiper-pagination"></div>
  5. ??????<div?class="swiper-wrapper">
  6. ????????<div?class="swiper-slide"><span>Slide?1</span></div>
  7. ????????<div?class="swiper-slide"><span>Slide?2</span></div>
  8. ????????<div?class="swiper-slide"><span>Slide?3</span></div>
  9. ????????<div?class="swiper-slide"><span>Slide?4</span></div>
  10. ????????<div?class="swiper-slide"><span>Slide?5</span></div>
  11. ????????<div?class="swiper-slide"><span>Slide?6</span></div>
  12. ????????<div?class="swiper-slide"><span>Slide?7</span></div>
  13. ??????</div>
  14. ????</div>
  15. ????<div?class="swiper-button-prev"></div>
  16. ????<div?class="swiper-button-next"></div>
  17. ??</div>
  18. </div>
复制
  1. .swiper-custom?{
  2. ??position:relative;
  3. ??height:100%;
  4. }
  5. .swiper-container?{
  6. ??height:100%;
  7. }
  8. .swiper-slide?{
  9. ??background:?#fff;
  10. }
  11. .swiper-slide?span?{
  12. ??text-align:center;
  13. ??display:block;
  14. ??margin:?20px;
  15. ??font-size:21px;
  16. }
  17. .swiper-pagination-bullet?{
  18. ??width:?10px;
  19. ??height:?10px;
  20. ??background:?none;
  21. ??border:1px?solid?#aaa;
  22. ??border-radius:?0?0?0?0;
  23. ??opacity:1;
  24. ??cursor:?pointer;
  25. }
  26. .swiper-pagination-bullet-active?{
  27. ??background:?#007aff;
  28. ??border-color:?#007aff;
  29. }
复制
  1. var?myApp?=?new?Framework7();?
  2. ?
  3. var?mySwiper?=?myApp.swiper(‘.swiper-container‘,?{
  4. ??pagination:?‘.swiper-pagination‘,
  5. ??paginationHide:?false,
  6. ??paginationClickable:?true,
  7. ??nextButton:?‘.swiper-button-next‘,
  8. ??prevButton:?‘.swiper-button-prev‘,
  9. });
复制

?实例预览

Lazy Loading

  1. <div?class="swiper-container">
  2. ??<div?class="swiper-wrapper">
  3. ????<div?class="swiper-slide">
  4. ??????<img?data-src="http://lorempixel.com/1600/1200/nature/1"?class="swiper-lazy">
  5. ??????<div?class="preloader"></div>
  6. ????</div>
  7. ????<div?class="swiper-slide">
  8. ??????<img?data-src="http://lorempixel.com/1600/1200/nature/2"?class="swiper-lazy">
  9. ??????<div?class="preloader"></div>
  10. ????</div>
  11. ????<div?class="swiper-slide">
  12. ??????<img?data-src="http://lorempixel.com/1600/1200/nature/3"?class="swiper-lazy">
  13. ??????<div?class="preloader"></div>
  14. ????</div>
  15. ????<div?class="swiper-slide">
  16. ??????<img?data-src="http://lorempixel.com/1600/1200/nature/4"?class="swiper-lazy">
  17. ??????<div?class="preloader"></div>
  18. ????</div>
  19. ????<div?class="swiper-slide">
  20. ??????<img?data-src="http://lorempixel.com/1600/1200/nature/5"?class="swiper-lazy">
  21. ??????<div?class="preloader"></div>
  22. ????</div>
  23. ??</div>
  24. ??<div?class="swiper-pagination?color-white"></div>
  25. </div>
复制
  1. .swiper-container?{
  2. ??height:?100%;
  3. }
  4. .swiper-slide?{
  5. ??background:?#000;
  6. ??position:?relative;
  7. }
  8. .swiper-slide?img?{
  9. ??position:?absolute;
  10. ??left:50%;
  11. ??top:50%;
  12. ??max-width:?100%;
  13. ??max-height:?100%;
  14. ??-webkit-transform:?translate(-50%,?-50%);
  15. ??transform:?translate(-50%,?-50%);
  16. }
复制

?实例预览

  1. var?mySwiper?=?new?Swiper(‘.swiper-container‘,?{
  2. ??preloadImages:?false,
  3. ??lazyLoading:?true,
  4. ??pagination:?‘.swiper-pagination‘
  5. })
复制

?

移动端安卓和IOS开发框架Framework7教程-幻灯片

原文：http://zaixianshouce.iteye.com/blog/2300329
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
分享档案
更多>
2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)
最新文章
更多>
教程昨日排行
更多>
友情链接
汇智网   PHP教程   插件网  
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣，分享程序人生！