Hi there, 

I have run into an issue whilst deploying the slider .. the option for  -- thumbnailNavigation: 'hover', -- does not work .... when hovering the slide the thumbnail nav does not appear ..

'always' works fine

Does this option only work on certain skins or is there some other limitation?

thank you in advance.

Pat

Hi Kristof .. thanks for your reply ...

Some extra info:

No errors in the console ... LayerSlider Initalized message showing ... on hover of main image the left and right swipe arrows appear and then disappear on mouse out

 is this enough? 

    // Running the code when the document is ready
    jQuery(document).ready(function(){
    console.log("doc ready on prop page");

    // var screenwidth = jQuery(window).width();
    // var screenheight = jQuery(window).height();
    jQuery('#layerslider, .slide-ol').css({'width':'900px', 'height':'600px'});
 
        // Calling LayerSlider on the target element
        jQuery('#layerslider').layerSlider({
 
            // Slider options will be added here
            // later in this guide.
            autoStart: true,
            type: 'responsive',
            firstSlide: 1,
            skin: 'photogallery',
            bgcolor: '#000000',
            pauseOnHover: 'disabled',
            fitScreenWidth: 'false',
            tnWidth: 150,
            tnHeight: 100,
            tnContainerWidth: '80%',
            tnActiveOpacity: 100,
            tnInactiveOpacity: 50,
            navButtons: true,            
            thumbnailNavigation: 'always',

            
        });
    });

And then in the html

  <div class = 'col-xs-12 col-md-8' style = ''>
    <div id="layerslider" class = 'xxcol-xs-12' style="width: 900px; height: 600px;">
      {{ content.field_property_images }}
    </div>
  </div>

Other than this issue . .everything seems to be working fine.

Pat

Here is the output HTML from the twig var  {{ content.field_property_images }}

  <div class = 'col-xs-12 col-md-8' style = ''>
    <div id="layerslider" class = 'col-xs-12' style="width: 900px; height: 600px;">
      

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'field' -->
<!-- FILE NAME SUGGESTIONS:
   * field--node--field-property-images--property.html.twig
   * field--node--field-property-images.html.twig
   * field--node--property.html.twig
   * field--field-property-images.html.twig
   * field--image.html.twig
   * field.html.twig
-->
<!-- BEGIN OUTPUT from 'themes/skipierdor/fields/field--field_property_images.html.twig' -->
          <div class="field--itemxx ls-slide"  data-ls="duration: 600000; kenburnszoom: in; kenburnsscale:1.2;  parallaxtype: 2d;">
      <img class = 'ls-bg' src = '/sites/default/files/styles/large_photo_std/public/2021-04/app1.jpg?itok=ABRv-OIu'/>
      <img class="ls-tn"  src="/sites/default/files/styles/thumb_std/public/2021-04/app1.jpg?itok=vRVb_Tjb" alt="Slide thumb_std"/>
    </div>     
          <div class="field--itemxx ls-slide"  data-ls="duration: 600000; kenburnszoom: in; kenburnsscale:1.2;  parallaxtype: 2d;">
      <img class = 'ls-bg' src = '/sites/default/files/styles/large_photo_std/public/2021-04/app2.jpg?itok=gtPZN2Bk'/>
      <img class="ls-tn"  src="/sites/default/files/styles/thumb_std/public/2021-04/app2.jpg?itok=3HNmE6Td" alt="Slide thumb_std"/>
    </div>     
          <div class="field--itemxx ls-slide"  data-ls="duration: 600000; kenburnszoom: in; kenburnsscale:1.2;  parallaxtype: 2d;">
      <img class = 'ls-bg' src = '/sites/default/files/styles/large_photo_std/public/2021-04/app3.jpg?itok=qNRpW028'/>
      <img class="ls-tn"  src="/sites/default/files/styles/thumb_std/public/2021-04/app3.jpg?itok=W-JZz16L" alt="Slide thumb_std"/>
    </div>     
          <div class="field--itemxx ls-slide"  data-ls="duration: 600000; kenburnszoom: in; kenburnsscale:1.2;  parallaxtype: 2d;">
      <img class = 'ls-bg' src = '/sites/default/files/styles/large_photo_std/public/2021-04/app4.jpg?itok=9lWntfsM'/>
      <img class="ls-tn"  src="/sites/default/files/styles/thumb_std/public/2021-04/app4.jpg?itok=WjeSSAnM" alt="Slide thumb_std"/>
    </div>     
          <div class="field--itemxx ls-slide"  data-ls="duration: 600000; kenburnszoom: in; kenburnsscale:1.2;  parallaxtype: 2d;">
      <img class = 'ls-bg' src = '/sites/default/files/styles/large_photo_std/public/2021-04/app5.jpg?itok=F-ma4dlu'/>
      <img class="ls-tn"  src="/sites/default/files/styles/thumb_std/public/2021-04/app5.jpg?itok=2cy7E6sB" alt="Slide thumb_std"/>
    </div>     
    

  
 
<!-- END OUTPUT from 'themes/skipierdor/fields/field--field_property_images.html.twig' -->

    </div>
  </div>

Hey Kristof .. I'll come back to you once I have a dev version on line.

thank you

Patrick