尝试构建一个 jQuery 滑块答案

【问题标题】：Trying to build a jQuery slider尝试构建一个 jQuery 滑块
【发布时间】：2024-01-03 10:17:02
【问题描述】：

我试图在 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 提取缩略图页面，获取图库图像。
我很好奇实际价值。我没有看到你在哪里用图像填充滑块。

标签： jquery wordpress dynamic woocommerce slider

【解决方案1】：

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

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

【讨论】：