Конфигурация (параметры, опции) плагина caroufredsel

Плагин предоставляет массу возможностей для настройки вашего слайдера.

К счастью для вас, все опции необязательны …

Многие значения уже заданы по умолчанию, но их можно переопределить, перезадав новые значения при необходимости .

Обратите внимание:
Начиная с версии 6.0.0, функции onBefore, onAfter и onCreate-callback получают только один параметр.
Кроме того, некоторые варианты и функции устарели.

onCreatenullFunctionФункция, которая привязывается к функфии создания слайдера сразу после её создания и может управлять её параметрами:

ПараметрЗначение по умолчаниюТип данныхОписание
circulartrueBooleanОпределяет длжен ли слайдер быть цикличным (действие при достижении последнего элемента слайдера, остановиться либо вернуться к первому элементу).
infinitetrueBooleanОпределяет длжен ли слайдер быть «безконечным» (действие при достижении последнего элемента слайдера, вернуться к первому элементу либо подставить первый элемент без прерывания цикла) .
p.s.: можно использовать circular:fale и infinite:true вместе,но circular:true и infinite:false вместе использовать не получится.
responsivefalseBooleanДолжен ли слайдер быть «отзвычивым»
responsive. Если параметр равен true то слайды заполнят весь родительский элемент
direction«left»StringОпределяет направление прокрутки.
Возможные значения: "right", "left", "up" или "down".
widthnullNumberШирина слайдера.
Если равна null — будет растягиваться.
StringДля автоматического изменения размера контейнера слайдов при прокрутке элементов с переменной шириной "variable".
StringВведите "auto" для автоматического изминения ширины.
StringЗначение в процентах (для «резинового» слайдера).
p.s.: Применяется только для горизонтальных слайдеров.
Например: "100%".
heightnullNumberВысота слайдера.
Если null, высота применяется переменная высота (будет установлена "variable" в зависимости от высоты родителького контейнера).
StringВведите "variable" автоматически изменить высоту в пределах родительского элемента.
String"auto" уналедует высоту роителького элемента .
StringДля автоматического изменения размера можно указать высоту в процентах.
p.s.: Применяется только для вертикальных слайдеров.
Например: "100%".
align«center»Stringдля выравнивания элементов внутри родительского элемента с фиксированной шириной / высотой.
Возможные значения: "center", "left", "right" or false.
paddingnullNumberОтступ (top, right, bottom and left).
ArrayЗначение можно передать массивом значений.
Например [10, 20, 30, 40] (top, right, bottom, left)
или [0, 50] (top/bottom, left/right).
synchronisenullStringСелектор для синхронизации нескольких слайдеро (с помощью этого параметра не всегда можно добиться желаемого эффекта, но иногда бывает может пригодится, рекомендую попробовать как это рабоает перед тем как применять)
Arrayформат приминения параметров:[string selector, boolean inheritOptions, boolean sameDirection, number deviation]Например: ["#foo2", true, true, 0]
ArrayПринимает колекции в виде масива.
cookiefalseBooleanОпределяет, должна ли прокрутка начаться с места на котором она остановилась в прошлый раз. Значение хранится в куках до закрытия браузера.
StringИмя cookie для предотвращения конфликтов при использовании нескольких крутилок.
data = {
    'width',        // Новое значение ширины карусели.
    'height'        // Новая высота для карусели.
};
items
ObjectВозможные значения: visible, minimum, start, width, height и filter.
visiblenullNumberКоличество видимых элементов.
Если null, количество слайдов будет переменным.
StringВводить "variable" чтобы определить количество видимых элементов (На основе имеющегося размера).
ObjectПараметры для min и max значений.
StringСтрока, состоящая из трех секций:

  • Первый последний:"odd", "even" или "" что бы установить дефолтное значение.
  • Модификаторы:"+" или "-".
  • Количество элементов после модификатора: любое количество (1 по умолчанию)

Например: "odd+2" будет выводить количество элементов, необходимое, чтобы заполнить имеющуюся ширину , уменьшит это значение до нечетного числа и увеличит его на два.

FunctionФункция, которая возвращает количество видимых элементов.
Эта функция получает 1 параметр:

  • visibleItems: количество элементов, которые будут поместишихся ширине слайдера.
minimumnullNumberМинимальное количество слайдов, необходимых для создания карусель.
Если null, числоэлементов наследуется и увеличивается на 1.
start0NumberНомер слайда с которого следует начать прокрутку.p.s.: Может быть отрицательным числом.
StringВводить "random" чтобы начать прорутку со случано выбраного слайда.
StringСелектор элемента, с которого нужно начать слайдшоу.
Например: "#foo li:first".
jQuery-objectТоже самое но передается JQuery-объектом.
Например: $("#foo li:first").
BooleanЕсли ‘true’, то плагин будет искать якорь, чтобы начать с элемента переданого в url.
Например: http://domain.com#startitem
ArrayМассив из вариантов таком же порядке как они перечислены выше должны быть проверены на допустимость значения.
widthnullNumberШирина элементов.
Если ‘null’, будет установленная переменная ширина.
StringВведите «variable» для создания из слайдов переменой ширины.
StringВведите процентное значение что бы ширина изменялась при изминении ширины окна браузера.
Примечание: Применяется только на отзывчивых («responsive»), вертикальных слайдерах.
Например: "50%".
heightnullNumberВысота слайдов.
Если ‘null', будет установлена переменная высота ("variable")
StringВведите "variable" для создания слайдера со слайдами переменной высоты.
StringВысота в процентах для изминения высоты слайда в звисимости от высоты окна браузера.
Примечание: Применяется только на отзывчивых, горизонтальных слайдшоу.
Например: "50%".
filternullStringПараметры котрым должен соответсвоать элемент что бы быть слайдом.
Если null, то все элементы внутри слайдера будут считаться слайдами.
Если параметр содержит :hidden-elements, то они будут установленны в ":visible".  Эта опция не применима к не зацикленным слайдерам.
NumberНомер выдимого элемента слайдера items.visible.
StringВведите  "variable" для того что бы  заполнить слайдер  переменным числом элементов в зависимости от его ширины.
scrollObjectПараметр определяющий конфигурацию прокрутки, параметры: items, fx, easing, duration, pauseOnHover, queue, event, conditions, onBefore, onAfter, onEnd.
itemsnullNumberЧисло элементов для прокрутки.
Если  null, то используется число видимых элементов слайдера (сколько помещается , столько и крутится).
StringВведите "page" для вывода навигации типо — предыдущая/следующая .
StringСтока состоящая из трех элементов:

  • base:"odd", "even" (четный,  нечетный ) или ""(пустая строка по умолчанию).
  • adjustment:"+" или "-".
  • amount:любое число (1 по умолчанию)

Например: "odd+2" четный элемент + 2.

fx«scroll»StringУказывает, какой эффект использовать для перехода.
Возможные значения: "none", "scroll", "directscroll", "fade", "crossfade", "cover", "cover-fade", "uncover" или "uncover-fade".
easing«swing»StringУказывает какой функцией пользоваться для при замедлении перехода. jQuery  — функци по умолчанию: "linear" and "swing", built in: "quadratic", "cubic" and "elastic".
duration500NumberУстанавливает эффект замедления эффекта.
Если менее число меньше 10  то интерпретируется как скорость (пикселей в миллисекунду).
pauseOnHoverfalseBooleanОпределяет, должен ли быть приостановлена ​прокрутка при событии «onMouseOver» .
StringEnter "resume" to let the timeout resume instead of restart «onMouseOut».
StringEnter "immediate" to immediately stop «onMouseOver» and resume «onMouseOut» a scrolling carousel.
StringEnter "immediate-resume" for both the options above.
queuefalseBoolean Должна ли быть быть изменена очередь, если слайдер в настоящий момент анимирован (движется).
StringВведите "first" если хотите изменить состояние очереди только при следующей интерации.
StringВведите «last» в очереди останется только последний элемент (все будут удалены).
event«click»StringСобытие что бы вызвать  прокрутку к предыдущему следующему  элементу.
conditionsnullFunctionФункция которая проверяет должен ли слайдер начать прокрутку.
если функция не вернет  true, слаудер не начнет прокрутку.Эта функция получает один параметр: из списка ниже
direction  //  Направление.
onBeforenullFunctionФункция которая выполнится перед прокруткой слайдера
data = {
    'width',        // The new width for the carousel.
    'height',       // The new height for the carousel.
    'items': {
        'old',          // A jQuery-object of the items that are visible before scrolling.
        'skipped',      // A jQuery-object of the items between the old and new items.
        'visible'       // A jQuery-object of the items that will be visible after scrolling.
    },
    'scroll': {
        'items',        //  The number of items scrolled.
        'direction',    //  The direction of the transition.
        'duration'      //  The duration of the transition.
    }
};
onAfternullFunctionFunction that will be called right after the carousel finished scrolling.
This function receives the same parameter as the onBefore-callback function.
onEndnullFunctionFunction to call when a non-circular carousel reaches its start or end.
This function receives one parameter:
direction  //  The direction of the transition.
NumberA number for scroll.items or -if greater than 50- for scroll.duration.
StringA string for scroll.easing.
auto
Click to hide the options for this object.
ObjectA map of the configuration used for automatic scrolling: play, button, timeoutDuration, delay, progress, items, fx, easing, duration, pauseOnHover, pauseOnEvent, pauseOnResize, queue, event, conditions, onBefore, onAfter, onEnd, onTimeoutStart, onTimeoutEnd and onTimeoutPause.
This object is the same as the scroll object, except for play, button, timeoutDuration, delay, progress, pauseOnEvent, pauseOnResize, onTimeoutStart, onTimeoutEnd and onTimeoutPause. What is not specified in this object, will be inherited from the scroll object.
playtrueBooleanDetermines whether the carousel should scroll automatically or not.
buttonnullStringA jQuery-selector for the HTML element that should toggle the carousel between playing and paused.
jQuery-objectA jQuery-object of the HTML element that should toggle the carousel between playing and paused.
FunctionA function that returns any of the other valid values.
timeoutDuration5 * [auto.duration]NumberThe amount of milliseconds the carousel will pause.
If auto.duration is less then 10 -to use a speed (in pixels/milliseconds) instead of a duration-, the default value is 2500.
delay0NumberAdditional delay in milliseconds before the carousel starts scrolling the first time.
Hint: This can also be a negative number.
progressfalseObjectA map for bar, updater and interval.
barnullStringA jQuery-selector for the HTML element that should be passed to the updater-callback function.
jQuery-objectA jQuery-object for the HTML element that should be passed to the updater-callback function.
updater$.fn.carouFredSel.progressbarUpdaterFunctionFunction that will be called to update the progressbar.
This function receives one parameter:
percentage //  A percentage of the time passed in the timeout (from 0 to 100).
interval50NumberThe amount of milliseconds the between triggering the updater-callback function.
StringA string for auto.progress.bar.
jQuery-objectA jQuery-object for auto.progress.bar.
items[scroll.items]См. описание scroll.items.
fx[scroll.fx]См. описание scroll.fx.
easing[scroll.easing]См. описание for scroll.easing.
duration[scroll.duration]См. описание scroll.duration.
pauseOnHover[scroll.pauseOnHover]См. описание scroll.pauseOnHover.
pauseOnEventfalseBooleanDetermines whether the timeout between transitions should be paused when the event on the button is triggered.
See the description for scroll.pauseOnHover.
pauseOnResizetrueBooleanDetermines whether the timeout between transitions should be paused when resizing the window.
Note: Only applies on responsive carousels.
queue[scroll.queue]См. описание scroll.queue.
event[scroll.event]См. описание scroll.event.
conditions[scroll.conditions]См. описание scroll.conditions.
onBefore[scroll.onBefore]См. описание scroll.onBefore.
onAfter[scroll.onAfter]См. описание scroll.onAfter.
onEnd[scroll.onEnd]См. описание scroll.onEnd.
onTimeoutStartnullFunctionFunction that will be called when starting the pausing-timer.
This function receives 2 parameters:

  • percentage: The percentage the auto.timeoutDuration is at.
  • duration: The remaining time left in milliseconds.
onTimeoutEndnullFunctionFunction that will be called when ending the pausing-timer.
Functionality is the same as for the onTimeoutStart-function.
onTimeoutPausenullFunctionFunction that will be called when pausing the pausing-timer.
Functionality is the same as for the onTimeoutStart-function.
BooleanTrue or false for auto.play.
NumberA number for auto.timeoutDuration.
prev
Click to hide the options for this object.
ObjectA map of the configuration used for scrolling backwards using the «previous» button or key: button, key, items, fx, easing, duration, pauseOnHover, queue, event, conditions, onBefore, onAfter and onEnd.
This object is the same as the scroll object, except for button and key. What is not specified in this object, will be inherited from the scroll object.
buttonnullStringA jQuery-selector for the HTML element that should scroll the carousel backward.
jQuery-objectA jQuery-object of the HTML element that should scroll the carousel backward.
FunctionA function that returns any of the other valid values.
keynullNumberThe keyCode of the keyboard-key that should scroll the carousel backward.
StringCan be: "up", "down", "left" or "right".
items[scroll.items]See the description for scroll.items.
fx[scroll.fx]See the description for scroll.fx.
easing[scroll.easing]See the description for scroll.easing.
duration[scroll.duration]See the description for scroll.duration.
StringEnter "auto" to let the plugin calculate a speed for the transition instead of using a duration. This could be desirable when using the slideTo event.Note: The speed is calculated by deviding scroll.duration by scroll.items and multiplying it with the amount of items to scroll.
pauseOnHover[scroll.pauseOnHover]See the description for scroll.pauseOnHover.
queue[scroll.queue]See the description for scroll.queue.
event[scroll.event]See the description for scroll.event.
conditions[scroll.conditions]See the description for scroll.conditions.
onBefore[scroll.onBefore]See the description for scroll.onBefore.
onAfter[scroll.onAfter]See the description for scroll.onAfter.
onEnd[scroll.onEnd]See the description for scroll.onEnd.
StringAny valid string for prev.button or prev.key.
NumberA number for prev.key.
next
Click to hide the options for this object.
ObjectA map of the configuration used for scrolling forward using the «next» button or key: button, key, items, fx, easing, duration, pauseOnHover, queue, event, conditions, onBefore, onAfter and onEnd.
This object is the same as the scroll object, except for button and key. What is not specified in this object, will be inherited from the scroll object.
buttonnullStringA jQuery-selector for the HTML element that should scroll the carousel forward.
jQuery-objectA jQuery-object of the HTML element that should scroll the carousel forward.
FunctionA function that returns any of the other valid values.
keynullNumberThe keyCode of the keyboard-key that should scroll the carousel forward.
StringCan be: "up", "down", "left" or "right".
items[scroll.items]See the description for scroll.items.
fx[scroll.fx]See the description for scroll.fx.
easing[scroll.easing]See the description for scroll.easing.
duration[scroll.duration]See the description for scroll.duration.
StringEnter "auto" to let the plugin calculate a speed for the transition instead of using a duration. This could be desirable when using the slideTo event.Note: The speed is calculated by deviding scroll.duration by scroll.items and multiplying it with the amount of items to scroll.
pauseOnHover[scroll.pauseOnHover]See the description for scroll.pauseOnHover.
queue[scroll.queue]See the description for scroll.queue.
event[scroll.event]See the description for scroll.event.
conditions[scroll.conditions]See the description for scroll.conditions.
onBefore[scroll.onBefore]See the description for scroll.onBefore.
onAfter[scroll.onAfter]See the description for scroll.onAfter.
onEnd[scroll.onEnd]See the description for scroll.onEnd.
StringAny valid string for next.button or next.key.
NumberA number for next.key.
pagination
Click to hide the options for this object.
ObjectA map of the configuration used for scrolling via the «pagination» buttons/bullets or keys: container, keys, anchorBuilder, items, deviation, fx, easing, duration, pauseOnHover, queue, event, conditions, onBefore, onAfter and onEnd.
This object is the same as the scroll object, except for container, keys, anchorBuilder and deviation. What is not specified in this object, will be inherited from the scroll object.
containernullStringA jQuery-selector for the HTML element that should contain the pagination-links.
jQuery-objectA jQuery-object of the HTML element that should contain the pagination-links.
FunctionA function that returns any of the other valid values.
keysfalseBooleanDetermines whether the carousel can be controlled via the keyboard-key 1-9.
Note: any page after page 9 will not be accessible via the keyboard.
anchorBuildernullFunctionFunction to use for building the anchors of the pagination.
If null, the public method pageAnchorBuilder is used:
$.fn.carouFredSel.pageAnchorBuilder: function(nr, item) {
return '<a href="#'+nr+'"><span>'+nr+'</span></a>';
};

