Tiny-slider: each slide each image/div regrardless of image size/resolution/width [for landing page carousel]

[CharlesKumar]

__Issue description__:
fully fluid 100% image with low resolution in the landing page carousel [may be not an issue - link if you have examples/codepen on this]
__Demo link/slider setting__:

_Tiny-slider version_: 2.3.5
_Browser name && version_: firefox dev edition latest
_OS name && version_:

similar #104 but for low resolution images

[ganlanyuan]

Hey @CharlesKumar
I'm not clear what your request/issue is.
Could you give more details?

[CharlesKumar]

I tried all the settings but I couldn't create a carousel with single image...

var slide = tns({
        container: '.my-slider',
        items: 5,
        mode: 'carousel',
        lazyload: true,
        mouseDrag: true,
        fixedWidth: 300,
        gutter: 0,
        slideBy: 'page',
        responsive: {
          640: {
            edgePadding: 20,
            gutter: 10,
            fixedWidth: 400,
            items: 4
          },
          700: {
            gutter: 30,
            items: 3,
            fixedWidth: 500,
            slideBy: 1
          },
          900: {
            gutter: 0,
            edgePadding: 0,
            slideBy: 1,
            fixedWidth: window.innerWidth
          }
        },
        controls: false,
        autoplay: true,
        autoplayButtonOutput: false

    });`

[ganlanyuan]

You just need to set items: 1 or not set at all since items: 1 is the default setting.

[CharlesKumar]

Thanks for the quick response

You just need to set items: 1 or not set at all since items: 1 is the default setting.

This displays 1 slide at a time but my edgepadding: 20 in 640px breakpoint added a padding/offset to the left of the slide.

... responsive: { 640: { edgePadding: 20, ... , 900: { gutter: 0, edgePadding: 0, ...
This solved by 1. totally removing edgePadding
2. in 900px breakpoint setting edgePadding other than 0

[CharlesKumar]

I am also facing another issue I used tiny-slider module in vue-webpack application

import { tns } from "path/to/src/tiny-slider.module"

Does all the css included in this module or should i separately copy css file via copywebpack plugin

var slider = tns({ container: '.slider', items: 1, // slideBy: 'page', // mode: 'gallery', loop: false, // fixedWidth: window.innerWidth mouseDrag: true });

I tried almost every settings but it breaks without a warning/error

[ganlanyuan]

import { tns } from "path/to/src/tiny-slider.module" is for JS.
You need to load CSS separately.

[CharlesKumar]

The css is included in both the dev build and prod build

`

...

`

Found out the problem while posting

` mounted() {

tns({
  container: '.slider',
  items: 1,
  autoplay: true,
  loop: false
});`

tns() should be called on mounted() hook in vuejs

my mistake was I called tns() in the script (which will be executed prior to DOM rendering in vuejs)

Again! Thanks for the quick response

[CharlesKumar]

sorry for posting in the same thread

I have another similar problem to solve

The slider defined in the mounted works well as data was defined in the script

` mounted() {

var slider = tns({
  container: '.slider',
  items: 1,
  autoplay: true,
  speed: 300,
  // loop: false,
  controls: false,
  navContainer: '.tins-nav',
  // nav: false,
  autoplayButtonOutput: false,
  mouseDrag: true
});
var _that = this;
store.mounted(function(){
  _that._data.prod = self.prod;
  loadDynamicImage(_that._data.prod);
});

}, // mounted
beforeUpdate() {

var gl = tns({
  container: '.gallery',
  mode: 'gallery',
  items: 3,
  // slideBy: 2,
  // speed: 200,
  nav: false,
  autoplay: true,
  autoplayButtonOutput: false,
  controls: false
});

}`

The second slider not woeking properly for some reason

The data is loaded from the ajax request and the data is available in beforeUpdate() hook which i inspected through console.log(this.data)

I've tried this.$forceUpdate() using computed getters, also vm.$watch not helped much

Again Found out (this time) solution while posting

tns method should be called after the dom construction with data passed

vm.$nextTick() solved the problem of async update

The following code works well

`beforeUpdate() {

this.$nextTick(function(){
  var gl = tns({
    container: '.gallery',
    mode: 'gallery',
    items: 3,
    // slideBy: 2,
    // speed: 200,
    nav: false,
    autoplay: true,
    autoplayButtonOutput: false,
    controls: false
  });
});

}`

My small request if tns() throws errors when no matching/compatible selector is available, warnings when less than 2 child while constructing... If it say something in the development it'll be easier to debug

[ganlanyuan]

Thanks, added