Adding and removing classes to current slide with JQuery-CodePudding

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 >
  <div id="outside-container">
    <div id="inside-container" >
      <div  id="item1">
        <div >
          <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" >
      </div>
      <div  id="item2">
        <div >
          <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" >
      </div>
      <div  id="item3">
        <div >
          <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" >
      </div>
      <div  id="item4">
        <div >
          <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" >
      </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 :)

CodePudding user response：

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');

CodePudding user response：

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 >
  <div id="outside-container">
    <div id="inside-container" >
      <div  id="item1">
        <div >
          <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" >
      </div>
      <div  id="item2">
        <div >
          <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" >
      </div>
      <div  id="item3">
        <div >
          <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" >
      </div>
      <div  id="item4">
        <div >
          <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" >
      </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 >
  <div id="outside-container">
    <div id="inside-container" >
      <div  id="item1">
        <div >
          <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" >
      </div>
      <div  id="item2">
        <div >
          <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" >
      </div>
      <div  id="item3">
        <div >
          <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" >
      </div>
      <div  id="item4">
        <div >
          <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" >
      </div>
    </div>
  </div>