• Страница 1 из 1
  • 1
Форум CREWEBIK.ru » design studio for uCoz » ФОРУМ ВЕБ МАСТЕРОВ » Скрипты и коды » FLEXSLIDER слайдер (Уникальный слайдер на CSS3 И jQuery)
FLEXSLIDER слайдер
TicTac
/avatar/87/668404.gif
1');return false;" rel="nofollow" href="javascript://" name="7557">
04.03.2017 в 20:51

Достаточно не плохой слайдер, который использовался в моей работе Visario.
Демо слайдера можно посмотреть непосредственно в шаблоне
Установка:
1. На нужных страницах после ‹/head› вставьте:
Код
<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>

2. Сам код слайдера:
Код
<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>

3. Осталось залить два JS файла из прикреплённого архива в папку js, CSS файл в папку css и все картинки в папку img
Форум CREWEBIK.ru » design studio for uCoz » ФОРУМ ВЕБ МАСТЕРОВ » Скрипты и коды » FLEXSLIDER слайдер (Уникальный слайдер на CSS3 И jQuery)
  • Страница 1 из 1
  • 1
Поиск: