Categories

Новые шаблоны

Shopify. Как управлять настройками слайдера (скорость, эффекты, автоматическое переключение слайдов)

Ryan DeWitt Октябрь 13, 2015
Rating: 5.0. From 2 votes.
Please wait...

Shopify. Как управлять настройками слайдера (скорость, эффекты, автоматическое переключение слайдов)

Из этого туториала Вы узнаете, как управлять настройками слайдера в шаблоне Shopify.

Shopify. How to manage slider options (speed, effect, autoplay)-1

  1. В наших шаблонах Shopify используется NivoSlider, чьи настройки задаются в коде. Вы можете проверить исходный код страницы, для того чтобы найти скрипт, который подключает слайдер. Нажмите правой кнопкой мышки (Right-click) и выберите "Посмотреть код страницы" (View page code):

    Shopify. How to manage slider options (speed, effect, autoplay)-2

  2. Найдите соответствующий фрагмент кода, используя слово слайдер (slider) для поиска. Далее используйте сочетание клавиш CTRL+F, для того чтобы открыть форму поика. На этом скиншоте Вы можете видеть, как выглядит данный фрагмент кода:

    Shopify. How to manage slider options (speed, effect, autoplay)-3

  3. Теперь Вам нужно изменить значения настроек слайдера в файлах шаблона. Откройте админ панель и перейдите в раздел Темы (themes). Внесите изменения в файлы:

    Shopify. How to manage slider options (speed, effect, autoplay)-4

  4. В нашем случае код находится в файле snippet-js-footer.liquid. Найдите соответствующий фрагмент кода. Здесь Вы можете изменить настройки слайдера:

    Shopify. How to manage slider options (speed, effect, autoplay)-5

  5. В данном файле Вы можете изменить скорость анимации, время паузы (animation speed, pause time) и другие настройки. Мы также можем изменить эффект анимации. Вот список доступных эффектов. Вы можете выбрать один из них:

    • sliceDown
    • sliceDownLeft
    • sliceUp
    • sliceUpLeft
    • sliceUpDown
    • sliceUpDownLeft
    • fold
    • fade
    • random
    • slideInRight
    • slideInLeft
    • boxRandom
    • boxRain
    • boxRainReverse
    • boxRainGrow
    • boxRainGrowReverse
  6. Мы изменили эффект (effect), скорость анимации и время паузы (animation speed and pause time):

    Shopify. How to manage slider options (speed, effect, autoplay)-6

  7. По-умолчанию слайды переключаются автоматически. Вы можете отключить автоматическое переключение слайдов добавив следующий параметр:

    manualAdvance: true,

    Shopify. How to manage slider options (speed, effect, autoplay)-7

  8. Сохраните изменения и проверьте ваш сайт.

Вы можете также ознакомиться с детальным видео-туториалом ниже:

Shopify. Как управлять настройками слайдера (скорость, эффекты, автоматическое переключение слайдов)

Шаблоны Shopify
Эта запись была размещена в Shopify туториалы и помечена как option, Shopify, slider. Добавьте в закладки постоянную ссылку.

Submit a ticket

Если вы не смогли найти подходящее решение проблемы, пожалуйста воспользуйтесь следующей ссылкой, чтобы отправить запрос команде технической поддержки.
Отправить запросВы получите ответ в течение 24 часов

Чат
We help you to choose the right product.