Premium Responsive Product Slider with Wishlist & Cart Animation source code

Step 1: Copy the Source Code

Copy the complete HTML file into your project.

Example:

premium-product-slider.html

The package includes:

• HTML Structure
• CSS Styling
• JavaScript Functionality
• Responsive Layout
• Product Cards
• Wishlist System
• Add To Cart Animation
• Dynamic Cart Counter

Step 2: Open in Browser

Simply open the file in any modern browser.

Supported Browsers:

• Google Chrome
• Microsoft Edge
• Mozilla Firefox
• Safari
• Opera

No installation required.

Step 3: Update Product Information

Locate a product card:

<div class="product-card">

Replace:

• Product Name
• Product Category
• Product Price
• Product Image
• Product Rating
• Product Badge

Example:

<h3 class="product-name">Samsung Galaxy S25 Ultra</h3>

<p class="product-category">Smartphone</p>

<span class="price">$1299.00</span>

Step 4: Change Product Images

Find:

<img src="image-url.jpg" class="product-img">

Replace with your own image URL.

Example:

<img src="images/product-1.jpg" class="product-img">

Recommended Size:

800 × 800 px

Step 5: Add More Products

Duplicate any product card block:

<div class="product-card">
...
</div>

Paste it below existing cards.

The slider automatically handles additional products.

Step 6: Customize Hero Heading

Locate:

<h1 class="main-title">
Premium Finds
</h1>

Change it to:

<h1 class="main-title">
Featured Products
</h1>

You can also update:

EXCLUSIVE
SMOOTH & RESPONSIVE UI

with your own branding.

Step 7: Change Slider Starting Product

Find:

let currentIndex = 2;

Values:

0 = First Product
1 = Second Product
2 = Third Product
3 = Fourth Product

Example:

let currentIndex = 0;

Starts slider from first product.

Step 8: Customize Cart Currency

Locate:

cartTotal.innerText =
`$${total.toLocaleString()}`

Change:

$

to:

₹
€
£
AED

Example:

₹${total.toLocaleString()}

Step 9: Connect Real Shopping Cart

Currently the demo updates only a visual cart.

Find:

function addToCart(btn, price)

Add your backend/API code:

addProductToCart(productId);

Example:

fetch('/cart/add', {
method: 'POST'
});

Step 10: Customize Wishlist Feature

Wishlist uses:

<i class="far fa-heart heart-icon">

You can connect it with your database:

saveWishlist(productId);

or

removeWishlist(productId);

Step 11: Customize Colors

Main colors are defined in:

#ec4899
#8b5cf6
#3b82f6

Replace with your brand colors.

Example:

#10b981
#059669
#34d399

for a green theme.

Step 12: Mobile Optimization

The slider already includes:

✅ Touch Swipe

✅ Responsive Cards

✅ Adaptive Layout

✅ Mobile Friendly Controls

✅ Optimized Spacing

No additional mobile setup is required.

Features Included

✅ Fully Responsive Design

✅ Active Center Card Highlight

✅ Premium Glassmorphism UI

✅ Wishlist Animation

✅ Dynamic Cart Counter

✅ Flying Product To Cart Animation

✅ Touch Swipe Support

✅ Pagination Dots

✅ Previous / Next Controls

✅ Responsive Product Cards

✅ Dynamic Price Calculation

✅ Modern Gradient Effects

✅ Smooth Transitions

✅ Pure HTML CSS JavaScript

Perfect For

• E-Commerce Websites
• Shopify Stores
• WooCommerce Stores
• Product Landing Pages
• Fashion Stores
• Electronics Stores
• Gadget Stores
• Startup Websites
• SaaS Product Showcases
• Affiliate Marketing Websites