API tools faq
paste
Advertisement
Guest User

bootstrapslideronly

a guest
May 22nd, 2018
60
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.81 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. <style type="text/css">
  6. img{
  7. min-width: 100%;
  8. }
  9. .sr-only{
  10. position: absolute;
  11. left: -9999999px;
  12. }
  13. .img-responsive,
  14. .thumbnail > img,
  15. .thumbnail a > img,
  16. .carousel-inner > .item > img,
  17. .carousel-inner > .item > a > img {
  18. display: block;
  19. max-width: 100%;
  20. height: auto;
  21. }
  22.  
  23. .carousel {
  24. position: relative;
  25. }
  26. .carousel-inner {
  27. position: relative;
  28. width: 100%;
  29. overflow: hidden;
  30. }
  31. .carousel-inner > .item {
  32. position: relative;
  33. display: none;
  34. -webkit-transition: .6s ease-in-out left;
  35. -o-transition: .6s ease-in-out left;
  36. transition: .6s ease-in-out left;
  37. }
  38. .carousel-inner > .item > img,
  39. .carousel-inner > .item > a > img {
  40. line-height: 1;
  41. }
  42. @media all and (transform-3d), (-webkit-transform-3d) {
  43. .carousel-inner > .item {
  44. -webkit-transition: -webkit-transform .6s ease-in-out;
  45. -o-transition: -o-transform .6s ease-in-out;
  46. transition: transform .6s ease-in-out;
  47.  
  48. -webkit-backface-visibility: hidden;
  49. backface-visibility: hidden;
  50. -webkit-perspective: 1000px;
  51. perspective: 1000px;
  52. }
  53. .carousel-inner > .item.next,
  54. .carousel-inner > .item.active.right {
  55. left: 0;
  56. -webkit-transform: translate3d(100%, 0, 0);
  57. transform: translate3d(100%, 0, 0);
  58. }
  59. .carousel-inner > .item.prev,
  60. .carousel-inner > .item.active.left {
  61. left: 0;
  62. -webkit-transform: translate3d(-100%, 0, 0);
  63. transform: translate3d(-100%, 0, 0);
  64. }
  65. .carousel-inner > .item.next.left,
  66. .carousel-inner > .item.prev.right,
  67. .carousel-inner > .item.active {
  68. left: 0;
  69. -webkit-transform: translate3d(0, 0, 0);
  70. transform: translate3d(0, 0, 0);
  71. }
  72. }
  73. .carousel-inner > .active,
  74. .carousel-inner > .next,
  75. .carousel-inner > .prev {
  76. display: block;
  77. }
  78. .carousel-inner > .active {
  79. left: 0;
  80. }
  81. .carousel-inner > .next,
  82. .carousel-inner > .prev {
  83. position: absolute;
  84. top: 0;
  85. width: 100%;
  86. }
  87. .carousel-inner > .next {
  88. left: 100%;
  89. }
  90. .carousel-inner > .prev {
  91. left: -100%;
  92. }
  93. .carousel-inner > .next.left,
  94. .carousel-inner > .prev.right {
  95. left: 0;
  96. }
  97. .carousel-inner > .active.left {
  98. left: -100%;
  99. }
  100. .carousel-inner > .active.right {
  101. left: 100%;
  102. }
  103. .carousel-control {
  104. position: absolute;
  105. top: 0;
  106. bottom: 0;
  107. left: 0;
  108. width: 15%;
  109. font-size: 20px;
  110. color: #fff;
  111. text-align: center;
  112. text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  113. filter: alpha(opacity=50);
  114. opacity: .5;
  115. }
  116. .carousel-control.left {
  117. background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);
  118. background-image: -o-linear-gradient(left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);
  119. background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, .0001)));
  120. background-image: linear-gradient(to right, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);
  121. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
  122. background-repeat: repeat-x;
  123. }
  124. .carousel-control.right {
  125. right: 0;
  126. left: auto;
  127. background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%);
  128. background-image: -o-linear-gradient(left, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%);
  129. background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .0001)), to(rgba(0, 0, 0, .5)));
  130. background-image: linear-gradient(to right, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%);
  131. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
  132. background-repeat: repeat-x;
  133. }
  134. .carousel-control:hover,
  135. .carousel-control:focus {
  136. color: #fff;
  137. text-decoration: none;
  138. filter: alpha(opacity=90);
  139. outline: 0;
  140. opacity: .9;
  141. }
  142. .carousel-control .icon-prev,
  143. .carousel-control .icon-next,
  144. .carousel-control .glyphicon-chevron-left,
  145. .carousel-control .glyphicon-chevron-right {
  146. position: absolute;
  147. top: 50%;
  148. z-index: 5;
  149. display: inline-block;
  150. margin-top: -10px;
  151. }
  152. .carousel-control .icon-prev,
  153. .carousel-control .glyphicon-chevron-left {
  154. left: 50%;
  155. margin-left: -10px;
  156. }
  157. .carousel-control .icon-next,
  158. .carousel-control .glyphicon-chevron-right {
  159. right: 50%;
  160. margin-right: -10px;
  161. }
  162. .carousel-control .icon-prev,
  163. .carousel-control .icon-next {
  164. width: 20px;
  165. height: 20px;
  166. font-family: serif;
  167. line-height: 1;
  168. }
  169. .carousel-control .icon-prev:before {
  170. content: '\2039';
  171. }
  172. .carousel-control .icon-next:before {
  173. content: '\203a';
  174. }
  175. .carousel-indicators {
  176. position: absolute;
  177. bottom: 10px;
  178. left: 50%;
  179. z-index: 15;
  180. width: 60%;
  181. padding-left: 0;
  182. margin-left: -30%;
  183. text-align: center;
  184. list-style: none;
  185. }
  186. .carousel-indicators li {
  187. display: inline-block;
  188. width: 10px;
  189. height: 10px;
  190. margin: 1px;
  191. text-indent: -999px;
  192. cursor: pointer;
  193. background-color: #000 \9;
  194. background-color: rgba(0, 0, 0, 0);
  195. border: 1px solid #fff;
  196. border-radius: 10px;
  197. }
  198. .carousel-indicators .active {
  199. width: 12px;
  200. height: 12px;
  201. margin: 0;
  202. background-color: #fff;
  203. }
  204. .carousel-caption {
  205. position: absolute;
  206. right: 15%;
  207. bottom: 20px;
  208. left: 15%;
  209. z-index: 10;
  210. padding-top: 20px;
  211. padding-bottom: 20px;
  212. color: #fff;
  213. text-align: center;
  214. text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  215. }
  216. .carousel-caption .btn {
  217. text-shadow: none;
  218. }
  219. @media screen and (min-width: 768px) {
  220. .carousel-control .glyphicon-chevron-left,
  221. .carousel-control .glyphicon-chevron-right,
  222. .carousel-control .icon-prev,
  223. .carousel-control .icon-next {
  224. width: 30px;
  225. height: 30px;
  226. margin-top: -15px;
  227. font-size: 30px;
  228. }
  229. .carousel-control .glyphicon-chevron-left,
  230. .carousel-control .icon-prev {
  231. margin-left: -15px;
  232. }
  233. .carousel-control .glyphicon-chevron-right,
  234. .carousel-control .icon-next {
  235. margin-right: -15px;
  236. }
  237. .carousel-caption {
  238. right: 20%;
  239. left: 20%;
  240. padding-bottom: 30px;
  241. }
  242. .carousel-indicators {
  243. bottom: 20px;
  244. }
  245. }
  246. </style>
  247. </head>
  248. <body>
  249. <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  250. <!-- Indicators -->
  251. <ol class="carousel-indicators">
  252. <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
  253. <li data-target="#carousel-example-generic" data-slide-to="1"></li>
  254. <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  255. </ol>
  256.  
  257. <!-- Wrapper for slides -->
  258. <div class="carousel-inner" role="listbox">
  259. <div class="item active">
  260. <img src="http://placehold.it/700x300&text=Slide_01" alt="...">
  261. </div>
  262. <div class="item">
  263. <img src="http://placehold.it/700x300&text=Slide_02" alt="...">
  264. </div>
  265. <div class="item">
  266. <img src="http://placehold.it/700x300&text=Slide_03" alt="...">
  267. </div>
  268. </div>
  269.  
  270. <!-- Controls -->
  271. <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
  272. <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"><</span>
  273. <span class="sr-only">Previous</span>
  274. </a>
  275. <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
  276. <span class="glyphicon glyphicon-chevron-right" aria-hidden="true">></span>
  277. <span class="sr-only">Next</span>
  278. </a>
  279. </div>
  280.  
  281. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  282. <script type="text/javascript">
  283. $(document).ready(function() {
  284. +function ($) {
  285. 'use strict';
  286.  
  287. function transitionEnd() {
  288. var el = document.createElement('bootstrap')
  289.  
  290. var transEndEventNames = {
  291. WebkitTransition : 'webkitTransitionEnd',
  292. MozTransition : 'transitionend',
  293. OTransition : 'oTransitionEnd otransitionend',
  294. transition : 'transitionend'
  295. }
  296.  
  297. for (var name in transEndEventNames) {
  298. if (el.style[name] !== undefined) {
  299. return { end: transEndEventNames[name] }
  300. }
  301. }
  302.  
  303. return false // explicit for ie8 ( ._.)
  304. }
  305.  
  306. $.fn.emulateTransitionEnd = function (duration) {
  307. var called = false
  308. var $el = this
  309. $(this).one('bsTransitionEnd', function () { called = true })
  310. var callback = function () { if (!called) $($el).trigger($.support.transition.end) }
  311. setTimeout(callback, duration)
  312. return this
  313. }
  314.  
  315. $(function () {
  316. $.support.transition = transitionEnd()
  317.  
  318. if (!$.support.transition) return
  319.  
  320. $.event.special.bsTransitionEnd = {
  321. bindType: $.support.transition.end,
  322. delegateType: $.support.transition.end,
  323. handle: function (e) {
  324. if ($(e.target).is(this)) return e.handleObj.handler.apply(this, arguments)
  325. }
  326. }
  327. })
  328.  
  329. }(jQuery);
  330.  
  331. +function ($) {
  332. 'use strict';
  333.  
  334. // CAROUSEL CLASS DEFINITION
  335. // =========================
  336.  
  337. var Carousel = function (element, options) {
  338. this.$element = $(element)
  339. this.$indicators = this.$element.find('.carousel-indicators')
  340. this.options = options
  341. this.paused = null
  342. this.sliding = null
  343. this.interval = null
  344. this.$active = null
  345. this.$items = null
  346.  
  347. this.options.keyboard && this.$element.on('keydown.bs.carousel', $.proxy(this.keydown, this))
  348.  
  349. this.options.pause == 'hover' && !('ontouchstart' in document.documentElement) && this.$element
  350. .on('mouseenter.bs.carousel', $.proxy(this.pause, this))
  351. .on('mouseleave.bs.carousel', $.proxy(this.cycle, this))
  352. }
  353.  
  354. Carousel.VERSION = '3.3.5'
  355.  
  356. Carousel.TRANSITION_DURATION = 600
  357.  
  358. Carousel.DEFAULTS = {
  359. interval: 5000,
  360. pause: 'hover',
  361. wrap: true,
  362. keyboard: true
  363. }
  364.  
  365. Carousel.prototype.keydown = function (e) {
  366. if (/input|textarea/i.test(e.target.tagName)) return
  367. switch (e.which) {
  368. case 37: this.prev(); break
  369. case 39: this.next(); break
  370. default: return
  371. }
  372.  
  373. e.preventDefault()
  374. }
  375.  
  376. Carousel.prototype.cycle = function (e) {
  377. e || (this.paused = false)
  378.  
  379. this.interval && clearInterval(this.interval)
  380.  
  381. this.options.interval
  382. && !this.paused
  383. && (this.interval = setInterval($.proxy(this.next, this), this.options.interval))
  384.  
  385. return this
  386. }
  387.  
  388. Carousel.prototype.getItemIndex = function (item) {
  389. this.$items = item.parent().children('.item')
  390. return this.$items.index(item || this.$active)
  391. }
  392.  
  393. Carousel.prototype.getItemForDirection = function (direction, active) {
  394. var activeIndex = this.getItemIndex(active)
  395. var willWrap = (direction == 'prev' && activeIndex === 0)
  396. || (direction == 'next' && activeIndex == (this.$items.length - 1))
  397. if (willWrap && !this.options.wrap) return active
  398. var delta = direction == 'prev' ? -1 : 1
  399. var itemIndex = (activeIndex + delta) % this.$items.length
  400. return this.$items.eq(itemIndex)
  401. }
  402.  
  403. Carousel.prototype.to = function (pos) {
  404. var that = this
  405. var activeIndex = this.getItemIndex(this.$active = this.$element.find('.item.active'))
  406.  
  407. if (pos > (this.$items.length - 1) || pos < 0) return
  408.  
  409. if (this.sliding) return this.$element.one('slid.bs.carousel', function () { that.to(pos) }) // yes, "slid"
  410. if (activeIndex == pos) return this.pause().cycle()
  411.  
  412. return this.slide(pos > activeIndex ? 'next' : 'prev', this.$items.eq(pos))
  413. }
  414.  
  415. Carousel.prototype.pause = function (e) {
  416. e || (this.paused = true)
  417.  
  418. if (this.$element.find('.next, .prev').length && $.support.transition) {
  419. this.$element.trigger($.support.transition.end)
  420. this.cycle(true)
  421. }
  422.  
  423. this.interval = clearInterval(this.interval)
  424.  
  425. return this
  426. }
  427.  
  428. Carousel.prototype.next = function () {
  429. if (this.sliding) return
  430. return this.slide('next')
  431. }
  432.  
  433. Carousel.prototype.prev = function () {
  434. if (this.sliding) return
  435. return this.slide('prev')
  436. }
  437.  
  438. Carousel.prototype.slide = function (type, next) {
  439. var $active = this.$element.find('.item.active')
  440. var $next = next || this.getItemForDirection(type, $active)
  441. var isCycling = this.interval
  442. var direction = type == 'next' ? 'left' : 'right'
  443. var that = this
  444.  
  445. if ($next.hasClass('active')) return (this.sliding = false)
  446.  
  447. var relatedTarget = $next[0]
  448. var slideEvent = $.Event('slide.bs.carousel', {
  449. relatedTarget: relatedTarget,
  450. direction: direction
  451. })
  452. this.$element.trigger(slideEvent)
  453. if (slideEvent.isDefaultPrevented()) return
  454.  
  455. this.sliding = true
  456.  
  457. isCycling && this.pause()
  458.  
  459. if (this.$indicators.length) {
  460. this.$indicators.find('.active').removeClass('active')
  461. var $nextIndicator = $(this.$indicators.children()[this.getItemIndex($next)])
  462. $nextIndicator && $nextIndicator.addClass('active')
  463. }
  464.  
  465. var slidEvent = $.Event('slid.bs.carousel', { relatedTarget: relatedTarget, direction: direction }) // yes, "slid"
  466. if ($.support.transition && this.$element.hasClass('slide')) {
  467. $next.addClass(type)
  468. $next[0].offsetWidth // force reflow
  469. $active.addClass(direction)
  470. $next.addClass(direction)
  471. $active
  472. .one('bsTransitionEnd', function () {
  473. $next.removeClass([type, direction].join(' ')).addClass('active')
  474. $active.removeClass(['active', direction].join(' '))
  475. that.sliding = false
  476. setTimeout(function () {
  477. that.$element.trigger(slidEvent)
  478. }, 0)
  479. })
  480. .emulateTransitionEnd(Carousel.TRANSITION_DURATION)
  481. } else {
  482. $active.removeClass('active')
  483. $next.addClass('active')
  484. this.sliding = false
  485. this.$element.trigger(slidEvent)
  486. }
  487.  
  488. isCycling && this.cycle()
  489.  
  490. return this
  491. }
  492.  
  493.  
  494. // CAROUSEL PLUGIN DEFINITION
  495. // ==========================
  496.  
  497. function Plugin(option) {
  498. return this.each(function () {
  499. var $this = $(this)
  500. var data = $this.data('bs.carousel')
  501. var options = $.extend({}, Carousel.DEFAULTS, $this.data(), typeof option == 'object' && option)
  502. var action = typeof option == 'string' ? option : options.slide
  503.  
  504. if (!data) $this.data('bs.carousel', (data = new Carousel(this, options)))
  505. if (typeof option == 'number') data.to(option)
  506. else if (action) data[action]()
  507. else if (options.interval) data.pause().cycle()
  508. })
  509. }
  510.  
  511. var old = $.fn.carousel
  512.  
  513. $.fn.carousel = Plugin
  514. $.fn.carousel.Constructor = Carousel
  515.  
  516.  
  517. // CAROUSEL NO CONFLICT
  518. // ====================
  519.  
  520. $.fn.carousel.noConflict = function () {
  521. $.fn.carousel = old
  522. return this
  523. }
  524.  
  525.  
  526. // CAROUSEL DATA-API
  527. // =================
  528.  
  529. var clickHandler = function (e) {
  530. var href
  531. var $this = $(this)
  532. var $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) // strip for ie7
  533. if (!$target.hasClass('carousel')) return
  534. var options = $.extend({}, $target.data(), $this.data())
  535. var slideIndex = $this.attr('data-slide-to')
  536. if (slideIndex) options.interval = false
  537.  
  538. Plugin.call($target, options)
  539.  
  540. if (slideIndex) {
  541. $target.data('bs.carousel').to(slideIndex)
  542. }
  543.  
  544. e.preventDefault()
  545. }
  546.  
  547. $(document)
  548. .on('click.bs.carousel.data-api', '[data-slide]', clickHandler)
  549. .on('click.bs.carousel.data-api', '[data-slide-to]', clickHandler)
  550.  
  551. $(window).on('load', function () {
  552. $('[data-ride="carousel"]').each(function () {
  553. var $carousel = $(this)
  554. Plugin.call($carousel, $carousel.data())
  555. })
  556. })
  557.  
  558. }(jQuery);
  559.  
  560.  
  561.  
  562. $('.carousel').carousel({
  563. interval: 0
  564. });
  565. })
  566. </script>
  567. </body>
  568. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!