时间戳

首页 > 解决方案 > 弹性滑块。根据单击的图像动态启动滑块

javascript - 弹性滑块。根据单击的图像动态启动滑块

问题描述

我有一个带有 foreach 标题的页面，其中显示了我的 flexslider 的 5 个第一张图像。我想根据单击的图像启动滑块弹出窗口。

我的 HTLM 是：

  <ul class="images">
      @foreach ($images as $image)
         <li class="bkg-cover" style="background-image: {{
          $image['url']}}">
             <a class="startSlide" title="View Photo"><span>View 
               Photo</span></a>
         </li>
     @endforeach
   </ul>

然后我的脚本：

    <script type="text/javascript">

       //View Photos
      $('.images > li > a').on('click', function(e) {
          e.preventDefault();
          $('.images-modal').show();
          var slider = $('#ImagesSlide').data('flexslider');
          slider.resize();
       });

      //FlexSlider
      $('#imagesSlide').flexslider({
          animation: "slide",
          useCSS: false,
          smoothHeight: false,
          pauseOnHover: false,
          controlNav: false,
          //Integer: The slide that the slider should start on
          startAt: 0, 
          prevText: '<i class="fa fa-angle-left"></i>',
          nextText: '<i class="fa fa-angle-right"></i>'
      });   

  </script>

$image 是双向数组，其中：

         $image[]['url']

包含图片的网址

          $image[]['position']

包含滑块中的位置图像

我知道 flexslider 的选项 startAt （0 从第一张图像开始），但我想用 jQuery 动态地取这个整数值。我有“startSlide”类，但我不知道如何获取点击事件......

我尝试获取 rel 属性值：

 <ul class="images">
      @foreach ($images as $image)
         <li class="bkg-cover" style="background-image: {{
              $image['url']}}">
             <a class="startSlide" rel="$image['position]" title="View 
               Photo"><span>View 
               Photo</span></a>
         </li>
     @endforeach
   </ul>

并像这样构造滑块：

   $('#property .property-images .info .button, #property .property-images 
         ul.images > li > a').on('click', function(e) {
           e.preventDefault();
           $('.images-modal').show();
           var numberSlider = $('.startSlide').attr('rel').valueOf();
           var numSlider = parseInt(numberSlider);
           var slider = $('#propertyImagesSlide').flexslider({
               animation: "slide",
               useCSS: false,
               smoothHeight: false,
               pauseOnHover: false,
               controlNav: false,
               startAt: numSlider,
               prevText: '<i class="fa fa-angle-left"></i>',
               nextText: '<i class="fa fa-angle-right"></i>'
           });
           //var slider = $('#propertyImagesSlide').data('flexslider');
           slider.resize();
       });

但总是从第一张图片开始

最好提前感谢。

标签： javascriptjqueryflexslider

解决方案

最后，这个解决方案对我有用。

HTML：

  <ul class="images">
       @foreach ($property->allImages() as $position => $image)
          <li class="bkg-cover" style="background-image: {{ $image['url'] }}">
             <a class="startSlide" rel="{{ $position }}" title="View Photo"> 
             <span>View Photo</span></a>
          </li>
       @endforeach
  </ul>


    $('a').on('click', function(e) {
        e.preventDefault();
        $('.images-modal').show();
        var memberid = $(this).attr('rel').valueOf();
        var memberidNo = parseInt(memberid);
        var slider = $('#propertyImagesSlide').flexslider({
            animation: "slide",
            useCSS: false,
            smoothHeight: false,
            pauseOnHover: false,
            controlNav: false,
            startAt: memberidNo,
            prevText: '<i class="fa fa-angle-left"></i>',
            nextText: '<i class="fa fa-angle-right"></i>'
             });
            slider.resize();
         });

这个小提琴对我帮助很大：http: //jsfiddle.net/We4GA/

现在的问题是当我关闭模式并再次打开时，滑块实例已经创建并且滑块没有在该图像中打开。对此问题有何评论？

推荐阅读