How to create right and left buttons to move product carousel in jQuery?

Question

Investigating and, putting together my code little by little, I have achieved a carousel with the mouseup function that allows me to move the products by pressing the left button of the mouse without releasing it, so far it goes very well, well sometimes it remains as stalled, that is, without having pressed if I move the pointer moves the products.

What I want to achieve in my code is to be able to integrate two buttons, one right and one left, to also be able to move the products of the carousel in that way. How can I achieve it, can you explain to me?

    var direction_slider = "up";
    var current_step = 0;
    var scroll_product = false;
    var scroll = -1;

$(function(){
    // vars for clients list carousel 
    var $product_carousel = $('.slider');
    var products = $product_carousel.children().length;
    var product_width = (products * 140); // 140px width for each client item 
    $product_carousel.css('width',product_width);

    var rotating = true;
    //var product_speed = 1800;
    //var see_products = setInterval(rotateClients, product_speed);

    $(document).on({
        mouseenter: function(){
            rotating = false; // turn off rotation when hovering
        },
        mouseleave: function(){
            rotating = true;
        }
    }, '#carousel');

    $product_carousel.on("mousedown", function(e) {
        scroll_product = true;
        scroll = e.pageX;
        event.preventDefault();
    }).on("mouseup", function(e) {
        scroll_product = false;
        var num = Math.floor(Math.abs(scroll - e.pageX) / 140);
        var dir = scroll - e.pageX < 0 ? "up" : "down";
        for (var x = 0; x < num; x++) {
            var $first = $('.slider .item:first');
            var $last  = $('.slider .item:last');
            if (dir == "up") {
                $last.prependTo(".slider");
            } else {
                $first.appendTo(".slider");
            }
        }
        $(".slider").css("transform", "translate(0, 0)")
    }).on("mousemove", function(e) {
        if (scroll_product) {
            $(".slider").css("transform", "translate(" + ( e.pageX - scroll ) +"px, 0)")
        }
    });
});

.carousel {
    margin: 0 auto;
    padding: 1em;
    width: 100%;
    max-width: 1170px;
    margin-left: auto;
    overflow: hidden;
}
.slider {
    width: 100% !important;
    display: flex;
}
.item {
    display: inline-table;
    width: 280px;
    height: 325px;
    margin: 0.5em;
    border: 1px solid #ccc;
}
a {
    color: #8563CF;
    text-decoration: none;
    font-weight: 100;
}
.thumbnail {
    height: 150px;
    position: relative;
}
.thumbnail img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: 50% 15%;
}

img {
    border: 0;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}
.p1em {
    padding: 1em;
}



                                        
                                            
                                                    
        
            
                
            
            
                
                    Prueba 1
                
                
                    
                
                                
                    
                        
                        $40.130,00
                    
                
                            
        
    
  
        
            
                
            
            
                
                    Curso de PHP 8 básico, intermedio y, avanzado. 
                
                
                    Acaded

user_14251221 · Answer

The goal here is to shift the order of elements to the left or right. With jQuery this is exceptionally easy.

The logic is as so:

To shift the order to the right, select the last item, delete it, then insert before the first item
To shift the order to the left, select the first item, delete it, then insert after the last item

To achieve this, we attach a click event listener to each respective button. We select all the slider items with the selector $('.item.product'), use last() and first() to get the first and last items, and the remove() function to delete the element. Then, to reorder, we use jQuery's insertBefore() and insertAfter().

This is the result:

$('#right').click(function() {
    $('.item.product').last().remove().insertBefore($('.item.product').first());
})
$('#left').click(function() {
    $('.item.product').first().remove().insertAfter($('.item.product').last());
})

And the rest is just a matter of styling ^{(note: uses Material Icons for the arrow icons)}. Define two button elements;

^{The "chevron_right" and "chevron_left" are icon names | List of Icons}

Set their position to fixed so that their position isn't lost when the user scrolls. Set the top attribute to calc(50vh - 50px), where 50vh is half the height of the viewport and 50px is the height of the button (to make it exactly in the "center").

A full example (best viewed in full page mode):

var direction_slider = "up";
var current_step = 0;
var scroll_product = false;
var scroll = -1;

$(function() {
  $('#right').click(function() {
    $('.item.product').last().remove().insertBefore($('.item.product').first());
  })
  $('#left').click(function() {
    $('.item.product').first().remove().insertAfter($('.item.product').last());
  })
  var $product_carousel = $('.slider');
  var products = $product_carousel.children().length;
  var product_width = (products * 140);
  $product_carousel.css('width', product_width);
  var rotating = true;
  $(document).on({
    mouseenter: function() {
      rotating = false;
    },
    mouseleave: function() {
      rotating = true;
    }
  }, '#carousel');

  $product_carousel.on("mousedown", function(e) {
    scroll_product = true;
    scroll = e.pageX;
    event.preventDefault();
  }).on("mouseup", function(e) {
    scroll_product = false;
    var num = Math.floor(Math.abs(scroll - e.pageX) / 140);
    var dir = scroll - e.pageX < 0 ? "up" : "down";
    for (var x = 0; x < num; x++) {
      var $first = $('.slider .item:first');
      var $last = $('.slider .item:last');
      if (dir == "up") {
        $last.prependTo(".slider");
      } else {
        $first.appendTo(".slider");
      }
    }
    $(".slider").css("transform", "translate(0, 0)")
  }).on("mousemove", function(e) {
    if (scroll_product) {
      $(".slider").css("transform", "translate(" + (e.pageX - scroll) + "px, 0)")
    }
  });
});

/* button integration styling (start) */

#left {
  left: 10px;
}

#right {
  right: 10px;
}

.nav-btn {
  position: fixed;
  top: calc(50vh - 50px);
  z-index: 100;
  z-index: 100;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  cursor: pointer;
  background-color: white;
  box-shadow: 0 0 1px black;
  transition: 0.2s;
}

.nav-btn:hover {
  background-color: #d1d1d1;
}


/* button integration styling (end) */

.carousel {
  margin: 0 auto;
  padding: 1em;
  width: 100%;
  max-width: 1170px;
  margin-left: auto;
  overflow: hidden;
}

.slider {
  width: 100% !important;
  display: flex;
}

.item {
  display: inline-table;
  width: 280px;
  height: 325px;
  margin: 0.5em;
  border: 1px solid #ccc;
}

a {
  color: #8563CF;
  text-decoration: none;
  font-weight: 100;
}

.thumbnail {
  height: 150px;
  position: relative;
}

.thumbnail img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: 50% 15%;
}

img {
  border: 0;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

.p1em {
  padding: 1em;
}




  
  
  
    
      
        
          
            
          
          
            
              Prueba 1
            
            
              
            
            
              
                
                $40.130,00
              
            
          
        
      
      
        
          
            
          
          
            
              Curso de PHP 8 básico, intermedio y, avanzado. 
            
            
              Acaded
            
            
              
            
          
        
      
      
        
          
            
          
          
            
              Spectric
            
            
              Spectric

How to create right and left buttons to move product carousel in jQuery?

1 Answers