Skip to content

multiSlide - плагин для плавного переключения слайдов по скроллу мышью

Notifications You must be signed in to change notification settings

internet-design-studio/multiSlide

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

#multiSlide 0.2.1

##jQuery плагин для постраничного скроллинга

##Основные характеристики

###Поддержка браузеров:

  • IE7+
  • Firefox
  • Chrome
  • Safari,
  • mobile browsers

###Поведение слайдера

  • Если скроллить, находясь в области слайдов, слайды будут переключаться вверх-вниз соответственно
  • Если скроллить вне области слайдов или в области пагинации - слайды переключаться не будут
  • При клике на пагинацию происходит скроллирование к соответствующему слайду

##Установка

###Подключить требуемые файлы

<!-- jQuery library -->
<script src="lib/jquery-1.10.2.min.js"></script>
<!--Animate Enhanced Plugin (http://playground.benbarnett.net/jquery-animate-enhanced/)-->
<script src="lib/jquery.animate-enhanced.js"></script>
<!--jQuery Easing Plugin (http://gsgd.co.uk/sandbox/jquery/easing/)-->
<script src="lib/jquery.easing.1.3.min.js"></script>
<!--jQuery Mousewheel Plugin (http://plugins.jquery.com/mousewheel/)-->
<script src="lib/jquery.mousewheel.js"></script>

<!-- MultiSlide css file -->
<link rel="stylesheet" href="multiSlide.css">
<!-- MultiSlide javascript file -->
<script src="multiSlide.js"></script>

###Создать HTML разметку

<div class="viewport-block">
	<div class="view-slide active">slide1</div>
	<div class="view-slide">slide2</div>
	<div class="view-slide">slide3</div>
</div>

###Вызвать плагин

$(document).ready(function(){
	$('.viewport-block').multiSlide();
});

##Параметры

###Базовые slideTime - Время переключения слайдов

default: 700
var multiSlide = $(".viewport-block").multiSlide({
    slideTime: 1000
});

easingType - тип анимации (или функция Безье)

default: 'easeOutExpo'
options: type or Bezier function
var multiSlide = $(".viewport-block").multiSlide({
    easingType: 'easeOutExpo'
});

activeSlideCss - класс для активного слайда

default: 'active'
var multiSlide = $(".viewport-block").multiSlide({
    activeSlideCss: 'active'
});

paging - разметка пагинации

default: '.lister li'
var multiSlide = $(".viewport-block").multiSlide({
    paging: '.view-slide-nav .nav-item'
});

###CallBacks

beforeShow - срабатывает перед показом нового слайда

var multiSlide = $(".viewport-block").multiSlide({
    beforeShow: function(currentSlide, newIndex){

    }
});

afterShow - срабатывает после показа нового слайда

var multiSlide = $(".viewport-block").multiSlide({
    afterShow: function(newIndex){

    }
});

###Public methods switchSlideNext - переключиться на следующий слайд

var multiSlide = $(".viewport-block").multiSlide();
multiSlide.switchSlideNext();

switchSlidePrev - переключиться на предыдущий слайд

var multiSlide = $(".viewport-block").multiSlide();
multiSlide.switchSlidePrev();

switchSlideTo(n) - переключиться к слайду под номером n (нумерация с 0)

var multiSlide = $(".viewport-block").multiSlide();
multiSlide.switchSlideTo(0); //к первому слайду

scrollOff - отключить переключение слайдов по mousewheel и swipe (по умолчанию включено)

var multiSlide = $(".viewport-block").multiSlide();
multiSlide.scrollOff();

scrollOn - переключение слайдов по mousewheel и swipe

var multiSlide = $(".viewport-block").multiSlide();
multiSlide.scrollOn();

About

multiSlide - плагин для плавного переключения слайдов по скроллу мышью

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published