Jquery Can'；我不知道如何使用Flexslider

我承认我还是个菜鸟，我刚刚被暴风雨困住了

我在一个网站上工作，他在他的主题上使用了flexslider。 我的问题是我不知道如何让它工作：(

开发环境是Laravel with gulp，因此我确信每个插件都工作得很好。我唯一的问题是如何使其在html中工作：

这是我的密码：

HTML:

宽度：2600%；转换持续时间：0.6s；转换：translate3d（-5220px，0px，0px）；“class=”幻灯片“>

宽度：870px；浮动：左；显示：块；“>
宽度：870px；浮动：左；显示：块；“>
宽度：870px；浮动：左；显示：块；“>




宽度：2200%；转换持续时间：0s；转换：translate3d（0px，0px，0px）；“class=”幻灯片“>

这就是我所期望的：

还有一件事：当我在试图复制的页面上查看时，我看到：

---

但是在我的屏幕上，插件似乎没有启动，所以我想这是主要问题？

这看起来像是你实例化flexslider插件后生成的代码，IMO。Plz分享你自己的HTML源代码，而不是你使用flexslider的部分。你能创建一个问题的解决方案吗？不是真的，但我可以告诉你我想要什么。这是什么我期待：。事实上，我刚刚使用了这个网站的html，并试图将其应用到我的网站上，但显然我没有正确地调用Function，我不知道如何做。这是小提琴，但他绝对不工作；肯定缺少很多插件，我将尝试改进它。

<div id="photos-tab" class="tab-pane fade active in">
   <div class="photo-gallery style1" data-animation="slide" data-sync="#photos-tab .image-carousel">
       <div style="overflow: hidden; position: relative;" class="flex-viewport">
          <ul style="width: 2600%; transition-duration: 0.6s; transform: translate3d(-5220px, 0px, 0px);" class="slides">
              <li style="width: 870px; float: left; display: block;" aria-hidden="true" class="clone"><img draggable="false" src="htttp://www.placehold.it/950x500" alt=""></li>
                 <li class="" style="width: 870px; float: left; display: block;"><img draggable="false" src="http://www.placehold.it/950x500" alt=""></li>
                 <li class="" style="width: 870px; float: left; display: block;"><img draggable="false" src="http://www.placehold.it/950x500" alt=""></li>
                  <li class="" style="width: 870px; float: left; display: block;"><img draggable="false" src="http://www.placehold.it/950x500" alt=""></li>
          </ul>
       </div>
          <ol class="flex-control-nav flex-control-paging">
             <li><a class="">1</a></li>
             <li><a class="">2</a></li>
             <li><a class="">3</a></li>
             <li><a class="flex-active">4</a></li>
          </ol>
          <ul class="flex-direction-nav">
             <li><a class="flex-prev" href="#">Previous</a></li>
             <li><a class="flex-next" href="#">Next</a></li>
          </ul>
       </div>
       <div class="image-carousel style1" data-animation="slide" data-item-width="70" data-item-margin="10" data-sync="#photos-tab .photo-gallery">
       <div style="overflow: hidden; position: relative;" class="flex-viewport">
          <ul style="width: 2200%; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);" class="slides">
             <li class="" style="width: 70px; float: left; display: block; height: 70px; position: relative;"><img style="position: absolute; top: 50%; margin-top: -35px; left: 50%; margin-left: -35px;" draggable="false" src="http://www.placehold.it/70x70#FF0066" alt=""></li>
             <li class="" style="width: 70px; float: left; display: block; height: 70px; position: relative;"><img style="position: absolute; top: 50%; margin-top: -35px; left: 50%; margin-left: -35px;" draggable="false" src="http://www.placehold.it/70x70" alt=""></li>
             <li class="" style="width: 70px; float: left; display: block; height: 70px; position: relative;"><img style="position: absolute; top: 50%; margin-top: -35px; left: 50%; margin-left: -35px;" draggable="false" src="http://www.placehold.it/70x70" alt=""></li>
             <li class="" style="width: 70px; float: left; display: block; height: 70px; position: relative;"><img style="position: absolute; top: 50%; margin-top: -35px; left: 50%; margin-left: -35px;" draggable="false" src="http://www.placehold.it/70x70" alt=""></li>
           </ul>
        </div>
        <ol class="flex-control-nav flex-control-paging">
           <li><a class="flex-active">1</a></li>
           <li><a class="">2</a></li>
        </ol>
        <ul class="flex-direction-nav">
           <li><a class="flex-prev" href="#">Previous</a></li>
            <li><a class="flex-next" href="#">Next</a></li>
        </ul>
     </div>
                            </div>