Product Cart Slider - HTML CSS and JS

A shopping cart is the most important component of an eCommerce website. It stores all basic information related to products that customers added to their buying list. An ideal shopping cart comes with all basic features including adding, removing products, calculating price, and locally storing cart information for non-logged users. This hand-picked collection of JavaScript shopping cart projects helps you to quickly find out the best frontend “add to cart” functionality for your website.

A Product Cart Slider in JavaScript is a script that allows users to navigate through a product cart using a sliding animation. The script typically retrieves the product information from a data source (such as an API or a JSON file) and uses JavaScript to dynamically slide through the products based on user interactions. The script can be implemented using JavaScript's built-in functions such as setInterval() and clearInterval() to create the sliding animation, and event listeners (e.g. on arrow click or dot click) to handle user interactions.

The script generally includes the following elements:

Variables to store the product data and the current slide index
Event handlers (e.g. on arrow click or dot click) to update the current slide index and call the sliding function
A function to slide through the products based on the current slide index and update the product cart on the page
Elements (e.g. arrows or dots) for the user to navigate through the products
The ability to slide through the products automatically by using setInterval() function
The ability to stop the sliding on hover and resume on leaving.

In addition, the script should be able to handle dynamic data changes, such as adding or removing products from the cart, without breaking the sliding functionality. It can also have a responsive design, that means it should adjust itself according to the screen size. It can also have the option to show the products in a grid view and also a list view. In summary, a Product Cart Slider in JavaScript provides a visually appealing and interactive way for users to navigate through a product cart, and it can be easily integrated into e-commerce websites, online shops, and other web applications where a product cart is required.

Source Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Product Cart</title>
  <link rel="stylesheet" href="css/style.css">
  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

</head>
<body>

  <div class="container">
    <div class="card-left">
      <div class="main-image">
          <img src="images/1.jpg">
          <img src="images/2.jpg">
          <img src="images/3.jpg">
          <img src="images/4.jpg">
      </div>
      <div class="img-select">
        <div class="img active">
          <a href="#" data-id="1"><img src="images/1.jpg"></a>
        </div>
        <div class="img">
          <a href="#" data-id="2"><img src="images/2.jpg"></a>
        </div>
        <div class="img">
          <a href="#" data-id="3"><img src="images/3.jpg"></a>
        </div>
        <div class="img">
          <a href="#" data-id="4"><img src="images/4.jpg"></a>
        </div> 
      </div>
    </div>
    <div class="card-right">
        <h2>Canon EOS 1500D</h2>
        <div class="star">
         <div class="star-group">
          <ion-icon name="star"></ion-icon>
          <ion-icon name="star"></ion-icon>
          <ion-icon name="star"></ion-icon>
          <ion-icon name="star"></ion-icon>
          <ion-icon name="star"></ion-icon>
         </div>
         <span>3 Reviews</span>
        </div>
        <h4>$39.00   <span> $50.00</span></h4>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum suscipit, omnis quis, esse tenetur eligendi est quibusdam enim in temporibus sint architecto facere numquam voluptas. Enim porro dolorum odio labore!</p>

        <div class="form">
          <div class="form-group">
            <label>Color</label>
            <select>
                <option>Black</option>
            </select>
          </div>
          <div class="form-group">
            <label>Qty</label>
            <div class="input-group">
              <button class="minus">-</button>
              <input type="text" value="1" id="qty">
              <button class="plus">+</button>
            </div>
          </div>
        </div>

        <button class="btn-cart">Add Cart</button>

    </div>
  </div>
  
  <script src="js/script.js"></script>
</body>
</html>

css/style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');


*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;

}

body{
  width: 100vw;
  height: 100vh;
  background-color: #efeff0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container{
  width: 1100px;
  height: 450px;
  background-color: #fff;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 10px;
  gap: 10px;
}

img{
  width: 100%;
  display: block;
}

.card-left{
  width: 600px;
  overflow: hidden;
}

.main-image{
  display: flex;
transition: all 0.5s ease;
}
.img-select{
  display: flex;
  margin-top: 2px;
}
.img{
  border:2px solid white;
}
.active{
  border-color:black;

}

.card-right{
  padding: 10px;
}

.card-right h2{
  font-weight: 400;

}

.star{
  display: flex;
  gap:20px;
  cursor: pointer;
}
.star-group ion-icon{
  color:rgba(0,0,0,0.3)
}
.star-group ion-icon:nth-child(1),
.star-group ion-icon:nth-child(2),
.star-group ion-icon:nth-child(3)
{
color:gold;
}

.card-right h4{
  margin-top: 20px;
  font-size: 18px;
  font-weight: 500;
}

.card-right h4 span{
  text-decoration: line-through;
  color:rgba(0,0,0,0.2);
  font-size:15px;
  padding-left: 15px;
}

.card-right p{
  margin: 15px 0;
  color:rgba(0,0,0,0.5);
  padding:10px 0 ;
}

.form{
  display: flex;
  justify-content: space-between;
  width: 400px;
  margin-bottom: 20px;
}

.form-group label,
.form-group select
{
display: block;
}

.form-group select{
  width: 150px;
  height: 30px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.input-group{
display:flex;
width: 220px;
height: 30px;
}
.input-group input{
  width: 50px;
  border: 1px solid #ccc;
  outline: none;
  padding-left:20px ;
  font-size: 18px;
}
.input-group button{
  width: 30px;
  outline: none;
  border: none;
  background-color: #111;
  color:white;
}

.btn-cart{
  width: 150px;
  height: 40px;
  border: none;
  outline: none;
  color:white;
  background-color: #FF8401;
  font-size: 16px;
}

This script is for a product image slider and quantity selector.

The script starts by fetching all the necessary elements from the HTML page, such as the product images, the main image div, and the plus and minus buttons for the quantity selector.

The script then adds event listeners to each product image, so that when an image is clicked, the script updates the current image ID and sets the active class to the clicked image. The active class is used to indicate which image is currently selected and it is used for styling purposes. The moveImage() function is called when an image is clicked, this function calculates the width of the image and also the number of images that need to be moved, it then translate the main image div according to that.

The script also adds event listeners to the plus and minus buttons, so that when a button is clicked, the script updates the quantity value accordingly. The minus button decreases the value by 1 and the plus button increases the value by 1, but the value can't be less than 0 or greater than 5.

Overall, this script allows users to navigate through different product images and also allows the user to select the quantity of the product. This script can be used in e-commerce websites, online shops, and other web applications where a product image slider and quantity selector is required.

js/script.js

const imgs=document.querySelectorAll('.img a');
let imgId=1;

const imgDiv=document.querySelectorAll('.img');

imgs.forEach((img)=>{
  img.addEventListener('click',(e)=>{
    e.preventDefault();
    imgId=img.dataset.id;

    imgDiv.forEach((img)=>{
      img.classList.remove('active');
    });

    img.parentElement.classList.add('active');

    moveImage();
  });
});




function moveImage()
{
  const imgWidth=document.querySelector('.main-image img:first-child').clientWidth;
  let width=(imgId-1)*imgWidth;
document.querySelector('.main-image').style.transform=`translateX(${-width}px)`;

}

const minusBtn=document.querySelector('.minus');
const plusBtn=document.querySelector('.plus');
const qtyTxt=document.querySelector('#qty');

minusBtn.addEventListener('click',()=>{
    let qty= parseInt(qtyTxt.value);
    if(qty>0){
      qty--;
      qtyTxt.value=qty;
    }
});

plusBtn.addEventListener('click',()=>{
  let qty= parseInt(qtyTxt.value);
  if(qty>=0 && qty<5){
    qty++;
    qtyTxt.value=qty;
  }
});

Output

Live Preview