Last version swiper v9: loadPrevNext module lazy not included!

let stores = null;
stores = [];

ts will kill you for that.

you changed my code, so some of it is useless and in the wrong order.
i hope in your real code you’ll do it correctly.

just remove all the e.preventDefault(),
ecma know nothing about swiper.

1 Like

You think ts will kill me for that? :slight_smile:
I need to change the content inside the store variable with new array values because stores variable it is always updating either with filtering, sorting, or with every page refresh! so I need to declare as

let store = null;

so in the refresh method I just refresh the stores variable assigning new values with a new array of stores! sometimes it can be no stores just empty array! it all depends on the server reply!

I hope ts does not get mad on me! :innocent:

Now it is working perfectly this way! and I have two sliders at the home page so I need to check also when the stores are loading (request waiting reply from the server) then when loaded (server replied) and when loaded I need to check also if array has a value or is empty, etc… this way user may know something or see stores or refresh if no stores were found yet, etc…

I will remove e.preventDefault()!
Big thanks for your support in finding a good solution for this case!

:hugs:

const arr = [];
console.log(!!arr.length); // false
console.log(arr);          // []

arr.push(...[1,2,3]);
console.log(!!arr.length); // true
console.log(arr);          // [1,2,3]

arr.length = 0;
console.log(!!arr.length); // false
console.log(arr);          // []

arr.push(...[4,5,6]);
console.log(!!arr.length); // true
console.log(arr);          // [4,5,6]
1 Like

Big thanks Deejay!

In my case I want to show the swiper when loading with skeleton effect because API request is not replying yet and need to show something to the user, a loading effect and then when done this returned array object can be also empty so I need to show no stores online to validate this part and show the stores when there is at least one found!

In my case another way will be using another variable loading = true and then when done loading = false etc… and using the way you suggested above as well is nice too!

I just need a loading message to show before showing the stores or showing a message stating no stores found if no stores online at that moment! that is why I set stores = null that for me means also loading = true;

:slightly_smiling_face: :+1:

you can safely do something like this:

const arr = Object.assign([],{ loading: true });

console.log(arr.length)  // 0
console.log(arr.loading) // true

arr.push(...[1,2,3]);
arr.loading = false;

console.log(arr.length)  // 3
console.log(arr.loading) // false
1 Like

good tip! thanks! but what about replacing the array content with new content after filtering the array, to show only filtered stores by category?

    categories.map((i,x) => Object.assign(i,{
      unique: $f7.utils.id('slide-xxxxx'),
      click: (e, done) => {
        console.log('filtering stores...')

        let filteredStores = stores.filter(item => {
          return item.category_id == e.id;
        });

        stores.splice(0,stores.length,...filteredStores);

        //when refreshing the store slides also my other slides refresh at the same time I do not get why!
        stores.map(i => i.unique = $f7.utils.id('slide-xxxxx'));
        $update().then(done).then(() => {
          let s = $f7.swiper.get($el.value.find('.swiper.stores'));
          s.update();
          s.slideTo(0);
          [...Array(s.params.lazy.loadPrevNextAmount).keys()].forEach(s.lazy.loadInSlide);
        });

      }
    }));

I wonder if you want just to refresh a specific swiper slider after applying some filters how you refresh just only that specific swiper slider if you have more in your page?

have you tried this?

here => jolly-sid-d25jb0 - CodeSandbox

1 Like

great idea! big thanks deejay!
:slightly_smiling_face: :+1: