How to loop through a carousel?

Question

what is the best way to loop through a carousel? Is there a possibility to know when the slides have reached the end and take them back to the start and vice versa?. I've tried to use the "--items-per-screen" variable from CSS but it worked only in the desktop version, I couldn't fix it on the mobile version

function MoveElements () {
   let initialCounter= 0;
   
function nextElement () {

 $(":root")[0].style.setProperty("--slider-index",++initialCounter);

}

function prevElement () {

 $(":root")[0].style.setProperty("--slider-index", --initialCounter);

}
  $('.carouselnav.next').click(nextElement)
$('.carouselnav.prev').click(prevElement)
} 
MoveElements ();

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
:root{
 --handle-size:3rem;
 --img-gap:.25rem;
 --slider-index:0;
 --items-per-screen:5;
}
body{
  background:#f3f3f3;
}
.container{
  width:100%;
 
  position:relative;
}
.carouselcontainer{
   max-width:1360px;
  margin:50px auto;
  background:#f1f1f1;
  position:relative;
  overflow:hidden;
}
.caroufredsel_wrapper{
  width:100%;
}
.shopWindow{
  display:flex;
  justify-content:space-between;
   transform: translateX(calc(var(--slider-index) * -100%));
  transition:transform 0.5s cubic-bezier(0.96, -0.17, 0.07, 0.80);
  
}
.shopWindow .grid-unit {
    flex-shrink: 0;
    width: 144px;
    /*width: calc(100% / 5);*/
    width:calc(100% / var( --items-per-screen));
  max-width:100%;
    padding-right: 5px !important;
    margin-right: 0 !important;
}
.shopWindow .thumb{
  position: relative;
    overflow: hidden;
    padding: 45px 10px;
    background: #fff;
}
.shopWindow .grid-unit .grid-unit-inner .item .thumb .img-responsive {
  display:block;
  margin: 0 auto;
  max-width:100%;
}
.shopWindow .item .itemInfo {
    padding: 20px 0;
    background: #fafafa;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    font-weight: 500;
    text-align: center;
}
.shopWindow .item .trademark {
    margin-bottom: 4px;
}

.shopWindow .item .title {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 9px;
}
.shopWindow .item .trademark a {
    line-height: 16px;
    font-size: 14px;
    color: #000;
    font-weight: 600;
    text-transform: uppercase;
}
.shopWindow .item .title a {
    line-height: 19px;
    font-size: 14px;
    color: #000;
    text-decoration: none;
    font-weight: 400;
}
.shopWindow .item .campaignContainer {
    display: flex;
    margin-bottom: 10px;
    height: 30px;
}
.shopWindow .item .campaignContainer .priceContainer {
    display: flex;
    width: 100%;
    font-family: 'Inter',sans-serif;
    justify-content: center;
}
.shopWindow .item .campaignContainer .priceContainer .price, .shopWindow .item .campaignContainer .priceContainer .discount {
    color: #303030;
    font-weight: 700;
    display: inline-block;
    font-size: 18px;
    line-height: 27px;
}
.carouselcontainer .carouselnav {
    background-color: transparent !important;
    background-image: none !important;
    position: absolute;
    background-color: #ececec;
    background-repeat: no-repeat;
    background-position: center center;
    opacity: 0.8;
    top: 0;
    height: 100%;
    width: 30px;
}
div.carouselcontainer.horizontal a.carouselnav.prev {
    left: 0;
   
}
div.carouselcontainer.horizontal a.carouselnav.next {
    right: 4px;
   
}
.carouselcontainer.horizontal .carouselnav.next:before {
    content: '>';
}
.carouselcontainer.horizontal .carouselnav.prev:before {
    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;
}
@media screen and (max-width: 1269px) and (min-width: 769px) {
  .grid-unit{
    
  --items-per-screen:3;
  }
}
@media screen and (max-width: 768px) {
  .grid-unit{
    
  --items-per-screen:2;
  }
}




 
   

  
    
    
      
        
        
        
          
        
      

      
        
          KTM
        
        
          Wild Cross 24
        
        
          
            6490
          
        
        
      
    
  


  
    
    
      
        
        
        
          
        
      
      
        
          KTM
        
        
          Wild Cross 24
        
        
          
            6490
          
        
        
      
    
  


  
    
    
      
        
        
        
          
        
      
      
        
          KTM
        
        
          Wild Cross 24
        
        
          
            6490
          
        
        
      
    
  


  
    
    
      
        
        
        
          
        
      
      
        
          KTM
        
        
          Wild Cross 24
        
        
          
            6490
          
        
        
      
    
  


  
    
    
      
        
        
        
          
        
      
      
        
          KTM
        
        
          Wild Cross 24
        
        
          
            6490
          
        
        
      
    
  


  
    
    
      
        
        
        
          
        
      

      
        
          KTM
        
        
          Wild Cross 24
        
        
          
            6490
          
        
        
      
    
  


  
    
    
      
        
        
        
          
        
      
      
        
          KTM
        
        
          Wild Cross 24
        
        
          
            6490
          
        
        
      
    
  


  
    
    
      
        
        
        
          
        
      
      
        
          KTM
        
        
          Wild Cross 24
        
        
          
            6490
          
        
        
      
    
  


  
    
    
      
        
        
        
          
        
      
      
        
          KTM
        
        
          Wild Cross 24
        
        
          
            6490
          
        
        
      
    
  


  
    
    
      
        
        
        
          
        
      
      
        
          KTM
        
        
          Wild Cross 24
        
        
          
            6490
          
        
        
      
    
  


  
    
    
      
        
        
        
          
        
      

      
        
          KTM
        
        
          Wild Cross 24
        
        
          
            6490
          
        
        
      
    
  


  
    
    
      
        
        
        
          
        
      
      
        
          KTM
        
        
          Wild Cross 24
        
        
          
            6490
          
        
        
      
    
  


  
    
    
      
        
        
        
          
        
      
      
        
          KTM
        
        
          Wild Cross 24
        
        
          
            6490
          
        
        
      
    
  


  
    
    
      
        
        
        
          
        
      
      
        
          KTM
        
        
          Wild Cross 24
        
        
          
            6490
          
        
        
      
    
  


  
    
    
      
        
        
        
          
        
      
      
        
          KTM
        
        
          Wild Cross 24
        
        
          
            6490
          
        
        
      
    
  


  
    
    
      
        
        
        
          
        
      

      
        
          KTM
        
        
          Wild Cross 24
        
        
          
            6490
          
        
        
      
    
  


  
    
    
      
        
        
        
          
        
      
      
        
          KTM
        
        
          Wild Cross 24
        
        
          
            6490
          
        
        
      
    
  


  
    
    
      
        
        
        
          
        
      
      
        
          KTM
        
        
          Wild Cross 24
        
        
          
            6490
          
        
        
      
    
  


  
    
    
      
        
        
        
          
        
      
      
        
          KTM
        
        
          Wild Cross 24
        
        
          
            6490
          
        
        
      
    
  


  
    
    
      
        
        
        
          
        
      
      
        
          KTM
        
        
          Wild Cross 24
        
        
          
            6490
          
        
        
      
    
  

     
  
    
    
      
        
        
        
          
        
      
      
        
          KTM
        
        
          Wild Cross 24
        
        
          
            6490
          
        
        
      
    
  


  
    
    
      
        
        
        
          
        
      
      
        
          KTM
        
        
          Wild Cross 24
        
        
          
            6490

herrstrietzel · Answer

You need to calculate the total number of screens according to the current settings:

let screensTotal = Math.ceil(itemsTotal / itemsPerScreen);

I strongly recommend renaming the initialCounter variable to currentScreen (it's just more self-explanatory).
Each time you call nextElement() the currentScreen variable is increased.
If it becomes larger than the number of total screens, you need to reset it to 0.

Example

//count total items
let carouselItems = document.querySelectorAll(".grid-unit");
let itemsTotal = carouselItems.length;

//count total screens
let styles = window.getComputedStyle(document.body);
let itemsPerScreen = parseFloat(styles.getPropertyValue("--items-per-screen"));
let screensTotal = Math.ceil(itemsTotal / itemsPerScreen);

// update items to screen ratios on window resize
window.addEventListener("resize", function(e) {
  styles = window.getComputedStyle(document.body);
  itemsPerScreen = parseFloat(styles.getPropertyValue("--items-per-screen"));
  screensTotal = Math.ceil(itemsTotal / itemsPerScreen);
});

function MoveElements() {
  let currentScreen = 0;

  function nextElement() {
    currentScreen++;
    if (currentScreen >= screensTotal) {
      currentScreen = 0;
    }
    //update css var
    $(":root")[0].style.setProperty("--slider-index", currentScreen);
  }

  function prevElement() {
    currentScreen--;
    //got to last screen
    if (currentScreen < 0) {
      currentScreen = screensTotal - 1;
    }
    $(":root")[0].style.setProperty("--slider-index", currentScreen);
  }
  $(".carouselnav.next").click(nextElement);
  $(".carouselnav.prev").click(prevElement);
}
MoveElements();

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --handle-size: 3rem;
  --img-gap: 0.25rem;
  --slider-index: 0;
  --items-per-screen: 5;
}

body {
  background: #f3f3f3;
}

.container {
  width: 100%;
  position: relative;
}

.carouselcontainer {
  max-width: 1360px;
  margin: 50px auto;
  background: #f1f1f1;
  position: relative;
  overflow: hidden;
}

.caroufredsel_wrapper {
  width: 100%;
}

.shopWindow {
  display: flex;
  justify-content: space-between;
  transform: translateX(calc(var(--slider-index) * -100%));
  transition: transform 0.5s cubic-bezier(0.96, -0.17, 0.07, 0.8);
}

.shopWindow .grid-unit {
  flex-shrink: 0;
  width: 144px;
  /*width: calc(100% / 5);*/
  width: calc(100% / var(--items-per-screen));
  max-width: 100%;
  padding-right: 5px !important;
  margin-right: 0 !important;
}

.shopWindow .thumb {
  position: relative;
  overflow: hidden;
  padding: 45px 10px;
  background: #fff;
}

.shopWindow .grid-unit .grid-unit-inner .item .thumb .img-responsive {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

.shopWindow .item .itemInfo {
  padding: 20px 0;
  background: #fafafa;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  font-weight: 500;
  text-align: center;
}

.shopWindow .item .trademark {
  margin-bottom: 4px;
}

.shopWindow .item .title {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 9px;
}

.shopWindow .item .trademark a {
  line-height: 16px;
  font-size: 14px;
  color: #000;
  font-weight: 600;
  text-transform: uppercase;
}

.shopWindow .item .title a {
  line-height: 19px;
  font-size: 14px;
  color: #000;
  text-decoration: none;
  font-weight: 400;
}

.shopWindow .item .campaignContainer {
  display: flex;
  margin-bottom: 10px;
  height: 30px;
}

.shopWindow .item .campaignContainer .priceContainer {
  display: flex;
  width: 100%;
  font-family: "Inter", sans-serif;
  justify-content: center;
}

.shopWindow .item .campaignContainer .priceContainer .price,
.shopWindow .item .campaignContainer .priceContainer .discount {
  color: #303030;
  font-weight: 700;
  display: inline-block;
  font-size: 18px;
  line-height: 27px;
}

.carouselcontainer .carouselnav {
  background-color: transparent !important;
  background-image: none !important;
  position: absolute;
  background-color: #ececec;
  background-repeat: no-repeat;
  background-position: center center;
  opacity: 0.8;
  top: 0;
  height: 100%;
  width: 30px;
}

div.carouselcontainer.horizontal a.carouselnav.prev {
  left: 0;
}

div.carouselcontainer.horizontal a.carouselnav.next {
  right: 4px;
}

.carouselcontainer.horizontal .carouselnav.next:before {
  content: ">";
}

.carouselcontainer.horizontal .carouselnav.prev:before {
  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;
}

@media screen and (max-width: 1269px) and (min-width: 769px) {
   :root {
    --items-per-screen: 3;
  }
}

@media screen and (max-width: 768px) {
   :root {
    --items-per-screen: 2;
  }
}



  
    
      
        
          
            
              
                
                
                
                  
                
              
              
              
              
                
                
                
                  
                  KTM
                
                
                  Wild Cross 24
                
                
                  
                    6490
                  
                
                
              
            
          
        
        
          

            
              
                
                
                
                  
                
              
              
                
                  KTM
                
                
                  Wild Cross 24
                
                
                  
                    6490
                  
                
                
              
            
          
        
        
          

            
              
                
                
                
                  
                
              
              
                
                  KTM
                
                
                  Wild Cross 24
                
                
                  
                    6490
                  
                
                
              
            
          
        
        
          

            
              
                
                
                
                  
                
              
              
                
                  KTM
                
                
                  Wild Cross 24
                
                
                  
                    6490
                  
                
                
              
            
          
        
        
          

            
              
                
                
                
                  
                
              
              
                
                  KTM
                
                
                  Wild Cross 24
                
                
                  
                    6490
                  
                
                
              
            
          
        
        
          

            
              
                
                
                
                  

                
              
              
              
              
                
                
                
                  
                  KTM
                
                
                  Wild Cross 24
                
                
                  
                    6490
                  
                
                
              
            
          
        
        
          

            
              
                
                
                
                  
                
              
              
                
                  KTM
                
                
                  Wild Cross 24
                
                
                  
                    6490
                  
                
                
              
            
          
        
        
          

            
              
                
                
                
                  
                
              
              
                
                  KTM
                
                
                  Wild Cross 24
                
                
                  
                    6490
                  
                
                
              
            
          
        
        
          

            
              
                
                
                
                  
                
              
              
                
                  KTM
                
                
                  Wild Cross 24
                
                
                  
                    6490
                  
                
                
              
            
          
        
        
          

            
              
                
                
                
                  
                
              
              
                
                  KTM
                
                
                  Wild Cross 24
                
                
                  
                    6490
                  
                
                
              
            
          
        
        
          

            
              
                
                
                
                  

                
              
              
              
              
                
                
                
                  
                  KTM
                
                
                  Wild Cross 24
                
                
                  
                    6490
                  
                
                
              
            
          
        
        
          

            
              
                
                
                
                  
                
              
              
                
                  KTM
                
                
                  Wild Cross 24
                
                
                  
                    6490
                  
                
                
              
            
          
        
        
          

            
              
                
                
                
                  
                
              
              
                
                  KTM
                
                
                  Wild Cross 24
                
                
                  
                    6490
                  
                
                
              
            
          
        
        
          

            
              
                
                
                
                  
                
              
              
                
                  KTM
                
                
                  Wild Cross 24
                
                
                  
                    6490
                  
                
                
              
            
          
        
        
          

            
              
                
                
                
                  
                
              
              
                
                  KTM
                
                
                  Wild Cross 24
                
                
                  
                    6490
                  
                
                
              
            
          
        

        
          

            
              
                
                
                
                  
                
              
              
                
                  KTM
                
                
                  Wild Cross 24
                
                
                  
                    6490
                  
                
                
              
            
          
        
        
          

            
              
                
                
                
                  
                
              
              
                
                  KTM
                
                
                  Wild Cross 24
                
                
                  
                    6490

How to loop through a carousel?

1 Answers

Example