尝试构建一个 jQuery 滑块

Posted 2023-05-09

【中文标题】尝试构建一个 jQuery 滑块

【英文标题】：Trying to build a jQuery slider

【发布时间】：2019-07-23 00:50:31

【问题描述】：

我试图在 WordPress 中构建一个动态滑块，使用 jquery 加载动态画廊图像的 php 数组，我事先不知道滑块中有多少图像。

这是我目前写的代码。

<script>
    $(document).ready(function() 

      //Slider
      $('.wp-post-image img').addClass('Slide'); //Add class to the gallery images
      $('.wp-post-image img').click(function() 
        var MyImageArray = <? wc_get_template('single-product/product-thumbnails.php');?>; 
        var focusImg = 1;   
        var imageHold = MyImageArray[focusImg];
        focusImg++;

        if(focusImg > 4) //to be honest not sure about this number
            focusImg = 0;
        
      );   
      $('.wp-post-image img').attr('src','imageHold');



      $('.Slide').css('position','absolute');

      $('#Slider_Arrow_Left').click(function() 
        $('.Slide').animate('right':'+=500','easing':'swing');
        $('.Slide').css('z-index','10000');

      );

      $('#Slider_Arrow_Right').click(function() 
        $('.Slide').animate('left':'+=500','easing':'swing'); 
        $('.Slide').css('z-index','10000');
      );

    ); //End jquery
</script>

如您所见，我试图使用左右箭头元素来滑动加载的图像。

我做错了什么？

【问题讨论】：

似乎出了什么问题？建立一个working example 来演示这个问题可能会有所帮助。

我的图片无法加载，更不用说幻灯片了。

wc_get_template('single-product/product-thumbnails.php') 输出什么？或者更确切地说，MyImageArray 的值是多少？

该 php 代码为 woocommerce 提取缩略图页面，获取图库图像。

我很好奇实际价值。我没有看到你在哪里用图像填充滑块。

【参考方案1】：

我个人建议你试试这个https://owlcarousel2.github.io/OwlCarousel2/demos/demos.html

它有很多属性，您可以通过这些属性来满足您的要求。希望对你有帮助