This function receives 1 parameter:
nr //  The page number.
BooleanIf false, instead of building the pagination, the elements allready available in the container will be used as anchors.
items[items.visible]The number of items per page.
deviation0The number to deviate the selected bullet.
fx[scroll.fx]См. описание scroll.fx.
easing[scroll.easing]См. описание scroll.easing.
duration[scroll.duration]См. описание scroll.duration.
StringEnter "auto" to let the plugin calculate a speed for the transition instead of using a duration.Note: The speed is calculated by deviding scroll.duration by scroll.items and multiplying it with the amount of items to scroll.
pauseOnHover[scroll.pauseOnHover]См. описание scroll.pauseOnHover.
queue[scroll.queue]См. описание scroll.queue.
event[scroll.event]См. описание scroll.event.
conditions[scroll.conditions]См. описание scroll.conditions.
onBefore[scroll.onBefore]См. описание scroll.onBefore.
onAfter[scroll.onAfter]См. описание scroll.onAfter.
onEnd[scroll.onEnd]См. описание scroll.onEnd.
StringAny valid string for pagination.container.
BooleanTrue or false for pagination.keys.
swipe
Click to hide the options for this object.
ObjectA map of the configuration used for scrolling via swiping (on touch-devices) or dragging (using a mouse): onTouch, onMouse, options, items, fx, easing, duration, pauseOnHover, queue, conditions, onBefore, onAfter and onEnd.
This object is the same as the scroll object, except for onTouch, onMouse and options. What is not specified in this object, will be inherited from the prev or next object.To enable this feature, you’ll need to include the jQuery.touchSwipe-plugin.
onTouchfalseBooleanDetermines whether the carousel should scroll via swiping gestures (on touch-devices only).
onMousefalseBooleanDetermines whether the carousel should scroll via dragging (on non-touch-devices only).
optionsnullObjectA map of the configuration used for the touchSwipe-plugin.
items[scroll.items]See the description for scroll.items.
fx[scroll.fx]See the description for scroll.fx.
easing[scroll.easing]See the description for scroll.easing.
duration[scroll.duration]See the description for scroll.duration.
StringEnter "auto" to let the plugin calculate a speed for the transition instead of using a duration. This could be desirable when using the slideTo event.Note: The speed is calculated by deviding scroll.duration by scroll.items and multiplying it with the amount of items to scroll.
pauseOnHover[scroll.pauseOnHover]See the description for scroll.pauseOnHover.
[scroll.queue]See the description for scroll.queue.
conditions[scroll.conditions]See the description for scroll.conditions.
onBefore[scroll.onBefore]See the description for scroll.onBefore.
onAfter[scroll.onAfter]See the description for scroll.onAfter.
onEnd[scroll.onEnd]See the description for scroll.onEnd.
BooleanTrue or false for swipe.onTouch.
NumberA number for swipe.items.
mousewheel
Click to hide the options for this object.
ObjectA map of the configuration used for scrolling via the mousewheel: items, fx, easing, duration, pauseOnHover, queue, conditions, onBefore, onAfter and onEnd.
This object is the same as the scroll object. What is not specified in this object, will be inherited from the prev or next object.To enable this feature, you’ll need to include the jQuery.mousewheel-plugin.
items[scroll.items]See the description for scroll.items.
fx[scroll.fx]See the description for scroll.fx.
easing[scroll.easing]See the description for scroll.easing.
duration[scroll.duration]See the description for scroll.duration.
StringEnter "auto" to let the plugin calculate a speed for the transition instead of using a duration. This could be desirable when using the slideTo event.Note: The speed is calculated by deviding scroll.duration by scroll.items and multiplying it with the amount of items to scroll.
pauseOnHover[scroll.pauseOnHover]See the description for scroll.pauseOnHover.
queue[scroll.queue]See the description for scroll.queue.
conditions[scroll.conditions]See the description for scroll.conditions.
onBefore[scroll.onBefore]See the description for scroll.onBefore.
onAfter[scroll.onAfter]See the description for scroll.onAfter.
onEnd[scroll.onEnd]See the description for scroll.onEnd.
BooleanTrue to copy all options from the scroll object.
NumberA number for mousewheel.items.

