Glidejs не загружается на мобильный - PullRequest
Новая
       23

Glidejs не загружается на мобильный

0 голосов
/ 06 июля 2019

Я пытаюсь добавить glidejs на сайт WordPress, он отлично работает на настольном компьютере, но на мобильном, он не загружается, кажется, что файлы JS не выполняются. Я не вижу ни одной ошибки в консоли. Это кодовая ручка . На мобильном телефоне я вижу 3 картинки друг на друга.

шаблон 

<section id="Glide" class="glide banner_desktop">

    <!-- ARROWS -->
      <div class="glide__arrows">
        <button class="glide__arrow prev" data-glide-dir="<"><i class="fa fa-chevron-left fa-2x" aria-hidden="true"></i>
</button>
        <button class="glide__arrow next" data-glide-dir=">"><i class="fa fa-chevron-right fa-2x" aria-hidden="true"></i>
</button>
      </div>

     <div class="glide__wrapper">
        <ul class="glide__track">

<?php if ( have_rows( 'banner_desktop', 'option' ) ) : ?>
    <?php while ( have_rows( 'banner_desktop', 'option' ) ) : the_row(); ?>
    <?php if ( get_sub_field( 'image' ) ) { ?>

          <li class="glide__slide">

    <a href="<?php the_sub_field( 'link' ); ?>">
                    <img src="<?php the_sub_field( 'image' );?>" />
                </a>                
                </li>

        <?php
    }
         endwhile; endif;
         ?>

        </ul>
      </div>
      <!-- CAROUSEL DOTS -->
      <div class="glide__bullets"></div>

</section>

functions.php 

wp_enqueue_script( 'glide', get_bloginfo( 'stylesheet_directory' ) . '/js/glide/glide.js', array('jQuery') );
wp_enqueue_script( 'glide_Js', get_bloginfo( 'stylesheet_directory' ) . '/js/glide/glide_JS.js', array('jQuery') );

wp_enqueue_style( 'glide_css', get_bloginfo( 'stylesheet_directory' ) . '/js/glide/glide.css');
wp_enqueue_style( 'glide_theme', get_bloginfo( 'stylesheet_directory' ) . '/js/glide/glide_theme.css');

glide.js - это 

var glide = function () {
// glide.min.js code which is on codepen 
//   https://cdn.jsdelivr.net/npm/glidejs@2/dist/glide.min.js 
}();

1 Ответ

1 голос
/ 07 июля 2019

1 - Создайте папку glide в корне вашей темы, того же уровня, что и style.css
2- В этой папке положить glide.min.js, glide.core.css, glide.theme.css и Создать my.glide.js
3- В functions.php вашей темы добавьте: 

/**
 * Enqueue Glide.js scripts and styles.
 */
function glide_js_scripts_styles() {
    wp_enqueue_style( 'glide-core', get_theme_file_uri( '/glide/glide.core.css' ), array(), filemtime( get_theme_file_path( '/glide/glide.core.css' ) ) );

    wp_enqueue_style( 'glide-theme', get_theme_file_uri( '/glide/glide.theme.css' ), array(), filemtime( get_theme_file_path( '/glide/glide.theme.css' ) ) );

    wp_enqueue_script( 'glide', get_theme_file_uri( '/glide/glide.min.js' ), array(), filemtime( get_theme_file_path( '/glide/glide.min.js' ) ), true );

    wp_enqueue_script( 'my-glide', get_theme_file_uri( '/glide/my.glide.js' ), array('jquery'), filemtime( get_theme_file_path( '/glide/my.glide.js' ) ), true );
}
add_action( 'wp_enqueue_scripts', 'glide_js_scripts_styles' );

Поскольку у Glide нет зависимости, вы оставляете зависимость array() пустой для glide.min.js, но добавляете ее к себе my.glide.js
4- В вашем my.glide.js запустите скрипт: 

(function ($) {
    new Glide('.glide', {
        type: 'carousel',
        startAt: 0,
        perView: 3
    });

    // OR

    $('.glide').glide({
        type: 'carousel',
        startAt: 0,
        perView: 3
    });

})(jQuery);

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

...