标签: flexslider

我的响应式flexslider插件有问题.除非您在实际幻灯片中有许多图像,否则插件工作正常.然后加载行为是不可接受的.

我希望有人可以帮助我使用以下flexslider图像预加载器脚本,因为我无法让它工作.

这是我正在使用的代码:

FLEXSLIDER HTML

<div class="slider">
    <div class="flexslider loading" style="overflow-x: hidden; overflow-y: hidden; ">
        <ul class="slides" style="width: 5200%; -webkit-transition-duration: 0s; -webkit-transform: translate3d(-9702px, 0px, 0px); ">

        <li style="float: left; display: block; width: 940px; ">
        <img src="image1.jpg">  
        </li>
        <li style="float: left; display: block; width: 940px; ">
        <img src="image2.jpg">  
        </li>                       
        <li style="float: left; display: block; width: 940px; ">
        <img src="image3.jpg">

        </ul>

    </div>

HTML头中的FLEXSLIDER SCRIPT

<!-- FlexSlider -->
<script type="text/javascript" charset="utf-8">
    $(window).load(function() {
    $('.flexslider').flexslider({
    animation: "slide",  
    slideshow: false,
    controlsContainer: ".slider"

    start: function(slider) { …

我有一个(不寻常的)来自客户端的请求,即在"幻灯片"动画期间每个幻灯片之间至少有40个像素的填充/边距.Flexslider的默认值是针对彼此刷新的项目.

2.0中有一个新的JQuery选项用于"itemMargin",但它似乎只用于"carousel"设置.如果我通过CSS应用保证金,每张幻灯片都会碰到下一张幻灯片.

无论如何在幻灯片之间应用保证金,还是这是一个不可能的选择？

这是我当前的选项设置

$(window).load(function() {
    $('.home_slider').flexslider({

        animation: "slide",              //String: Select your animation type, "fade" or "slide"
        smoothHeight: false,            //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode
        slideshow: false,                //Boolean: Animate slider automatically
        controlNav: false, 
        directionNav: true,             //Boolean: Create navigation for previous/next navigation? (true/false)
        prevText: "%",           //String: Set the text for the "previous" directionNav item
        nextText: "&",
        // Carousel Options
        itemMargin: 40
    });

我用Flexslider创建了一个滑块,我正在尝试使用manualControls:创建导航菜单,但链接不起作用.这是flexslider和滑块/导航本身的代码:

Flexslider:

 <script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider({
      controlsContainer: ".slidercontainer",
      controlNav: true,
      manualControls: ".flex-control-nav li",
      }); 
 });
 </script>  

滑块和导航:

    <div class="slidercontainer">
        <div class="flexslider">
            <ul class="slides">
              <li>slide1</li>
              <li>slide2</li>
            </ul>
            <ul class="flex-control-nav">
              <li>1</li>
              <li>2</li>
            </ul>
    </div>          
    </div>

有没有办法在触摸事件后恢复自动播放Flexslider幻灯片？现在看来,一旦我滑动导航,幻灯片停止..

我面临的情况是,当幻灯片更改但我的滑块不支持此操作时我必须触发事件.支持之前和之后(http://www.woothemes.com/flexslider/#highlighter_298)

是否有一种方法可以让我在幻灯片更改时触发功能？

这是演示滑块的URL:http: //flexslider.woothemes.com/thumbnail-slider.html

    $(window).load(function() {
      // The slider being synced must be initialized first
      $('#carousel').flexslider({
        animation: "slide",
        controlNav: false,
        start: function(){},            //Callback: function(slider) - Fires when the slider loads the first slide
        before: function(){},           //Callback: function(slider) - Fires asynchronously with each slider animation
        after: function(){},            //Callback: function(slider) - Fires after each slider animation completes
        animationLoop: false,
        slideshow: false,
        itemWidth: 210,
        itemMargin: 5,
        asNavFor: '#slider'
      });

      $('#slider').flexslider({
        animation: "slide",
        controlNav: false,
        animationLoop: false,
        slideshow: false,
        sync: …

我有一个只有 1 页且有多个部分的网站，每个部分都包含一个内容 DIV 和一个 flexslider。在较大的屏幕上，似乎存在一个奇怪的错误，导致背景随幻灯片动画闪烁，具体操作如下： http: //yyy.comuf.com/PORT/

我认为这是因为页面上有多个 Flexslider，但不确定修复它的最佳方法。

JS

  $(window).load(function() {
$('#main-slider').flexslider({
  animation: 'slide',
  controlsContainer: '.flex-container'
});

$('#secondary-slider').flexslider();

});

HTML 滑块-1

<div id="main-slider" class="flexslider">
  <ul class="slides">
    <li>
      <img src="img/FP1.png" />
    </li>
    <li>
      <img src="img/abcd.png" />
    </li>
    <li>
      <img src="img/i-eg.png" />
    </li>
  </ul>
</div>

HTML 滑块-2

<div id="secondary-slider" class="flexslider">
  <ul class="slides">
    <li>
      <img src="img/OU.png" />
    </li>
    <li>
      <img src="img/OU1.png" />
    </li>
    <li>
      <img src="img/OU2.png" />
    </li>
  </ul>
</div>

目前，两个滑块除了图像不同之外都是相同的。

主要JS文件在这里：http ://yyy.comuf.com/PORT/js/jquery.flexslider.js

你好我使用RTL网站flexslider,在这种情况下,没有图像出现,我应该设置 direction到"ltr"为保持滑块一个div,它解决了我的问题,但在这种情况下,它让我的网页水平滚动, 怎么能解决这个问题？下面是我的加价:

<div class="flexslider">

                        <ul class="slides">
                            <li data-thumb="/Content/slider/1.jpg">
                                <img src="/Content/slider/1.jpg">
                            </li>
                            <li data-thumb="/Content/slider/1.jpg">
                                <img src="/Content/slider/1.jpg">
                            </li>
                            <li data-thumb="/Content/slider/1.jpg">
                                <img src="/Content/slider/1.jpg">
                            </li>
                            <li data-thumb="/Content/slider/1.jpg">
                                <img src="/Content/slider/1.jpg">
                            </li>

                        </ul>
                    </div>

以下是flexslider css:

/*
 * jQuery FlexSlider v2.0
 * http://www.woothemes.com/flexslider/
 *
 * Copyright 2012 WooThemes
 * Free to use under the GPLv2 license.
 * http://www.gnu.org/licenses/gpl-2.0.html
 *
 * Contributing author: Tyler Smith (@mbmufffin)
 */


/* Browser Resets */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  {outline: none;}
.slides, …

我的flexslider使用3个带有'特色'类别的帖子来选择滑块的图像.我想在页面加载时加载滑块.主页是一个自定义模板,使用此代码滑块...

我的问题是:

1. 主页加载时没有加载,有延迟
2. 它没有显示所有3张幻灯片

这是滑块的自定义主页模板的代码.

.........................................................
get_header(); ?>

<div class="flex-container">
          <div class="flexslider">
            <ul class="slides">
            <?php
            query_posts(array('category_name' => 'featured', 'posts_per_page' => 3));
            if(have_posts()) :
                while(have_posts()) : the_post();
            ?>
              <li>
                <?php the_post_thumbnail(); ?>
                <div class="flex-caption">
                <div class="flex-caption-title">
                <a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
                </div>
                <p><?php echo get_slider_excerpt(); ?>
                <a href="<?php the_permalink() ?>">...</a></p>
                </div>
              </li>
            <?php
                endwhile;
            endif;
            wp_reset_query();
            ?>
            </ul>
          </div>
</div>

我为我的 WooCommerce 商店建立了一个自己的主题。目前我对现有的模板文件做了很少的改动。

但我想更改产品页面上图像滑块的视图。目前，我正在使用带有一些基本样式的基本输出。

问题是，如果单行中没有合适的缩略图，则缩略图会显示在多行中。

我需要的是缩略图的滑块。我试图更改模板文件product-thumbnails.php。但它使用了一个名为wc_get_gallery_image_html. 我不知道如何以一种好的方式改变它。

然后我意识到 WooCommerce 使用了 FlexSlider 插件。这个插件可以提供我想要/需要的东西。

见这里： http : //flexslider.woothemes.com/thumbnail-slider.html

我只是不知道，如何将这种行为添加到我的产品图片滑块中。

我看到上面的示例中有一个示例 JS 和 HTML 代码。但我不知道如何将它适应我的滑块，因为我的 HTML 输出看起来有很大不同，重命名 ID 不起作用。

编辑：

我找到了一种向滑块添加选项的方法。答案来自这里：https : //stackoverflow.com/a/46448407/1788961

我添加了以下代码（并且它正在运行）为我的滑块添加选项：

// Update WooCommerce Flexslider options
add_filter( 'woocommerce_single_product_carousel_options', 'ud_update_woo_flexslider_options' );

function ud_update_woo_flexslider_options( $options ) {

    $options['directionNav'] = true;
    $options['sync'] = '.flex-control-thumbs';

    return $options;
}

问题是，我还需要为缩略图添加选项。有没有办法做到这一点？

目前 HTML 输出如下所示：

<div class="woocommerce-product-gallery woocommerce-product-gallery--with-images woocommerce-product-gallery--columns-4 images" data-columns="4" style="opacity: 1; transition: opacity 0.25s ease-in-out;">
    <a href="[path]" class="woocommerce-product-gallery__trigger"></a>
    <div class="flex-viewport" …

使用 WooCommerce 4.2，在 iOS 上，FlexSlider (v2.7.2) 显示一个带有水平滑块的错误：当用户向左或向右滑动时焦点位于滑块上时，垂直滚动仍处于活动状态，存在一定程度的垂直移动. 这使得滑块“反弹”。

您可以在此视频中看到错误：https : //youtu.be/bM8zcv3ciTo

编辑：我的问题类似于this one，但与Flexslider有关。

我在functions.php中有这个：

/*PRODUCT PAGE FlexSlider Options*/
add_filter( 'woocommerce_single_product_carousel_options', 'filter_single_product_carousel_options' );
function filter_single_product_carousel_options( $options ) {
    if ( wp_is_mobile() ) {
        $options['controlNav'] = true; // Option 'thumbnails' by default
        $options['direction'] = "horizontal";
        $options['slideshow'] = false; // Already "false" by default
    }
    return $options;
}

知道如何在焦点位于 Flexslider 上时防止这种垂直滚动吗？

有人也有这个bug吗？

我安装了一个只有 Wordpress 和 WooCommerce 的测试站点，错误就在这里，所以它与插件无关：http : //woo.makemy.biz/produit/produit-de-test/