jquery - 尝试构建一个 jQuery 滑块

Question

我试图在 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>

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

我究竟做错了什么？

标签： jquerywordpressdynamicwoocommerceslider

Answer 1

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

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