P.S. Во всех callback functions, this является  HTML элементом  слайдера.
Except for the auto.progress.updater-callback function, where it refers to the HTML-element of auto.progress.bar; and the pagination.anchorBuilder-callback function, where it refers to the HTML-element of the current item.

Опции плагина

После конфигурации-объекта, второй объект может быть передан в метод, содержащий параметры самого плагина.

ОпцияЗначения по умолчаниюТипОписание
debugfalseBooleanОпределяет, следует ли отладочную информацию в console.log.
transitionfalseBooleanИспользовать Jquery анимации вместо css3? необходимо наличие плагина jQuery.transit-plugin.
onWindowResizethrottleStringИспользуйте  "throttle" для использования onWindowResize. Или "debounce"  используйте debounce-plugin. Необходимо наличие плагин jQuery.throttle-debounce-plugin.
wrapperObjectКонфигурация для оболочки: element and classname.
element«div»StringDOM элемент используемый в качестве обертки
classname«caroufredsel_wrapper»StringИмя класса обертки.
StringВведите "parent"  что бы использовать родительский элемент, как обертку слайдера.
events
ObjectШаблон для скрытых активных и не активных элементов управления.
prefix«»StringПрефикс всех событий.
namespace«cfs»StringПространство имен всех событий.
classnamesObjectШаблон для скрытых активных и не активных элементов управления.
selected«selected»StringИмя класса для активного элемента пагинатора.
hidden«hidden»StringИмя класса для скрытия кнопок навигации.
disabled«disabled»StringИмя класса для не активных кнопок навигации.
paused«paused»StringИмя класса для кнопки плей (добавляется когда слайдер на паузе).
stopped«stopped»StringИмя класса для кнопки плей (добавляется когда слайдер остановлен).

Передать параметры скрипту

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.carouFredSel.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#foo1").carouFredSel();
        $("#foo2").carouFredSel();
        $("#foo3").carouFredSel({
            items       : 3,
            direction   : "up"
        }, {
            debug       : true
        });
    });
</script>

Примечание: Эти изменения будут применяться только к слайдеру с селектором # foo3.

Переопределение дефолтных значений параметров

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.carouFredSel.js"></script>
<script type="text/javascript">
    $.fn.carouFredSel.defaults.items.visible    = 3;
    $.fn.carouFredSel.defaults.direction        = "up";
    $(document).ready(function() {
        $("#foo1").carouFredSel();
        $("#foo2").carouFredSel();
        $("#foo3").carouFredSel();
    });
</script>

Примечание: Эти изменения будут применяться ко всем слайдерам на странице.

Нужна помощь?

