Что в данном коде значит var slider = multiItemSlider('.slider', { isCycling: true });?

Question

[df3a2df13]

Что именно этот код делает?

Вот код https://jsfiddle.net/jeq1ftr5/

238 строчка

Answer 1

[Евгений]

Ты вызываешь функцию multiItemSlider, передав в неё нужные параметры:
1 - очевидно, это селектор, по которому ищется соответствующая нода
2 - судя по всему, это объект с настройками, isCycling - судя по всему отвечает за автоматическое переключение слайдов
он возвращает объект с методами, которые, ты можешь использовать далее по коду, допустим, если ты напишешь ниже этой переменной slider.stop() то слайдер остановится

И да, это очень круто, что ты пытаешься разобраться в чужих исходниках, но я думаю, что к такой вещи должно быть какое-то описание, разве в исходниках не было никаких комментариев, документации к тому, как этот слайдер используется, что можно в него передать, что возвращает?

Comments

[df3a2df13]

нету там ни чего там нормально если делать, через function multiItemSlider() не работает,
https://jsfiddle.net/jyc7kwsh/1/

[Евгений]

Из https://jsfiddle.net/jeq1ftr5/
строка 2:
var multiItemSlider = (function () {
строка 236:
}());
Эта функция - IIFE - анонимная самовызывающаяся функция, тут реализуется паттерн модуль,
в случае https://jsfiddle.net/jyc7kwsh/1/ не работает, так как функция на 20 строке
return function (selector, config) {
не вызвана, она только возвращена
Статья по теме: https://learn.javascript.ru/closures-module

[Евгений]

df3a2df13, в примере https://jsfiddle.net/jyc7kwsh/1/ всё будет работать, если ты сделаешь вот так

multiItemSlider()('.slider', {
      isCycling: true
    })

[df3a2df13]

Евгений, а как задать значение трансформации 0 ? потому что там такого нету

[Евгений]

df3a2df13, вижу, тебя js очень интересует, но, мне кажется, ты взялся пока что за весьма сложный пример, и, вероятно, ты пока не знаешь, как быстрее впитать базу, может пригодится, это самые хорошие и сжатые скринкасты, что я знаю:
https://www.youtube.com/watch?v=H6G63NKRSi8&list=P...
это неплохие скринкасты по es6:
https://www.youtube.com/watch?v=4YfsAz-sNAo&list=P...
это весьма подробный и всеобъемлющий учебник по js на русском языке:
https://learn.javascript.ru
это веб-документация, но с ней на русском языке нужно иногда быть осторожным
https://developer.mozilla.org/ru/

[Евгений]

df3a2df13, что за значение трансформации?

[df3a2df13]

Евгений, задать transform: translateX(0%); ведь этот код меняет значение transform: translateX(---); увеличивая или уменьшая на 100%

[Евгений]

df3a2df13, понял о чем ты,

_transform = 0, // значение транфсофрмации .slider_wrapper

защищеные переменные в js помечают символом '_' вначале, т.е. программист, который писал этот код не подразумевал, что кто-то будет их как-то менять и, да, зачем это значение менять? это сломает анимацию слайдера

[df3a2df13]

Евгений, потому что текст у слайдов в кучу сбивается https://jsfiddle.net/bsuc6f9x/

[Евгений]

df3a2df13, думаю, это не является выходом, нужно подумать.

[Евгений]

df3a2df13, найди селектор .slider_item и впиши position: relative;

.slider_item {
      flex: 0 0 100%;
      max-width: 100%;
      position: relative;
    }

[Евгений]

df3a2df13, всё ок?

[Евгений]

df3a2df13, отметь ответ как верный