FlexSlider - уникальный слайдер на 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 30 31 32 33 34 |
<link rel='stylesheet prefetch' href='/css/flex.css'> <script src='/js/jquery.flexslider-min.js'></script> <script src='/js/jquery.sequence-min.js'></script> <script> jQuery(document).ready(function () { var options = { autoPlay: true, autoPlayDelay: 3500, pauseOnHover: true, prevButton: true, nextButton: true, keyNavigation: true, reverseAnimationsWhenNavigatingBackwards: false, swipeNavigation: true, animateStartingFrameIn: true, preloader: true, preloadTheseFrames: [1] }; var sequence = jQuery('.sequence').sequence(options).data('sequence'); sequence.afterLoaded = function () { jQuery('.svn-slider-container .sequence-pagination').fadeIn(100); jQuery('.svn-slider-container .sequence-pagination li:nth-child(' + sequence.settings.startingFrameID + ') span').addClass('active'); }; sequence.beforeNextFrameAnimatesIn = function () { jQuery('.svn-slider-container .sequence-pagination li:not(:nth-child(' + sequence.nextFrameID + ')) span').removeClass('active'); jQuery('.svn-slider-container .sequence-pagination li:nth-child(' + sequence.nextFrameID + ') span').addClass('active'); }; jQuery('.svn-slider-container').on('click', '.sequence-pagination li', function () { jQuery(this).children('span').addClass('active'); sequence.nextFrameID = jQuery(this).index() + 1; sequence.goTo(sequence.nextFrameID); }); }); </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 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
<div id="slider"> <div class="svn-slider-container"> <div class="svn-slider" style=""> <div class="sequence" style="max-width: 1920px; height: 580px;"> <div class="sequence-prev"> PREV </div> <div class="sequence-next"> NEXT </div> <ul class="sequence-canvas"> <li class="animate-in"> <div class="slide-image left" style="background-image: url('/img/slide-tree.jpg'); background-repeat: no-repeat; background-position: center top;"></div> <section class="container-fluid"> <div class="text-block bottom"> <a class="pull-right readmore" href="#">Link</a> <div class="slide-text pull-left"> <h2 class="slide-title pull-left"><a href="#">Grow Your Business</a></h2> <p class="subtitle pull-none">Vestibulum lacinia arcu eget nulla. Class aptent taciti litora.</p> </div> </div> </section> </li> <li> <div class="slide-image left" style=" background-image: url('/img/slide-model.jpg'); background-repeat: no-repeat; background-position: center top;"></div> <section class="container-fluid"> <div class="text-block bottom"> <a class="pull-right readmore" href="#">Link</a> <div class="slide-text pull-left"> <h2 class="slide-title pull-left"><a href="#">Look to the future</a></h2> <p class="subtitle pull-none">Lorem ipsum dolor sit amet, elit vivamus mass.</p> </div> </div> </section> </li> <li> <div class="slide-image left" style=" background-image: url('/img/slide-ny-city.jpg'); background-repeat: no-repeat; background-position: center top;"></div> <section class="container-fluid"> <div class="text-block bottom"> <a class="pull-right readmore" href="#">Link</a> <div class="slide-text pull-left"> <h2 class="slide-title pull-left"><a href="#">Visit our New Office!</a></h2> <p class="subtitle pull-none">Nullam varius massa bibendum enim vestibulum nec lobortis.</p> </div> </div> </section> </li> <li> <div class="slide-image left" style=" background-image: url('/img/slide-sailing.jpg'); background-repeat: no-repeat; background-position: center top;"></div> <section class="container-fluid"> <div class="text-block bottom"> <a class="pull-right readmore" href="#">Link</a> <div class="slide-text pull-left"> <h2 class="slide-title pull-left"><a href="#">Only Stable Solutions</a></h2> <p class="subtitle pull-none">Nulla pulvinar posuere urna, vel volutpat purus sollicitudin non.</p> </div> </div> </section> </li> <li> <div class="slide-image left" style=" background-image: url('/img/slide-icon-eye.jpg'); background-repeat: no-repeat; background-position: center top;"></div> <section class="container-fluid"> <div class="text-block bottom"> <a class="pull-right readmore" href="#">Link</a> <div class="slide-text pull-left"> <h2 class="slide-title pull-left"><a href="#">Another Slide Title</a></h2> <p class="subtitle pull-none">Mauris ultricies, eros eu tempus rhoncus, elit felis facilisis leo.</p> </div> </div> </section> </li> </ul> </div> </div> </div> </div> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
