responsive content slider

[medarob]

Hi,

I use the extension to create a content slider of videos. As content I used 5x "text & media" ce with only a video inside. In the options from the slider I set the number of slides to 4. This works in desktop but if I lower the resolution it keeps the 4 videos. What I want is, that if I lower the resolution then fewer slides should be shown.

For example on a smartphone I only want 1 or 2 slides, not 4.

Is there an option to do that? I looked at the tiny-slider project website and there is this option:

<script>
  var slider = tns({
    container: '.my-slider',
    items: 1,
    responsive: {
      640: {
        edgePadding: 20,
        gutter: 20,
        items: 2
      },
      700: {
        gutter: 30
      },
      900: {
        items: 3
      }
    }
  });
</script> 

which is basically exactly what I want. Define some breakpoints and the number of slides which should be shown. Unfortunatelly that didn't work... so my question is: Should this work and can I use all the options from the plugin or does this have to be configured in the extension somehow?

[Teisi]

This TYPO3 extension has not implemented all options of the tiny-slider as settings in the backend. That means if you want to set your own settings you have to copy the corresponding FLUID Template/Partial (SliderJson.html) and adjust it to your needs.

You can also use a corresponding SliderJson.html (content of it) for e.g. your custom ext:mask element.

Otherwise this would be a feature request ;)

[medarob]

Ah~ I didn't know that these settings can be adjusted in the Json Partial. :) I will try that approach.

That would be indeed very cool if some of those options would make it into the extension so that they are available in the backend for the editors. ;-)

I noticed at the beginning of the json file that there is an empty fluid comment tag.

<script class="hhSliderJson" type="application/json">
        {
            <f:comment></f:comment>"uid": "{data.uid}",

Is that correct?

These settings are global, right? So if I have another slider on another page I can't set individual settings for each slider?

[Teisi]

Unfortunately at the moment, yes, they are global.

The </f:comment> tag is needed otherwise fluid within the script tag will not work properly... If you have another solution for this, just give it to me... :) ;)

[Teisi]

close this in favor of #13