Resolved: How can I change the value of CSS custom property by 1 on button click using jQuery?

Question:

How can I change the value of css custom property by 1 on button click using jQuery?
I want to change the value by 1 when the next button is clicked, I tried to use this x variable and then add one to it whenever the next button is clicked but it didn’t work. What should i do to get the code working, if I want the x variable to increase by 1 when i click on the next button.

$('.carouselnav.next').click(function(){
  var x = 0;
 $(":root")[0].style.setProperty("--slider-index", x++);
})

*{<br />
  margin:0;<br />
  padding:0;<br />
  box-sizing:border-box;<br />
}<br />
:root{<br />
 --handle-size:3rem;<br />
  --img-gap:.25rem;<br />
  --slider-index:1;<br />
  --items-per-screen:5;<br />
}<br />
body{<br />
  background:#f3f3f3;<br />
}<br />
.container{<br />
  width:100%;</p>
<p>  position:relative;<br />
}<br />
.carouselcontainer{<br />
   max-width:1360px;<br />
  margin:50px auto;<br />
  background:#f1f1f1;<br />
  position:relative;<br />
  overflow:hidden;<br />
}<br />
.caroufredsel_wrapper{<br />
  width:100%;<br />
}<br />
.shopWindow{<br />
  display:flex;<br />
  justify-content:space-between;<br />
   transform: translateX(calc(var(--slider-index) * -100%));<br />
  transition:transform 0.9s linear;</p>
<p>}<br />
.shopWindow .grid-unit {<br />
    flex-shrink: 0;<br />
    width: 144px;<br />
    /*width: calc(100% / 5);*/<br />
    width:calc(100% / var( --items-per-screen));<br />
  max-width:100%;<br />
    padding-right: 5px !important;<br />
    margin-right: 0 !important;<br />
    height: 460px !important;<br />
}<br />
.shopWindow .thumb{<br />
  position: relative;<br />
    overflow: hidden;<br />
    padding: 45px 10px;<br />
    background: #fff;<br />
}<br />
.shopWindow .grid-unit .grid-unit-inner .item .thumb .img-responsive {<br />
  display:block;<br />
  margin: 0 auto;<br />
}<br />
.shopWindow .item .itemInfo {<br />
    padding: 20px 0;<br />
    background: #fafafa;<br />
    border-bottom-right-radius: 4px;<br />
    border-bottom-left-radius: 4px;<br />
    font-weight: 500;<br />
    text-align: center;<br />
}<br />
.shopWindow .item .trademark {<br />
    margin-bottom: 4px;<br />
}</p>
<p>.shopWindow .item .title {<br />
    display: -webkit-box;<br />
    -webkit-line-clamp: 1;<br />
    -webkit-box-orient: vertical;<br />
    overflow: hidden;<br />
    margin-bottom: 9px;<br />
}<br />
.shopWindow .item .trademark a {<br />
    line-height: 16px;<br />
    font-size: 14px;<br />
    color: #000;<br />
    font-weight: 600;<br />
    text-transform: uppercase;<br />
}<br />
.shopWindow .item .title a {<br />
    line-height: 19px;<br />
    font-size: 14px;<br />
    color: #000;<br />
    text-decoration: none;<br />
    font-weight: 400;<br />
}<br />
.shopWindow .item .campaignContainer {<br />
    display: flex;<br />
    margin-bottom: 10px;<br />
    height: 30px;<br />
}<br />
.shopWindow .item .campaignContainer .priceContainer {<br />
    display: flex;<br />
    width: 100%;<br />
    font-family: 'Inter',sans-serif;<br />
    justify-content: center;<br />
}<br />
.shopWindow .item .campaignContainer .priceContainer .price, .shopWindow .item .campaignContainer .priceContainer .discount {<br />
    color: #303030;<br />
    font-weight: 700;<br />
    display: inline-block;<br />
    font-size: 18px;<br />
    line-height: 27px;<br />
}<br />
.carouselcontainer .carouselnav {<br />
    background-color: transparent !important;<br />
    background-image: none !important;<br />
    position: absolute;<br />
    background-color: #ececec;<br />
    background-repeat: no-repeat;<br />
    background-position: center center;<br />
    opacity: 0.8;<br />
    top: 0;<br />
    height: 100%;<br />
    width: 30px;<br />
}<br />
div.carouselcontainer.horizontal a.carouselnav.prev {<br />
    left: 0;</p>
<p>}<br />
div.carouselcontainer.horizontal a.carouselnav.next {<br />
    right: 4px;</p>
<p>}<br />
.carouselcontainer.horizontal .carouselnav.next:before {<br />
    content: '>';<br />
}<br />
.carouselcontainer.horizontal .carouselnav.prev:before {<br />
    content: '<';
}

.carouselcontainer a.carouselnav {
    visibility: visible !important;
}
.carouselcontainer .carouselnav:before {
    font-family: FontAwesome;
    position: absolute;
    width: 100%;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    font-size: 40px;
    opacity: 0.5;
}
.carouselcontainer .carouselnav:hover {
    background-color: #e0e0e0 !important;
}[/code]

</p>


<p>[code]<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script></p>
<div class="container">
<div class="carouselcontainer horizontal">
<div class="caroufredsel_wrapper">
<div class="shopWindow">
<div class="grid-unit">
<div class="grid-unit-inner">
<div class="item">
<div class="thumb">
<div class="badges"></div>
<p>        <a href="" class="addfavourite"></a><br />
        <a href="" ><br />
          <img decoding="async" class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt=""><br />
        </img>
      </div>
<div class="itemInfo">
<div class="trademark">
          <a href="">KTM</a>
        </div>
<div class="title">
          <a href="">Wild Cross 24</a>
        </div>
<div class="campaignContainer">
<div class="priceContainer">
            <span class="price">6490</span>
          </div>
</p></div>
<div class="bottom-container"></div>
</p></div>
</p></div>
</p></div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">
<div class="item">
<div class="thumb">
<div class="badges"></div>
<p>        <a href="" class="addfavourite"></a><br />
        <a href="" ><br />
          <img decoding="async" class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt=""><br />
        </a>
      </div>
<div class="itemInfo">
<div class="trademark">
          <a href="">KTM</a>
        </div>
<div class="title">
          <a href="">Wild Cross 24</a>
        </div>
<div class="campaignContainer">
<div class="priceContainer">
            <span class="price">6490</span>
          </div>
</p></div>
<div class="bottom-container"></div>
</p></div>
</p></div>
</p></div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">
<div class="item">
<div class="thumb">
<div class="badges"></div>
<p>        <a href="" class="addfavourite"></a><br />
        <a href="" ><br />
          <img decoding="async" class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt=""><br />
        </a>
      </div>
<div class="itemInfo">
<div class="trademark">
          <a href="">KTM</a>
        </div>
<div class="title">
          <a href="">Wild Cross 24</a>
        </div>
<div class="campaignContainer">
<div class="priceContainer">
            <span class="price">6490</span>
          </div>
</p></div>
<div class="bottom-container"></div>
</p></div>
</p></div>
</p></div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">
<div class="item">
<div class="thumb">
<div class="badges"></div>
<p>        <a href="" class="addfavourite"></a><br />
        <a href="" ><br />
          <img decoding="async" class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt=""><br />
        </a>
      </div>
<div class="itemInfo">
<div class="trademark">
          <a href="">KTM</a>
        </div>
<div class="title">
          <a href="">Wild Cross 24</a>
        </div>
<div class="campaignContainer">
<div class="priceContainer">
            <span class="price">6490</span>
          </div>
</p></div>
<div class="bottom-container"></div>
</p></div>
</p></div>
</p></div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">
<div class="item">
<div class="thumb">
<div class="badges"></div>
<p>        <a href="" class="addfavourite"></a><br />
        <a href="" ><br />
          <img decoding="async" class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt=""><br />
        </a>
      </div>
<div class="itemInfo">
<div class="trademark">
          <a href="">KTM</a>
        </div>
<div class="title">
          <a href="">Wild Cross 24</a>
        </div>
<div class="campaignContainer">
<div class="priceContainer">
            <span class="price">6490</span>
          </div>
</p></div>
<div class="bottom-container"></div>
</p></div>
</p></div>
</p></div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">
<div class="item">
<div class="thumb">
<div class="badges"></div>
<p>        <a href="" class="addfavourite"></a><br />
        <a href="" ><br />
          <img decoding="async" class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt=""><br />
        </img>
      </div>
<div class="itemInfo">
<div class="trademark">
          <a href="">KTM</a>
        </div>
<div class="title">
          <a href="">Wild Cross 24</a>
        </div>
<div class="campaignContainer">
<div class="priceContainer">
            <span class="price">6490</span>
          </div>
</p></div>
<div class="bottom-container"></div>
</p></div>
</p></div>
</p></div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">
<div class="item">
<div class="thumb">
<div class="badges"></div>
<p>        <a href="" class="addfavourite"></a><br />
        <a href="" ><br />
          <img decoding="async" class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt=""><br />
        </a>
      </div>
<div class="itemInfo">
<div class="trademark">
          <a href="">KTM</a>
        </div>
<div class="title">
          <a href="">Wild Cross 24</a>
        </div>
<div class="campaignContainer">
<div class="priceContainer">
            <span class="price">6490</span>
          </div>
</p></div>
<div class="bottom-container"></div>
</p></div>
</p></div>
</p></div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">
<div class="item">
<div class="thumb">
<div class="badges"></div>
<p>        <a href="" class="addfavourite"></a><br />
        <a href="" ><br />
          <img decoding="async" class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt=""><br />
        </a>
      </div>
<div class="itemInfo">
<div class="trademark">
          <a href="">KTM</a>
        </div>
<div class="title">
          <a href="">Wild Cross 24</a>
        </div>
<div class="campaignContainer">
<div class="priceContainer">
            <span class="price">6490</span>
          </div>
</p></div>
<div class="bottom-container"></div>
</p></div>
</p></div>
</p></div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">
<div class="item">
<div class="thumb">
<div class="badges"></div>
<p>        <a href="" class="addfavourite"></a><br />
        <a href="" ><br />
          <img decoding="async" class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt=""><br />
        </a>
      </div>
<div class="itemInfo">
<div class="trademark">
          <a href="">KTM</a>
        </div>
<div class="title">
          <a href="">Wild Cross 24</a>
        </div>
<div class="campaignContainer">
<div class="priceContainer">
            <span class="price">6490</span>
          </div>
</p></div>
<div class="bottom-container"></div>
</p></div>
</p></div>
</p></div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">
<div class="item">
<div class="thumb">
<div class="badges"></div>
<p>        <a href="" class="addfavourite"></a><br />
        <a href="" ><br />
          <img decoding="async" class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt=""><br />
        </a>
      </div>
<div class="itemInfo">
<div class="trademark">
          <a href="">KTM</a>
        </div>
<div class="title">
          <a href="">Wild Cross 24</a>
        </div>
<div class="campaignContainer">
<div class="priceContainer">
            <span class="price">6490</span>
          </div>
</p></div>
<div class="bottom-container"></div>
</p></div>
</p></div>
</p></div>
</div></div>
</p></div>
<p>  <a class="carouselnav next" href="#"></p>
<p>   </a><br />
   <a class="carouselnav prev" href="#"></p>
<p>   </a>
</div>
</p></div>
<p>

Answer:

Use CSSStyleDeclaration.getPropertyValue() to get the current --slider-index value, assign to a variable, such as x, and pre-increment it’s value, as in: ++x.
For example:

$('.carouselnav.next').click(function(){
  let x = $(":root")[0].style.getPropertyValue("--slider-index");
  $(":root")[0].style.setProperty("--slider-index", ++x);
  console.log(x);
})

*{<br />
  margin:0;<br />
  padding:0;<br />
  box-sizing:border-box;<br />
}<br />
:root{<br />
 --handle-size:3rem;<br />
  --img-gap:.25rem;<br />
  --slider-index:0;<br />
  --items-per-screen:5;<br />
}<br />
body{<br />
  background:#f3f3f3;<br />
}<br />
.container{<br />
  width:100%;</p>
<p>  position:relative;<br />
}<br />
.carouselcontainer{<br />
   max-width:1360px;<br />
  margin:50px auto;<br />
  background:#f1f1f1;<br />
  position:relative;<br />
  overflow:hidden;<br />
}<br />
.caroufredsel_wrapper{<br />
  width:100%;<br />
}<br />
.shopWindow{<br />
  display:flex;<br />
  justify-content:space-between;<br />
   transform: translateX(calc(var(--slider-index) * -100%));<br />
  transition:transform 0.9s linear;</p>
<p>}<br />
.shopWindow .grid-unit {<br />
    flex-shrink: 0;<br />
    width: 144px;<br />
    /*width: calc(100% / 5);*/<br />
    width:calc(100% / var( --items-per-screen));<br />
  max-width:100%;<br />
    padding-right: 5px !important;<br />
    margin-right: 0 !important;<br />
    height: 460px !important;<br />
}<br />
.shopWindow .thumb{<br />
  position: relative;<br />
    overflow: hidden;<br />
    padding: 45px 10px;<br />
    background: #fff;<br />
}<br />
.shopWindow .grid-unit .grid-unit-inner .item .thumb .img-responsive {<br />
  display:block;<br />
  margin: 0 auto;<br />
}<br />
.shopWindow .item .itemInfo {<br />
    padding: 20px 0;<br />
    background: #fafafa;<br />
    border-bottom-right-radius: 4px;<br />
    border-bottom-left-radius: 4px;<br />
    font-weight: 500;<br />
    text-align: center;<br />
}<br />
.shopWindow .item .trademark {<br />
    margin-bottom: 4px;<br />
}</p>
<p>.shopWindow .item .title {<br />
    display: -webkit-box;<br />
    -webkit-line-clamp: 1;<br />
    -webkit-box-orient: vertical;<br />
    overflow: hidden;<br />
    margin-bottom: 9px;<br />
}<br />
.shopWindow .item .trademark a {<br />
    line-height: 16px;<br />
    font-size: 14px;<br />
    color: #000;<br />
    font-weight: 600;<br />
    text-transform: uppercase;<br />
}<br />
.shopWindow .item .title a {<br />
    line-height: 19px;<br />
    font-size: 14px;<br />
    color: #000;<br />
    text-decoration: none;<br />
    font-weight: 400;<br />
}<br />
.shopWindow .item .campaignContainer {<br />
    display: flex;<br />
    margin-bottom: 10px;<br />
    height: 30px;<br />
}<br />
.shopWindow .item .campaignContainer .priceContainer {<br />
    display: flex;<br />
    width: 100%;<br />
    font-family: 'Inter',sans-serif;<br />
    justify-content: center;<br />
}<br />
.shopWindow .item .campaignContainer .priceContainer .price, .shopWindow .item .campaignContainer .priceContainer .discount {<br />
    color: #303030;<br />
    font-weight: 700;<br />
    display: inline-block;<br />
    font-size: 18px;<br />
    line-height: 27px;<br />
}<br />
.carouselcontainer .carouselnav {<br />
    background-color: transparent !important;<br />
    background-image: none !important;<br />
    position: absolute;<br />
    background-color: #ececec;<br />
    background-repeat: no-repeat;<br />
    background-position: center center;<br />
    opacity: 0.8;<br />
    top: 0;<br />
    height: 100%;<br />
    width: 30px;<br />
}<br />
div.carouselcontainer.horizontal a.carouselnav.prev {<br />
    left: 0;</p>
<p>}<br />
div.carouselcontainer.horizontal a.carouselnav.next {<br />
    right: 4px;</p>
<p>}<br />
.carouselcontainer.horizontal .carouselnav.next:before {<br />
    content: '>';<br />
}<br />
.carouselcontainer.horizontal .carouselnav.prev:before {<br />
    content: '<';
}

.carouselcontainer a.carouselnav {
    visibility: visible !important;
}
.carouselcontainer .carouselnav:before {
    font-family: FontAwesome;
    position: absolute;
    width: 100%;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    font-size: 40px;
    opacity: 0.5;
}
.carouselcontainer .carouselnav:hover {
    background-color: #e0e0e0 !important;
}[/code]

</p>


<p>[code]<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script></p>
<div class="container">
<div class="carouselcontainer horizontal">
<div class="caroufredsel_wrapper">
<div class="shopWindow">
<div class="grid-unit">
<div class="grid-unit-inner">
<div class="item">
<div class="thumb">
<div class="badges"></div>
<p>        <a href="" class="addfavourite"></a><br />
        <a href="" ><br />
          <img decoding="async" class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt=""><br />
        </img>
      </div>
<div class="itemInfo">
<div class="trademark">
          <a href="">KTM</a>
        </div>
<div class="title">
          <a href="">Wild Cross 24</a>
        </div>
<div class="campaignContainer">
<div class="priceContainer">
            <span class="price">6490</span>
          </div>
</p></div>
<div class="bottom-container"></div>
</p></div>
</p></div>
</p></div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">
<div class="item">
<div class="thumb">
<div class="badges"></div>
<p>        <a href="" class="addfavourite"></a><br />
        <a href="" ><br />
          <img decoding="async" class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt=""><br />
        </a>
      </div>
<div class="itemInfo">
<div class="trademark">
          <a href="">KTM</a>
        </div>
<div class="title">
          <a href="">Wild Cross 24</a>
        </div>
<div class="campaignContainer">
<div class="priceContainer">
            <span class="price">6490</span>
          </div>
</p></div>
<div class="bottom-container"></div>
</p></div>
</p></div>
</p></div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">
<div class="item">
<div class="thumb">
<div class="badges"></div>
<p>        <a href="" class="addfavourite"></a><br />
        <a href="" ><br />
          <img decoding="async" class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt=""><br />
        </a>
      </div>
<div class="itemInfo">
<div class="trademark">
          <a href="">KTM</a>
        </div>
<div class="title">
          <a href="">Wild Cross 24</a>
        </div>
<div class="campaignContainer">
<div class="priceContainer">
            <span class="price">6490</span>
          </div>
</p></div>
<div class="bottom-container"></div>
</p></div>
</p></div>
</p></div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">
<div class="item">
<div class="thumb">
<div class="badges"></div>
<p>        <a href="" class="addfavourite"></a><br />
        <a href="" ><br />
          <img decoding="async" class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt=""><br />
        </a>
      </div>
<div class="itemInfo">
<div class="trademark">
          <a href="">KTM</a>
        </div>
<div class="title">
          <a href="">Wild Cross 24</a>
        </div>
<div class="campaignContainer">
<div class="priceContainer">
            <span class="price">6490</span>
          </div>
</p></div>
<div class="bottom-container"></div>
</p></div>
</p></div>
</p></div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">
<div class="item">
<div class="thumb">
<div class="badges"></div>
<p>        <a href="" class="addfavourite"></a><br />
        <a href="" ><br />
          <img decoding="async" class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt=""><br />
        </a>
      </div>
<div class="itemInfo">
<div class="trademark">
          <a href="">KTM</a>
        </div>
<div class="title">
          <a href="">Wild Cross 24</a>
        </div>
<div class="campaignContainer">
<div class="priceContainer">
            <span class="price">6490</span>
          </div>
</p></div>
<div class="bottom-container"></div>
</p></div>
</p></div>
</p></div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">
<div class="item">
<div class="thumb">
<div class="badges"></div>
<p>        <a href="" class="addfavourite"></a><br />
        <a href="" ><br />
          <img decoding="async" class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt=""><br />
        </img>
      </div>
<div class="itemInfo">
<div class="trademark">
          <a href="">KTM</a>
        </div>
<div class="title">
          <a href="">Wild Cross 24</a>
        </div>
<div class="campaignContainer">
<div class="priceContainer">
            <span class="price">6490</span>
          </div>
</p></div>
<div class="bottom-container"></div>
</p></div>
</p></div>
</p></div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">
<div class="item">
<div class="thumb">
<div class="badges"></div>
<p>        <a href="" class="addfavourite"></a><br />
        <a href="" ><br />
          <img decoding="async" class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt=""><br />
        </a>
      </div>
<div class="itemInfo">
<div class="trademark">
          <a href="">KTM</a>
        </div>
<div class="title">
          <a href="">Wild Cross 24</a>
        </div>
<div class="campaignContainer">
<div class="priceContainer">
            <span class="price">6490</span>
          </div>
</p></div>
<div class="bottom-container"></div>
</p></div>
</p></div>
</p></div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">
<div class="item">
<div class="thumb">
<div class="badges"></div>
<p>        <a href="" class="addfavourite"></a><br />
        <a href="" ><br />
          <img decoding="async" class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt=""><br />
        </a>
      </div>
<div class="itemInfo">
<div class="trademark">
          <a href="">KTM</a>
        </div>
<div class="title">
          <a href="">Wild Cross 24</a>
        </div>
<div class="campaignContainer">
<div class="priceContainer">
            <span class="price">6490</span>
          </div>
</p></div>
<div class="bottom-container"></div>
</p></div>
</p></div>
</p></div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">
<div class="item">
<div class="thumb">
<div class="badges"></div>
<p>        <a href="" class="addfavourite"></a><br />
        <a href="" ><br />
          <img decoding="async" class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt=""><br />
        </a>
      </div>
<div class="itemInfo">
<div class="trademark">
          <a href="">KTM</a>
        </div>
<div class="title">
          <a href="">Wild Cross 24</a>
        </div>
<div class="campaignContainer">
<div class="priceContainer">
            <span class="price">6490</span>
          </div>
</p></div>
<div class="bottom-container"></div>
</p></div>
</p></div>
</p></div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">
<div class="item">
<div class="thumb">
<div class="badges"></div>
<p>        <a href="" class="addfavourite"></a><br />
        <a href="" ><br />
          <img decoding="async" class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt=""><br />
        </a>
      </div>
<div class="itemInfo">
<div class="trademark">
          <a href="">KTM</a>
        </div>
<div class="title">
          <a href="">Wild Cross 24</a>
        </div>
<div class="campaignContainer">
<div class="priceContainer">
            <span class="price">6490</span>
          </div>
</p></div>
<div class="bottom-container"></div>
</p></div>
</p></div>
</p></div>
</div></div>
</p></div>
<p>  <a class="carouselnav next" href="#"></p>
<p>   </a><br />
   <a class="carouselnav prev" href="#"></p>
<p>   </a>
</div>
</p></div>
<p>

If you don’t need to use the --slider-index value in that code block again, you can skip assigning to a variable and just add one to the current --slider-index value:

$('.carouselnav.next').click(function(){
  $(":root")[0].style.setProperty(
    "--slider-index", 
    1 + $(":root")[0].style.getPropertyValue("--slider-index")
  );
})

If you have better answer, please add a comment about this, thank you!

Resolved: How can I change the value of CSS custom property by 1 on button click using jQuery?

Resolved: Input Focus between two React Components

Resolved: linq2db throws exception when filtering by nested collection

Resolved: Table data is coming as empty in React

Leave A Reply