Question

我正在尝试使用flexslider底部的控制选项卡。在这里，我不知道如何启用选项卡。

这是我的代码：

<div class="button_slide">
 <div class="button_slides" style="border-left:2px solid #CFD6E4">
   introduction
 </div>
 <div class="button_slides">
   Specialist consultants
 </div>
 <div class="button_slides">
   Bespoke solutions
 </div>
 <div class="button_slides">
   Conference and events
 </div>
 <div class="button_slides manage">
   Manamgement information system
 </div>
 <div class="button_slides" style="border-right:2px solid #CFD6E4">
   introduction
 </div>

这是我的剧本：

  $(window).load(function() {
     $('.flexslider').flexslider({
        animation: "slide"
     });
  });

Here I have attached the screen shot.

Answer 1

<强>的Javascript

// Can also be used with $(document).ready()
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide",
    controlNav: "thumbnails"      <--------- This
  });
});

<强> HTML

<!-- Place somewhere in the <body> of your page -->
<div class="flexslider">
  <ul class="slides">
    <li data-thumb="1">
      Content here.
    </li>
    <li data-thumb="2">
      Content here.
    </li>
    <li data-thumb="3">
      Content here.
    </li>
    <li data-thumb="4">
      Content here.
    </li>
  </ul>
</div>

编辑：

该插件无法正常工作。尝试将硬代码值更改为实际的js文件，因为它似乎正在创建图像：

jQuery.flexslider.js

将slider.pagingCount上的line 212功能更改为：

      if (slider.pagingCount > 1) {
        for (var i = 0; i < slider.pagingCount; i++) {
          slide = slider.slides.eq(i);

          slider.controlNavScaffold.append('<li></li>');
          j++;
        }
      }

它可能与包含li标记的var item中的此附加元素img有关：

      if (slider.pagingCount > 1) {
        for (var i = 0; i < slider.pagingCount; i++) {
          slide = slider.slides.eq(i);
          item = (slider.vars.controlNav === "thumbnails") ? '<img src="' + slide.attr( 'data-thumb' ) + '"/>' : '<a>' + j + '</a>';
          if ( 'thumbnails' === slider.vars.controlNav && true === slider.vars.thumbCaptions ) {
            var captn = slide.attr( 'data-thumbcaption' );
            if ( '' != captn && undefined != captn ) item += '<span class="' + namespace + 'caption">' + captn + '</span>';
          }
          slider.controlNavScaffold.append('<li>' + item + '</li>');
          j++;
        }
      }

如何在flexslider底部添加选项卡

1 个答案:

编辑：