Adding and removing classes to current slide with JQuery

user19840758
November 1, 2022
168 views
1 vote
2 Answers

Good evenening (at least where I live 😉 )

I have a carousel set up. I would like to remove the class ‘invisible’ to the current slide.
Unfortunately, I’m a total noob when it comes to JQuery, and I’m having a really hard time understanding how to set this up properly.

This is the snippet

HTML

const move = 600;

const margin_reset = (move * -1) + 'px'

setInterval(()=>{
  $("#inside-container").animate({
      marginLeft: (move * -2) +"px"
    }, 1800, function() {
      $(this).append( $(this).find('.items:first') )
        .css('margin-left', margin_reset);

        $('items.active').removeClass('active', 'invisible');
        $(this).addClass('active');
  }
  );

}, 4000)

#outside-container{
  display: block;
  width: 600px;
  height: 50vh;
  border: 1px solid #000;
  overflow: hidden;
  margin: 0px auto;
}
#inside-container{
  display: block;
  width: 2400px;
  height: 100%;
  overflow: hidden;
  margin-left: -200px;
}

.items{
  float: left;
  margin: 0px;
  width: 600px;
  height: 100%;
}
#item1{ background: green; }
#item2{ background: red; }
#item3{ background: blue; }
#item4{ background: yellow; }


.carousel-img {
  position: relative;
  width: 100%;
  height: 100%;
}

.invisible {
  display: none;
}


.data-div {
  position: absolute;
  top: 31%;
  left: 19%;
  overflow: hidden;
  color: rgb(255, 255, 255);
  font-weight: 600;
  font-size: large;
}

<div class="main">
  <div id="outside-container">
    <div id="inside-container" class="cf">
      <div class="items" id="item1">
        <div class="data-div invisible">
          <ul>
            <li><b>{{rio_de_janeiro.city}}</b> </li>
            <li>{{rio_de_janeiro.weather.description}}</li>
            <!-- <img src="{{rio_de_janeiro.weather.icon}}" alt=""> -->
            <li>{{rio_de_janeiro.main.temperature}}</li>
          </ul>
        </div>
        <img src="{% static 'weather/images/cities/' %}{{rio_de_janeiro.city_capitalized}}.jpg" class="carousel-img">
      </div>
      <div class="items active" id="item2">
        <div class="data-div invisible">
          <ul>
            <li><b>{{new_york.city}}</b> </li>
            <li>{{new_york.weather.description}}</li>
            <!-- <img src="{{new_york.weather.icon}}" alt=""> -->
            <li>{{new_york.main.temperature}}</li>
          </ul>
        </div>
        <img src="{% static 'weather/images/cities/' %}{{new_york.city_capitalized}}.jpg" class="carousel-img">
      </div>
      <div class="items" id="item3">
        <div class="data-div invisible">
          <ul>
            <li><b>{{london.city}}</b> </li>
            <li>{{london.weather.description}}</li>
            <!-- <img src="{{london.weather.icon}}" alt=""> -->
            <li>{{london.main.temperature}}</li>
          </ul>
        </div>
       <img src="{% static 'weather/images/cities/' %}{{london.city_capitalized}}.jpg" class="carousel-img">
      </div>
      <div class="items" id="item4">
        <div class="data-div invisible">
          <ul>
            <li><b>{{sidney.city}}</b> </li>
            <li>{{sidney.weather.description}}</li>
            <!-- <img src="{{sidney.weather.icon}}" alt=""> -->
            <li>{{sidney.main.temperature}}</li>
          </ul>
        </div>
       <img src="{% static 'weather/images/cities/' %}{{sidney.city_capitalized}}.jpg" class="carousel-img">
      </div>
    </div>
  </div>

#1 I don’t even think that adding the ‘active’ class is needed in this case, but honestly I just threw it in there and see if it would help (bad idea I know, LOL)

#2 This should definitely be possible just by using plain JS, and if you feel more comfortable solving this using JS, feel totally free to do so. I’m not fixated on using JQuery

thank you very much in advance for any help 🙂

Answers

- DrVortex
- November 1, 2022 at 10:48 pm
- 0 votes
0
With jQuery:
```
$('items.active').removeClass(['active', 'invisible']);
```
with regular JS:
```
let element = $('items.active')[0];
//you can also use document.querySelector , document.getElementByID, etc.


element.classList.remove('active', 'invisible');
```
Login or Signup to reply.

Please see: https://api.jquery.com/removeClass/#removeClass-className

There are two methods:

One or more space-separated classes to be removed from the class attribute of each matched element.

An array of classes to be removed from the class attribute of each matched element.

Method 1:

const move = 600;

const margin_reset = (move * -1) + 'px'

setInterval(() => {
  $("#inside-container").animate({
    marginLeft: (move * -2) + "px"
  }, 1800, function() {
    $(this).append($(this).find('.items:first'))
      .css('margin-left', margin_reset);

    $('items.active').removeClass('active invisible');
    $(this).addClass('active');
  });
}, 4000)

#outside-container {
  display: block;
  width: 600px;
  height: 50vh;
  border: 1px solid #000;
  overflow: hidden;
  margin: 0px auto;
}

#inside-container {
  display: block;
  width: 2400px;
  height: 100%;
  overflow: hidden;
  margin-left: -200px;
}

.items {
  float: left;
  margin: 0px;
  width: 600px;
  height: 100%;
}

#item1 {
  background: green;
}

#item2 {
  background: red;
}

#item3 {
  background: blue;
}

#item4 {
  background: yellow;
}

.carousel-img {
  position: relative;
  width: 100%;
  height: 100%;
}

.invisible {
  display: none;
}

