Question

我正在按照此页面上的说明尝试在我的Wordpress网站上将lightGallery与lightSlider集成 http://sachinchoolur.github.io/lightslider/examples.html

但是，我似乎无法正常工作。这些是我正在使用的代码。

single.php

<?php   
// ACF Fields
// tl_slide_images = Gallery Field
function themeprefix_lightslider_thumbslider() {
$images = get_field('gallery'); //add your correct field name
    if( $images ): ?>

        <ul id="imageGallery" class="image-gallery">

        <?php foreach( $images as $image ): ?>

            <li data-thumb="<?php echo $image['url']; ?>">
               <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
            </li>

        <?php endforeach; ?>
        </ul>
    <?php endif; 
}

      themeprefix_lightslider_thumbslider(); ?>

lightslider-init.js

jQuery(document).ready(function($){

  $('#imageGallery').lightSlider({ 
        gallery:true, 
        item:1, 
        auto:false, 
        loop:true, 
        thumbItem: 9,
        enableDrag: false,
      adaptiveHeight: true,
      slideMove: 1,
      auto: false,
      speed: 800,
      pause: 4000,  

   onSliderLoad: function(el) {
            el.lightGallery({
                selector: '#imageGallery .lSSlide'
            });
        }   
    });  
  });

我已经提交了lightGallery.js和lightGallery.css并尝试使用

对其进行调用

<link type="text/css" rel="stylesheet" href="css/lightGallery.css" />                  
<script src="js/lightGallery.js"></script>

但是，我怀疑这是问题所在，因为我的lightSlider是通过functions.php中的以下代码调用的

/**
 * LightSlider Scripts
 */
add_action( 'wp_enqueue_scripts', 'ls_scripts_styles', 20 );

function ls_scripts_styles() {
    wp_enqueue_style( 'lightslidercss', get_stylesheet_directory_uri(). '/css/lightslider.min.css' , array(), '1.0.0', 'all' );
    wp_enqueue_script( 'lightsliderjs', get_stylesheet_directory_uri() . '/js/lightslider.min.js', array( 'jquery' ), '1.0.0', true );
    wp_enqueue_script( 'lightsliderinit', get_stylesheet_directory_uri() . '/js/lightslider-init.js', array( 'lightsliderjs' ), '1.0.0', true );

}

有人可以帮助我吗？请注意，我仍然是初学者。

尝试将lightGallery与lightSlider集成

0 个答案: