I search that resize event detect when i resizing the windows, and i know the widht o window can i get it using window.innerWidth or innerWidht

const swiperRooms = document.querySelector('#swiperRooms'); //this contain class mySwiper-rooms
addEventListener("resize", (event) => {
    if(innerWidth < 834) swiperRooms?.classList.toggle('mySwiper');
});

I want to change the class of my swiper(slider) to other class that i have but i dont know why my code doesnt work. Its my first time doing resize

CodePudding user response：

To add an event listener for the "resize" event, you can use the addEventListener() method on the window object. The syntax for this method is as follows:

window.addEventListener("resize", eventHandler);

In the code you provided, you are using addEventListener() on the document object instead of the window object. This is likely causing your code not to work as expected.

To fix this, you can change the first line of your code to the following:

window.addEventListener("resize", (event) => {
  // Your code here
});

In addition, you can use the window.innerWidth property to get the width of the window. This property returns the width of the browser window in pixels, including the scrollbar if present.

Here is how you can use the window.innerWidth property in your code to change the class of your swiper when the window is resized:

window.addEventListener("resize", (event) => {
  if (window.innerWidth < 834) {
    swiperRooms.classList.toggle("mySwiper");
  }
});

In this code, we are using the classList.toggle() method to add or remove the mySwiper class from the swiperRooms element, depending on whether the window width is less than 834 pixels or not.

CodePudding user response：

First of all some correctures:

const swiperRooms = document.querySelector('#swiperRooms'); //this contain class mySwiper-rooms
    window.addEventListener("resize", (event) => {
        if(window.innerWidth < 834) {
          swiperRooms.classList.toggle('mySwiper');
        }
    });

I think you want to add the class, if the window is smaller than in your case 834. The problem is that you used toggle. Every time you resize the window, and the condition of < 834 is true, the class is toggled. Means that it is a 50%-chance to have this class active or not. Instead of using toggle you should use add. And if the condition is not true just remove the class. Like the following:

 if(window.innerWidth < 834) {
     swiperRooms.classList.add('mySwiper');
 }else{
     swiperRooms.classList.remove('mySwiper');
 }

But another thing i would throw into the room is, that you probably don't need this javascript. You should use instead css - media-querys. For example in your css file:

@media screen and (max-width: 834px) {
  //here you need to specify elements and give properties
}

Simply select the css of your slider which you already gave some styles, and then change the properties to your wish. The media query will override the "normal" properties if the condition (max-width: 834px) is true. Hope i could help.

CodePudding user response：

I'm not sure if this is your full code or not, but here are some things that might be the problem:

Number One - Classes and IDs:
Your comment in first line is saying "this contain class mySwiper-rooms" but in your querySelector you are using an ID #swiperRooms. So check your html if

• a) are you using a class or ID? or id="swiperRooms"
  
• b) is it swiperRooms or mySwiper-rooms ?
  
  

Number Two - addEventListener:
First of all, using addEventListener() just like you did is okay, as it's equivalent to window.addEventListener() and that's what you want.

Also the event resizeto listen on is correct.

Number Three - Logic inside eventListener:
I'll assume you didn't create your innerWidth variable by yourself (using var, const or let), so this is okay as well since it's equal to window.innerWidth. But just in case, check if you have it defined somewhere yourself.

Toggling your class: In this case, I wouldn't recomment to toggle the class. Instead split the toggle into classList.add and classList.remove.
Why? Because if you are resizing your window, you will most probably see the resize event multiple times.

• Add the class: if (innerWidth < 834)
  
• Remove the class: else

---

In short:

• Check your classes and IDs if they are correct
• Don't toggle the class because resize event is firing multiple times, instead add and remove it depending on your window size.

---

Working example (not actual swiper, just colors), you have to resize your window until the iframe get's smaller.

const swiperRooms = document.querySelector('.swiper-room');

addEventListener('resize', (event) => {
    console.log(innerWidth);

    if (innerWidth < 600) {
    swiperRooms.classList.add('mySwiper');
  }
  else {
    swiperRooms.classList.remove('mySwiper');
  }
});

.swiper-room {
  background: green;
  width: 100px;
  height: 100px;
}

.swiper-room.mySwiper {
  background: red;
}

<div ></div>