.data-div {
  position: absolute;
  top: 31%;
  left: 19%;
  overflow: hidden;
  color: rgb(255, 255, 255);
  font-weight: 600;
  font-size: large;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
  <div id="outside-container">
    <div id="inside-container" class="cf">
      <div class="items" id="item1">
        <div class="data-div invisible">
          <ul>
            <li><b>{{rio_de_janeiro.city}}</b> </li>
            <li>{{rio_de_janeiro.weather.description}}</li>
            <!-- <img src="{{rio_de_janeiro.weather.icon}}" alt=""> -->
            <li>{{rio_de_janeiro.main.temperature}}</li>
          </ul>
        </div>
        <img src="{% static 'weather/images/cities/' %}{{rio_de_janeiro.city_capitalized}}.jpg" class="carousel-img">
      </div>
      <div class="items active" id="item2">
        <div class="data-div invisible">
          <ul>
            <li><b>{{new_york.city}}</b> </li>
            <li>{{new_york.weather.description}}</li>
            <!-- <img src="{{new_york.weather.icon}}" alt=""> -->
            <li>{{new_york.main.temperature}}</li>
          </ul>
        </div>
        <img src="{% static 'weather/images/cities/' %}{{new_york.city_capitalized}}.jpg" class="carousel-img">
      </div>
      <div class="items" id="item3">
        <div class="data-div invisible">
          <ul>
            <li><b>{{london.city}}</b> </li>
            <li>{{london.weather.description}}</li>
            <!-- <img src="{{london.weather.icon}}" alt=""> -->
            <li>{{london.main.temperature}}</li>
          </ul>
        </div>
        <img src="{% static 'weather/images/cities/' %}{{london.city_capitalized}}.jpg" class="carousel-img">
      </div>
      <div class="items" id="item4">
        <div class="data-div invisible">
          <ul>
            <li><b>{{sidney.city}}</b> </li>
            <li>{{sidney.weather.description}}</li>
            <!-- <img src="{{sidney.weather.icon}}" alt=""> -->
            <li>{{sidney.main.temperature}}</li>
          </ul>
        </div>
        <img src="{% static 'weather/images/cities/' %}{{sidney.city_capitalized}}.jpg" class="carousel-img">
      </div>
    </div>
  </div>

Method 2:

const move = 600;

const margin_reset = (move * -1) + 'px'

setInterval(() => {
  $("#inside-container").animate({
    marginLeft: (move * -2) + "px"
  }, 1800, function() {
    $(this).append($(this).find('.items:first'))
      .css('margin-left', margin_reset);

    $('items.active').removeClass(['active', 'invisible']);
    $(this).addClass('active');
  });
}, 4000)

#outside-container {
  display: block;
  width: 600px;
  height: 50vh;
  border: 1px solid #000;
  overflow: hidden;
  margin: 0px auto;
}

#inside-container {
  display: block;
  width: 2400px;
  height: 100%;
  overflow: hidden;
  margin-left: -200px;
}

.items {
  float: left;
  margin: 0px;
  width: 600px;
  height: 100%;
}

#item1 {
  background: green;
}

#item2 {
  background: red;
}

#item3 {
  background: blue;
}

#item4 {
  background: yellow;
}

.carousel-img {
  position: relative;
  width: 100%;
  height: 100%;
}

.invisible {
  display: none;
}

.data-div {
  position: absolute;
  top: 31%;
  left: 19%;
  overflow: hidden;
  color: rgb(255, 255, 255);
  font-weight: 600;
  font-size: large;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
  <div id="outside-container">
    <div id="inside-container" class="cf">
      <div class="items" id="item1">
        <div class="data-div invisible">
          <ul>
            <li><b>{{rio_de_janeiro.city}}</b> </li>
            <li>{{rio_de_janeiro.weather.description}}</li>
            <!-- <img src="{{rio_de_janeiro.weather.icon}}" alt=""> -->
            <li>{{rio_de_janeiro.main.temperature}}</li>
          </ul>
        </div>
        <img src="{% static 'weather/images/cities/' %}{{rio_de_janeiro.city_capitalized}}.jpg" class="carousel-img">
      </div>
      <div class="items active" id="item2">
        <div class="data-div invisible">
          <ul>
            <li><b>{{new_york.city}}</b> </li>
            <li>{{new_york.weather.description}}</li>
            <!-- <img src="{{new_york.weather.icon}}" alt=""> -->
            <li>{{new_york.main.temperature}}</li>
          </ul>
        </div>
        <img src="{% static 'weather/images/cities/' %}{{new_york.city_capitalized}}.jpg" class="carousel-img">
      </div>
      <div class="items" id="item3">
        <div class="data-div invisible">
          <ul>
            <li><b>{{london.city}}</b> </li>
            <li>{{london.weather.description}}</li>
            <!-- <img src="{{london.weather.icon}}" alt=""> -->
            <li>{{london.main.temperature}}</li>
          </ul>
        </div>
        <img src="{% static 'weather/images/cities/' %}{{london.city_capitalized}}.jpg" class="carousel-img">
      </div>
      <div class="items" id="item4">
        <div class="data-div invisible">
          <ul>
            <li><b>{{sidney.city}}</b> </li>
            <li>{{sidney.weather.description}}</li>
            <!-- <img src="{{sidney.weather.icon}}" alt=""> -->
            <li>{{sidney.main.temperature}}</li>
          </ul>
        </div>
        <img src="{% static 'weather/images/cities/' %}{{sidney.city_capitalized}}.jpg" class="carousel-img">
      </div>
    </div>
  </div>

Please signup or login to give your own answer.

Click here to cancel reply.