owlcarousel-demo.js 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  1. /* Carousel */
  2. $(document).ready(function() {
  3. $(".owl-carousel-1").owlCarousel({
  4. lazyLoad: true,
  5. items: 4,
  6. navigation: true,
  7. navigationText: ["<i class='glyph-icon icon-angle-left'></i>", "<i class='glyph-icon icon-angle-right'></i>"],
  8. });
  9. $(".owl-carousel-2").owlCarousel({
  10. lazyLoad: true,
  11. itemsCustom: [
  12. [0, 2],
  13. [450, 4],
  14. [600, 7],
  15. [700, 9],
  16. [1000, 10],
  17. [1200, 12],
  18. [1400, 13],
  19. [1600, 15]
  20. ],
  21. navigation: true,
  22. navigationText: ["<i class='glyph-icon icon-angle-left'></i>", "<i class='glyph-icon icon-angle-right'></i>"],
  23. });
  24. $(".owl-carousel-3").owlCarousel({
  25. lazyLoad: true,
  26. autoPlay: 3000,
  27. items: 2,
  28. stopOnHover: true,
  29. navigation: true,
  30. navigationText: ["<i class='glyph-icon icon-angle-left'></i>", "<i class='glyph-icon icon-angle-right'></i>"],
  31. paginationSpeed: 1000,
  32. goToFirstSpeed: 2000,
  33. singleItem: false,
  34. autoHeight: true,
  35. transitionStyle: "goDown"
  36. });
  37. $(".owl-carousel-4").owlCarousel({
  38. lazyLoad: true,
  39. autoPlay: 3000,
  40. items: 2,
  41. stopOnHover: true,
  42. navigation: false,
  43. paginationSpeed: 1000,
  44. goToFirstSpeed: 2000,
  45. singleItem: false,
  46. autoHeight: true,
  47. pagination: false,
  48. transitionStyle: "goDown"
  49. });
  50. $(".owl-carousel-5").owlCarousel({
  51. lazyLoad: true,
  52. autoPlay: 3000,
  53. items: 3,
  54. stopOnHover: true,
  55. navigation: false,
  56. paginationSpeed: 1000,
  57. goToFirstSpeed: 2000,
  58. singleItem: false,
  59. autoHeight: true,
  60. pagination: false,
  61. transitionStyle: "goDown"
  62. });
  63. $(".next").click(function() {
  64. owl.trigger('owl.next');
  65. })
  66. $(".prev").click(function() {
  67. owl.trigger('owl.prev');
  68. })
  69. $(".owl-slider-1").owlCarousel({
  70. lazyLoad: true,
  71. autoPlay: 3000,
  72. stopOnHover: true,
  73. navigation: true,
  74. navigationText: ["<i class='glyph-icon icon-angle-left'></i>", "<i class='glyph-icon icon-angle-right'></i>"],
  75. paginationSpeed: 1000,
  76. goToFirstSpeed: 2000,
  77. singleItem: true,
  78. autoHeight: true,
  79. transitionStyle: "goDown"
  80. });
  81. $(".owl-slider-2").owlCarousel({
  82. lazyLoad: true,
  83. autoPlay: 3000,
  84. stopOnHover: true,
  85. navigation: true,
  86. navigationText: ["<i class='glyph-icon icon-angle-left'></i>", "<i class='glyph-icon icon-angle-right'></i>"],
  87. paginationSpeed: 1000,
  88. goToFirstSpeed: 2000,
  89. singleItem: true,
  90. autoHeight: true,
  91. transitionStyle: "fade"
  92. });
  93. $(".owl-slider-3").owlCarousel({
  94. lazyLoad: true,
  95. autoPlay: 3000,
  96. stopOnHover: true,
  97. navigation: false,
  98. navigationText: ["<i class='glyph-icon icon-angle-left'></i>", "<i class='glyph-icon icon-angle-right'></i>"],
  99. paginationSpeed: 1000,
  100. goToFirstSpeed: 2000,
  101. singleItem: true,
  102. autoHeight: false
  103. });
  104. $(".owl-slider-4").owlCarousel({
  105. lazyLoad: true,
  106. autoPlay: 3000,
  107. stopOnHover: true,
  108. navigation: true,
  109. navigationText: ["<i class='glyph-icon icon-angle-left'></i>", "<i class='glyph-icon icon-angle-right'></i>"],
  110. paginationSpeed: 1000,
  111. goToFirstSpeed: 2000,
  112. singleItem: true,
  113. autoHeight: false
  114. });
  115. $(".owl-slider-5").owlCarousel({
  116. lazyLoad: true,
  117. autoPlay: 3000,
  118. stopOnHover: true,
  119. navigation: false,
  120. paginationSpeed: 1000,
  121. goToFirstSpeed: 2000,
  122. singleItem: true,
  123. autoHeight: true,
  124. transitionStyle: "goDown"
  125. });
  126. });