Если у вас возникли вопросы, спрашивайте вкоментах.

 

  1. Возможно ли сделать так, чтоб картинки на заднем плане были затемнены, а картинка на переднем плане оставалась такой же?

    • через css первому слайду сделать нормальный стиль, а остальные по молчанию затемнить типо так:

      .item{
      /*
      темный стиль
      */
      }

      .item:first-child{
      /*
      светлый стиль для первого слайда
      */
      }

  2. Подскажите, как менять Количество видимых элементов в зависимости от размера экрана?

  3. Как расположить картинки вот в таком порядке https://hsto.org/files/e36/1cc/012/e361cc0123e9454780b930c43e0a409d.jpg, и если картинок будет 10, чтоб они не вылазили за поля?
    вот я попробовала, при паузе картинки в нормальном положении, но когда начинают двигаться, то последняя сьезжает, можете подсказать??буду очень благодарна!!
    приведу часть кода:

    $(function() {
    	var _center = {
    		width: 364,
    		height: 354,
    		marginLeft: 0,
    		marginTop: 50,
    		marginRight: 0
    	};
    	var _left = {
    		width: 306,
    		height: 289,        
    		marginLeft: 150,
    		marginTop: 75,
    		marginRight: -150
    	};
    	var _right = {
    		width: 306,
    		height: 289,
    		marginLeft: -150,
    		marginTop: 75,
    		marginRight: 150
    	};
    	var _outLeft = {
    		width: 238,
    		height: 224,
    		marginLeft: 0,
    		marginTop: 100,
    		marginRight: -200
    	};
    	var _outRight = {
    		width: 238,
    		height: 224,
    		marginLeft: -200,
    		marginTop: 100,
    		marginRight: 0
    	};
    	$('#carousel').carouFredSel({
    		width: 900,
    		height: 600,
    		align: false,
    		items: {
    			visible: 3,
    			width: 50
    		},
    		scroll: {
    			items: 1,
    			duration: 400,
    			onBefore: function( data ) {
    				data.items.visible.eq( 0 ).animate(_outLeft);
    				data.items.visible.eq( 1 ).animate(_left);
    				data.items.visible.eq( 2 ).animate(_center);
    				data.items.visible.eq( 3 ).animate(_right).css({ zIndex: 1 });
    				data.items.visible.eq( 4 ).next().css(_outRight).css({ zIndex: 0 });
     
    				setTimeout(function() {
    					data.items.visible.eq( 0 ).css({ zIndex: 1 });
    					data.items.visible.eq( 1 ).css({ zIndex: 2 });
    					data.items.visible.eq( 2 ).css({ zIndex: 3 });
    					data.items.visible.eq( 3 ).css({ zIndex: 2 });
                        data.items.visible.eq( 4 ).css({ zIndex: 1 });
    				}, 400);
    			}
    		}
    	});
    $('#carousel').children().eq( 0 ).css(_outLeft).css({ zIndex: 1 });
    	$('#carousel').children().eq( 1 ).css(_left).css({ zIndex: 2 });
    	$('#carousel').children().eq( 2 ).css(_center).css({ zIndex: 3 });
    	$('#carousel').children().eq( 3 ).css(_right).css({ zIndex: 2 });
    	$('#carousel').children().eq( 4 ).css(_outRight).css({ zIndex: 1 });
    });
    
  4. Владимир,подскажите, пожалуйста как сделать. Нужно чтобы прокрутка включалась только если не все элементы вошли в строку.
    Ниже приведен пример кода.
    Например,сейчас, если элемента всего 2 и места в строке еще полно, один элемент скрывается.
    Хотелось бы чтобы все элементы выводились в строку. А если все элементы не помещаются, только тогда подключалась прокрутка.

    $(ul).carouFredSel({
    width: «100%»,
    height: 100,
    circular: false,
    //infinite: false,
    responsive: true,
    auto : false,
    prev:’#cwprev’+ elems[i].id,
    next:’#cwnext’+ elems[i].id,
    align:»center»,
    scroll:{
    items:1,
    duration:1000
    },

    });

  5. Привет, подскажите что не так не могу понять, стрелка превью слайдит по 2 слайда, некст по 1 (мне нужно что виден бы 1слайд и слайдил по 1), причем слайдит рандомно, если идут итемы 1,2,3, я жму некст 1 уходит, и если нажму прев то не 1 слайд возвращается а 2 или 3 (чаще 2), уже перепробовал кучу комбинаций не помогают, ниже код

    width: ‘auto’,
    height: ‘auto’,
    responsive: true,
    pagination: false,
    align: ‘left’,
    circular: false,
    infinite: false,
    auto: false,
    scroll:{
    items:1,
    },
    prev : {
    button : function() {
    return tab.find(‘.cfs-nav-left’);
    },
    key : «left»,
    items:1
    },
    next : {
    button : function() {
    return tab.find(‘.cfs-nav-right’);
    },
    key : «right»,
    items:1
    },

  6. еще заметил, что когда жму назад, клонируется слайд который я перематываю и из-за этого как бы перематывает 2 слайда, тот который перематывается и его клон. Почему так не понятно

  7. Скажите пожалуйста, как сделать два таких слайдера на одной странице???

  8. Здравствуйте, при выравнивании по центру, ( align: ‘center’) в центр помещается первое изображение — остальные вправа и за рамки, т.е. левая область просто пустая.
    есть способ это исправить?

  9. Владимир, помогите разобраться с настройкой высоты и ширины картинок в caroufredsel. Я пытаюсь объединить параллакс эффект с caroufredsel в фоне. Но никак не могу добиться корректного отображения размеров картинокю Вот ссылка на fiddle: https://jsfiddle.net/user/pupsik111/fiddles/ Буду благодарен за любую помощь

    • я бы с радостью помог, но в том примере что по ссылке непонятно где сам caroufredsel, точнее даже там нет caroufredsel поэтому неясно какие с ним проблемы

  10. Владимир, а как правильно узнать индекс или id слайда, который показывается в данный момент, чтобы использовать этот индекс в функции onAfter или onBefore? Например, чтобы текстовую информацию про этот слайд показать.

  11. подскажите, как можно по клику вернуться к первому слайду. и закрыть слайдер после последнего слайда?

    • 1. Для перехода к слайду есть триггер

      // .selector - это селектор на котором висит слайдер например  $('.selector').carouFredSel( ...
      //3 - index (номер слайда начиная с 0 ) слайда к которому нужно промотать.
      $('.button').on('click', function(){
           $('.selector').trigger('slideTo', 3);
      });
      

      2. Закрыть понятие растяжимое, можно сделать $(‘.selector’).trigger(«destroy»); и отключить carouFredSel потом опять инициализировать если понадобится, можно просто сделать $(‘.selector’).hide() и скрыть через css или вообще $(‘.selector’).remove(), зависит от того зачем требуется.

  12. По триггеру slideTo не выходит сделать, т..к. после прокрутки слайда, они меняют нумерацию.
    Пример. Есть слайды 1(0), 2(1), 3(2). Когда третий дошел до конца, то он становиться 0 по номеру при клике на кнопку.
    пытаюсь реализовать такой код

    $(document).ready(function() {
    
    $('#slider').addClass('item-carousel');
    
    var $highlight = function() {  
        $( "#sliders" ).hide()
     }
     
    $( ".play" ).click(function() { 
    
       $('.item-carousel').trigger("destroy"); 
      
      $( "#sliders" ).show()
        
      $('.item-carousel').carouFredSel({
            auto: {						
    		progress: "#bar",
                    onEnd: 	$highlight	 
    		},
            
            items               : {						
    		visible             : 1,
    		start: 0
    						},		
            direction           : "left",
    	circular            : false,
    	infinite            : false,
            scroll : {
                items           : 1,           
                duration        : 500,
                pauseOnHover    : false,
    	    fx : "crossfade",
    	    easing          : "swing",
    	    queue           : false,
                event           : "click",            		
            },
    	swipe : { onTouch : false, onMouse : false },
    	transition: true,
    		
        });
    	
       $('.item-carousel').trigger('slideTo', 0); 
    
      });
    
    });
    

    смысл кода — жму по кнопке Пуск и запускается слайдер. После последнего слайда слайдер закрывается. Заново жму кнопку Пуск — опять слайдер с первого слайдера запускается. никак не могу добиться нужного эффекта, чтобы во второй раз слайдер открывался с первого слайда, а не с последнего. И чтобы закрывался после последнего (сейчас при использовании onEnd закрывается перед последним).

    • все не так $(‘.item-carousel’).trigger(‘slideTo’, 0); пролистает на первый слайд , не зависимо от его текущей позиции индекс берется на момент старта слайдера , то есть он константа можно сказать? если этого недостаточно то могу сказать что текущую позицию активного слайда можно так узнать — $(‘.item-carousel’).triggerHandler(‘currentPosition’);

  13. что-то я запутался :) у меня вот идет второй слайд, я жму на кнопку где прописан $(‘.item-carousel’).trigger(‘slideTo’, 0); и у меня начинает проигрываться тот же слайд. Если ставлю к примеру $(‘.item-carousel’).trigger(‘slideTo’, 2); — то у меня отпрыгивает на 3 слайда назад. А константой служит не первый слайд инициализированный, а тот слайд, что сейчас идет 0. нельзя сделать не по нумерации слайда к примеру, а по id слайда как нибудь?

  14. Здравствуйте! Вот у меня такой вопрос, можно ли заменить нумерацию чем-нибудь другим? Блоками например.Чтобы выводились не цифры!

  15. Здравствуйте Владимир! На сайте установлена карусель. Мне необходимо было сделать, чтобы карусель была адаптивная, и количество видимых элементов в ней изменялось в зависимости от ширины экрана. Я добился этого. Но появилась проблема: при любом изменении ширины экрана кнопки навигации принимают класс «hidden» и скрываются. Уже несколько дней не могу понять, почему так происходит. Решил спросить у Вас. Пожалуйста, посоветуйте, как я должен сделать, чтобы кнопки оставались всегда видимыми?

    Благодарю. Дмитрий.

    • возможно проблема в том что количество отображаемых элементов галереи вашей реализации недостаточное для прокрутки , есть много вариантов того что может пойти не так, неплохо было бы посмотреть гист с кодом, но вобще адаптивные галери на caroufredsel делать не всегда легко, много неочевидных моментов, даже мне трудно бывает что то реализовать через него поэтому если это не что-то очень особенное возможно стоит использовать http://owlgraphic.com/owlcarousel/ из минусов этого скриптика то что он не умеет делать зацикленные крутилки, зато использует css для адаптивности, и более плавно работает, caroufredsel все таки достаточно старый и уже появились альтернативы

  16. Здравствуйте Владимир еще раз!
    Извините, я не понял, что такое гист. Но код карусели вот такой:

    $(window).load(function() {
        $.fn.startCarousel = function() {
            $.each($('.slider-block .items'), function(i, val) {
                var max = 0;
    
                $.each($(val).find('img'), function() {
                    var h = $(this).height();
                    if (h > max) max = h;
                    $(this).parent().parent().parent().find('.book').css('height', h);
                });
    
                $(val).find('.noim .book').css('height', 270);
                $(val).find('.cell').css('height', max);
                $(val).find('.item').css('height', max+170);
    
                if( ($(window).width() > 1170)&&($(document).width() > 1170) ) {
                    var itemnumb = 5;
                } else if ( ($(window).width() > 920)&&($(document).width() > 920) ) {
                    var itemnumb = 4;
                } else if ( ($(window).width() > 700)&&($(document).width() > 700) ) {
                    var itemnumb = 3;
                } else if ( ($(window).width() > 470)&&($(document).width() > 470) ) {
                    var itemnumb = 2;
                } else if ( ($(window).width() > 0)&&($(document).width() > 0) ) {
                    var itemnumb = 1;
                }
    
                $(val).carouFredSel({
                    infinite:true,
                    items: {visible:itemnumb,minimum:1,maximum:15},
                    auto: false,
                    pagination: false,
                    mousewheel: false,
                    scroll : {
                        fx : 'scroll',
                items : 'variable',
                duration : 700
            },
                prev : $(val).parent().find('.prev'),
                next : $(val).parent().find('.next'),
                swipe: {
                    onTouch: true
                }
            });
            });
        };
    
        $(this).startCarousel();
    
        $(window).resize(function() {
            $(this).startCarousel();
        });
    });
    
    •        $(window).load(function () {
                  $.fn.startCarousel = function () {
                      $.each($('.slider-block .items'), function (i, val) {
                          var max = 0;
      
                          $.each($(val).find('img'), function () {
                              var h = $(this).height();
                              if (h > max) max = h;
                              $(this).parent().parent().parent().find('.book').css('height', h);
                          });
      
                          $(val).find('.noim .book').css('height', 270);
                          $(val).find('.cell').css('height', max);
                          $(val).find('.item').css('height', max + 170);
      
                          if (($(window).width() > 1170) && ($(document).width() > 1170)) {
                              var itemnumb = 5;
                          } else if (($(window).width() > 920) && ($(document).width() > 920)) {
                              var itemnumb = 4;
                          } else if (($(window).width() > 700) && ($(document).width() > 700)) {
                              var itemnumb = 3;
                          } else if (($(window).width() > 470) && ($(document).width() > 470)) {
                              var itemnumb = 2;
                          } else if (($(window).width() > 0) && ($(document).width() > 0)) {
                              var itemnumb = 1;
                          }
                          var args = {
                              infinite: true,
                              items: {
                                  visible: itemnumb,
                                  minimum: 1,
                                  maximum: 15
                              },
                              auto: false,
                              pagination: false,
                              mousewheel: false,
                              scroll: {
                                  fx: 'scroll',
                                  items: 'variable',
                                  duration: 700
                              },
                              prev: $(val).closest('.slider-block').find('.prev'),
                              next: $(val).closest('.slider-block').find('.next'),
                              swipe: {
                                  onTouch: true
                              }
                          };
                          console.log(args);
                          $(val).carouFredSel(args);
                      });
                  };
      
                  $(this).startCarousel();
      
                  $(window).resize(function () {
                      $(this).startCarousel();
                  });
              });
      
      <div class="slider-block">
          <div class="items">
              <div class="item">1</div>
              <div class="item">2</div>
              <div class="item">3</div>
              <div class="item">...</div>
          </div>
      
          <div class="prev"> < </div>
          <div class="next"> > </div>
      </div>
      </div>
      

      вот так примерно нужно сделать

  17. Спасибо Владимир! Я разобрался сам. Решение — костыль, ну а куда деваться…

    Благодарю за внимание!

  18. Здравствуйте, Владимир.
    Столкнулся с такой проблемой: есть страница со скриптом http://steshka.ru/trolli.html, НО при просмотре на мобильном, картинки в карусели не сжимаются(адаптивно) как на всем сайте, перекопал весь код сайта, рыл 2 дня, дело уже было ради принципа. В итоге, обнаружил, что в исходнике http://coolcarousels.frebsite.nl/c/32/ отсутствует meta name=»viewport», а у меня на сайте он есть (сайт адаптивный), если убрать viewport, то карусель становится адаптивной, но сайт искажается. Подскажите пожалуйста, какой параметр или класс настроить, чтобы карусель заработала в адаптивном режиме. owlcarousel уже опробовал, но нужен именно этот слайдер, заранее спасибо.

  19. Добрый день, Владимир. Подскажите, пожалуйста, а можно ли подключить на галерею к которой уже подключен этот скрипт, еще и второй скрипт, который будет отвечать за увеличение картинки по клику. У меня почему-то, то один скрипт не работает, то второй.

  20. добрый день, как параллельно подключить скрипт увеличивающий картинку по клику?

  21. Добрый день. А как сделать чтоб слайдер моментально останавливался при наведении мыши ?
    для плавного движения поставил так пока блоки не выравняются не останавливается
    duration :6000,
    timeoutDuration:1,
    delay:500,

  22. Добрый день, Владимир!
    Подскажите, как организовать callback на событие перед и после загрузки всей галереи, а то много элементов и пока не применится скрипт визуальное восприятие галереи страдает(все элементы списком вниз).
    Заранее благодарен за помощь.

  23. Здравствуйте, подскажите пожалуйста, мне нужно чтобы при resize окна выводилось столько слайдов сколько помещается по ширине окна. Если перезагрузить выводится нужное количество, но нужно именно при resize

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *