简体   繁体   English

FlexSlider轮播在第一张幻灯片中滑动所有图像-WordPress

[英]FlexSlider carousel slides all images in first slide - WordPress

I am using the Nictitate theme my WordPress website. 我在我的WordPress网站上使用了Nictitate主题。

The theme includes a client widget that simply displays client logos. 该主题包括一个仅显示客户端徽标的客户端小部件。 I noticed that FlexSlider is being used on other widgets within the theme and so added some code to get the client logos in a carousel. 我注意到FlexSlider正在主题中的其他小部件上使用,因此添加了一些代码以在轮播中获取客户端徽标。

However, I cannot get this working properly. 但是,我无法正常工作。 All the logos are grouped together in the first slide and then all disappear. 所有徽标在第一张幻灯片中分组在一起,然后全部消失。

Can anyone help? 有人可以帮忙吗?

I have added the following code to widgets.php : 我已将以下代码添加到widgets.php

<div class="clients-slider flexslider">
  <ul class="slides">
     <?php


    while ( $clients->have_posts() ) : $clients->the_post();

        $client_url = get_post_meta( get_the_ID(), 'client_url', true );

        $thumbnail_id = get_post_thumbnail_id();

        $thumbnail = wp_get_attachment_image_src( $thumbnail_id, 'kopa-image-size-4' );

    ?>



        <li>

                <a href="<?php echo $client_url; ?>" target="_blank"><img src="<?php echo $thumbnail[0]; ?>" alt=""></a>

        </li>



    <?php


endwhile; ?>



</ul>
</div>

In custom.js : custom.js

jQuery(window).load(function() {

    jQuery('.clients-slider').flexslider({

        animation: "slide",

        animationLoop: false,

        itemWidth: 50,

        itemMargin: 5,

        minItems: 2,

        maxItems: 4,

        selector: ".slides > li",

        start: function(slider) {

            jQuery('body').removeClass('loading');

        }

    });

});

in http://leanneoleary.com/traincoachexcel.co.uk/wp-content/themes/nictitate-1.1.4/style.css line 1084 http://leanneoleary.com/traincoachexcel.co.uk/wp-content/themes/nictitate-1.1.4/style.css第1084行中

Remove this 删除这个

.kopa-client-widget ul { width:1100px !important;}

After doing that, this is what I get: 完成之后,这就是我得到的:

在此处输入图片说明

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM