Flickity - Адаптивный слайдер с Touch эффектом на CSS3 и jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
.gallery { width: 100%; /* full width */ height: 500px; background: #FF4B53; } .gallery .gallery-cell { height: 100%; width: auto; } .gallery .gallery-cell img { height: 100%; } /* position dots in gallery */ .flickity-page-dots { bottom: 12px; } /* white circles */ .flickity-page-dots .dot { width: 12px; height: 12px; opacity: 1; background: transparent; border: 2px solid #fff; } /* fill-in selected dot */ .flickity-page-dots .dot.is-selected { background: #fff; } |
|
1 2 |
<link rel='stylesheet prefetch' href='/css/flickity.css'> <script src='/js/flickity.pkgd.js'></script> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<div class="gallery"> <div class="gallery-cell"><img src="ССЫЛКА_НА_КАРТИНКУ" alt="" /></div> <div class="gallery-cell"><img src="ССЫЛКА_НА_КАРТИНКУ" alt="" /></div> <div class="gallery-cell"><img src="ССЫЛКА_НА_КАРТИНКУ" alt="" /></div> <div class="gallery-cell"><img src="ССЫЛКА_НА_КАРТИНКУ" alt="" /></div> </div> <script> var flky = new Flickity('.gallery', { // options, defaults listed accessibility: true, // enable keyboard navigation, pressing left & right keys autoPlay: 3000, // advances to the next cell // if true, default is 3 seconds // or set time between advances in milliseconds // i.e. `autoPlay: 1000` will advance every 1 second cellAlign: 'center', // alignment of cells, 'center', 'left', or 'right' // or a decimal 0-1, 0 is beginning (left) of container, 1 is end (right) cellSelector: undefined, // specify selector for cell elements contain: false, // will contain cells to container // so no excess scroll at beginning or end // has no effect if wrapAround is enabled draggable: true, // enables dragging & flicking freeScroll: false, // enables content to be freely scrolled and flicked // without aligning cells friction: 0.2, // smaller number = easier to flick farther initialIndex: 0, // zero-based index of the initial selected cell percentPosition: true, // sets positioning in percent values, rather than pixels // Enable if items have percent widths // Disable if items have pixel widths, like images prevNextButtons: true, // creates and enables buttons to click to previous & next cells pageDots: true, // create and enable page dots resize: true, // listens to window resize events to adjust size & positions rightToLeft: false, // enables right-to-left layout setGallerySize: true, // sets the height of gallery // disable if gallery already has height set with CSS watchCSS: false, // watches the content of :after of the element // activates if #element:after { content: 'flickity' } // IE8 and Android 2.3 do not support watching :after // set watch: 'fallbackOn' to enable for these browsers wrapAround: true // at end of cells, wraps-around to first for infinite scrolling }); </script> |
