/examples-no-jquery/slider-with-bullet-navigator.source.html

https://github.com/DIGININJADEV/jquery-slider · HTML · 99 lines · 81 code · 6 blank · 12 comment · 0 complexity · 8b4e2d9429eef9d24a815bdb2165cb14 MD5 · raw file 

    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4.     <meta charset="utf-8">
    5. 

  5.     <meta name="viewport" content="width=device-width">
    6. 

  6.     <title>Bullet Navigator Example - Jssor Slider, Slideshow</title>
    7. 

  7. </head>
    8. 

  8. <body style="font-family:Arial, Verdana;background-color:#fff;">
    9. 

  9.     <!-- use jssor.slider.min.js instead for release -->
    10. 

  10.     <!-- jssor.slider.min.js = (jssor.core.js + jssor.utils.js + jssor.slider.js) -->
    11. 

  11.     <script type="text/javascript" src="../js/jssor.core.js"></script>
    12. 

  12.     <script type="text/javascript" src="../js/jssor.utils.js"></script>
    13. 

  13.     <script type="text/javascript" src="../js/jssor.slider.js"></script>
    14. 

  14.     <script>
    15. 

  15. 

  16.         jssor_slider1_starter = function (containerId) {
    17. 

  17.             var options = {
    18. 

  18.                 $DragOrientation: 3,                                //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
    19. 

  19. 

  20.                 $BulletNavigatorOptions: {                                //[Optional] Options to specify and enable navigator or not
    21. 

  21.                     $Class: $JssorBulletNavigator$,                       //[Required] Class to create navigator instance
    22. 

  22.                     $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
    23. 

  23.                     $ActionMode: 1,                                 //[Optional] 0 None, 1 act by click, 2 act by mouse hover, 3 both, default value is 1
    24. 

  24.                     $AutoCenter: 0,                                 //[Optional] Auto center navigator in parent container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
    25. 

  25.                     $Steps: 1,                                      //[Optional] Steps to go for each navigation request, default value is 1
    26. 

  26.                     $Lanes: 1,                                      //[Optional] Specify lanes to arrange items, default value is 1
    27. 

  27.                     $SpacingX: 0,                                   //[Optional] Horizontal space between each item in pixel, default value is 0
    28. 

  28.                     $SpacingY: 0,                                   //[Optional] Vertical space between each item in pixel, default value is 0
    29. 

  29.                     $Orientation: 1                                 //[Optional] The orientation of the navigator, 1 horizontal, 2 vertical, default value is 1
    30. 

  30.                 }
    31. 

  31.             };
    32. 

  32.             var jssor_slider1 = new $JssorSlider$(containerId, options);
    33. 

  33.         };
    34. 

  34.     </script>
    35. 

  35.     <!-- Jssor Slider Begin -->
    36. 

  36.     <!-- You can move inline styles to css file or css block. -->
    37. 

  37.     <div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px;
    38. 

  38.         height: 300px;">
    39. 

    40. 

  40.         <!-- Loading Screen -->
    41. 

  41.         <div u="loading" style="position: absolute; top: 0px; left: 0px;">
    42. 

  42.             <div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
    43. 

  43.                 background-color: #000000; top: 0px; left: 0px;width: 100%;height:100%;">
    44. 

  44.             </div>
    45. 

  45.             <div style="position: absolute; display: block; background: url(../img/loading.gif) no-repeat center center;
    46. 

  46.                 top: 0px; left: 0px;width: 100%;height:100%;">
    47. 

  47.             </div>
    48. 

  48.         </div>
    49. 

  49. 

  50.         <!-- Slides Container -->
    51. 

  51.         <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
    52. 

  52.             overflow: hidden;">
    53. 

  53.             <div><img u="image" src="../img/landscape/01.jpg" /></div>
    54. 

  54.             <div><img u="image" src="../img/landscape/02.jpg" /></div>
    55. 

  55.             <div><img u="image" src="../img/landscape/03.jpg" /></div>
    56. 

  56.             <div><img u="image" src="../img/landscape/04.jpg" /></div>
    57. 

  57.             <div><img u="image" src="../img/landscape/05.jpg" /></div>
    58. 

  58.             <div><img u="image" src="../img/landscape/06.jpg" /></div>
    59. 

  59.             <div><img u="image" src="../img/landscape/07.jpg" /></div>
    60. 

  60.             <div><img u="image" src="../img/landscape/08.jpg" /></div>
    61. 

  61.         </div>
    62. 

  62. 

  63.         <!-- Bullet Navigator Skin Begin -->
    64. 

  64.         <style>
    65. 

  65.             /* jssor slider bullet navigator skin 03 css */
    66. 

  66.             /*
    67. 

  67.             .jssorb03 div           (normal)
    68. 

  68.             .jssorb03 div:hover     (normal mouseover)
    69. 

  69.             .jssorb03 .av           (active)
    70. 

  70.             .jssorb03 .av:hover     (active mouseover)
    71. 

  71.             .jssorb03 .dn           (mousedown)
    72. 

  72.             */
    73. 

  73.             .jssorb03 div, .jssorb03 div:hover, .jssorb03 .av
    74. 

  74.             {
    75. 

  75.                 background: url(../img/b03.png) no-repeat;
    76. 

  76.                 overflow:hidden;
    77. 

  77.                 cursor: pointer;
    78. 

  78.             }
    79. 

  79.             .jssorb03 div { background-position: -5px -5px; }
    80. 

  80.             .jssorb03 div:hover, .jssorb03 .av:hover { background-position: -35px -5px; }
    81. 

  81.             .jssorb03 .av { background-position: -65px -5px; }
    82. 

  82.             .jssorb03 .dn, .jssorb03 .dn:hover { background-position: -95px -5px; }
    83. 

  83.         </style>
    84. 

  84.         <!-- bullet navigator container -->
    85. 

  85.         <div u="navigator" class="jssorb03" style="position: absolute; bottom: 4px; left: 6px;">
    86. 

  86.             <!-- bullet navigator item prototype -->
    87. 

  87.             <div u="prototype" style="position: absolute; width: 21px; height: 21px; text-align:center; line-height:21px; color:white; font-size:12px;"><NumberTemplate></NumberTemplate></div>
    88. 

  88.         </div>
    89. 

  89.         <!-- Bullet Navigator Skin End -->
    90. 

  90. 

  91.         <a style="display: none" href="http://www.jssor.com">javascript</a>
    92. 

  92.         <!-- Trigger -->
    93. 

  93.         <script>
    94. 

  94.             jssor_slider1_starter('slider1_container');
    95. 

  95.         </script>
    96. 

  96.     </div>
    97. 

  97.     <!-- Jssor Slider End -->
    98. 

  98. </body>
    99. 

  99. </html>
    100.