无法弄清楚如何使用Flexslider

Question

我承认我还是一个新手，我刚刚陷入暴风雨中！

我正在开发一个在他的主题上使用 flexslider 的网站。 我的问题是，我无法弄清楚如何使它工作:(

开发环境是Laravel with gulp所以我确信每个插件都运行良好我唯一的问题是如何让它在html中工作：

这是我的代码：

HTML：

<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>

这就是我的期望：http://www.soaptheme.net/html/travelo/cruise-detailed.html

还有一件事：当我在页面上看到我正在尝试复制时，我看到了这一点：

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