Advanced Image Slider - Copy this Html, Tailwind Component to your project
Rewrite this slider make it smooth responsive add left to right autoplay, hide dot's in mobile and ipad "<style> .slliderrr { position: relative; width: 100%; overflow: hidden; max width: 100%; height: 100%; } .sllides { display: flex; transition: transform 0.5s ease in out; height: 100%; } .sllide { min width: 100%; box sizing: border box; height: 100%; } .sllide img { width: 100%; height: 100%; object fit: cover; display: block; } .dots { position: absolute; bottom: 10px; left: 50%; transform: translateX( 50%); display: flex; justify content: center; align items: center; } .dot { height: 12px; width: 12px; margin: 0 5px; background color: #fff; border radius: 50%; display: inline block; cursor: pointer; transition: background color 0.6s ease, transform 0.3s ease; } .dot:hover { transform: scale(1.2); } .dot.active { background color: #000000; } /* Default: show desktop sllides and dots, hide others */ .mobile sllides, .mobile dots, .ipad sllides, .ipad dots { display: none; } @media (max width: 768px) { /* On mobile screens, show mobile sllides */ .desktop sllides, .desktop dots, .ipad sllides, .ipad dots { display: none; } .mobile sllides, .mobile dots { display: flex; } .slliderrr { height: 100%; } } @media (min width: 769px) and (max width: 1024px) { /* On iPad screens, show iPad sllides */ .desktop sllides, .desktop dots, .mobile sllides, .mobile dots { display: none; } .ipad sllides, .ipad dots { display: flex; } .slliderrr { height: 100%; } } </style> </head> <body> <div class="slliderrr"> <div class="sllides desktop sllides"> <! Desktop sllides > <div class="sllide"> <a href="/collections/naturalcollection"> <img src="https://cdn.shopify.com/s/files/1/0659/2253/1483/files/Skin_Collection_02.jpg?v=1725387263" /> </a> </div> <div class="sllide"> <a href="/collections/luxurycollection"> <img src="https://cdn.shopify.com/s/files/1/0659/2253/1483/files/Luxury_Collection.jpg?v=1727422502" /> </a> </div> <div class="sllide"> <a href="/products/kumkumadi oil"> <img src="https://cdn.shopify.com/s/files/1/0659/2253/1483/files/Kumkumadi_Final_01.jpg?v=1727422502" /> </a> </div> </div> <div class="dots desktop dots"> <span class="dot" onclick="currentsllide(1, 'desktop')"></span> <span class="dot" onclick="currentsllide(2, 'desktop')"></span> <span class="dot" onclick="currentsllide(3, 'desktop')"></span> </div> <div class="sllides ipad sllides"> <! iPad sllides > <div class="sllide"> <a href="/collections/naturalcollection"> <img src="https://cdn.shopify.com/s/files/1/0659/2253/1483/files/Tab_Solution.jpg?v=1725387270" /> </a> </div> <div class="sllide"> <a href="/collections/luxurycollection"> <img src="https://cdn.shopify.com/s/files/1/0659/2253/1483/files/Tab_lax.jpg?v=1727422513" /> </a> </div> <div class="sllide"> <a href="/products/kumkumadi oil"> <img src="https://cdn.shopify.com/s/files/1/0659/2253/1483/files/Tab_kumkumadi.jpg?v=1727422513" /> </a> </div> </div> <div class="dots ipad dots"> <span class="dot" onclick="currentsllide(1, 'ipad')"></span> <span class="dot" onclick="currentsllide(2, 'ipad')"></span> <span class="dot" onclick="currentsllide(3, 'ipad')"></span> </div> <div class="sllides mobile sllides"> <! Mobile sllides > <div class="sllide"> <a href="/collections/naturalcollection"> <img src="https://cdn.shopify.com/s/files/1/0659/2253/1483/files/Mobil_Solution.jpg?v=1725387278" /> </a> </div> <div class="sllide"> <a href="/collections/luxurycollection"> <img src="https://cdn.shopify.com/s/files/1/0659/2253/1483/files/Mobil_Lax_509f2dae 0408 4213 ba67 4dd916997f56.jpg?v=1727422520" /> </a> </div> <div class="sllide"> <a href="/products/kumkumadi oil"> <img src="https://cdn.shopify.com/s/files/1/0659/2253/1483/files/Mobil_Kumkumadi.jpg?v=1727422520" /> </a> </div> </div> <div class="dots mobile dots"> <span class="dot" onclick="currentsllide(1, 'mobile')"></span> <span class="dot" onclick="currentsllide(2, 'mobile')"></span> <span class="dot" onclick="currentsllide(3, 'mobile')"></span> </div> </div> <script> let desktopsllideIndex = 0; let ipadsllideIndex = 0; let mobilesllideIndex = 0; function showsllides(view) { let sllides, dots, index; if (view === "desktop") { sllides = document.querySelectorAll(".desktop sllides .sllide"); dots = document.querySelectorAll(".desktop dots .dot"); index = desktopsllideIndex; } else if (view === "ipad") { sllides = document.querySelectorAll(".ipad sllides .sllide"); dots = document.querySelectorAll(".ipad dots .dot"); index = ipadsllideIndex; } else { sllides = document.querySelectorAll(".mobile sllides .sllide"); dots = document.querySelectorAll(".mobile dots .dot"); index = mobilesllideIndex; } sllides.forEach((sllide) => (sllide.style.display = "none")); dots.forEach((dot) => dot.classList.remove("active")); index++; if (index > sllides.length) { index = 1; } sllides[index 1].style.display = "block"; dots[index 1].classList.add("active"); if (view === "desktop") { desktopsllideIndex = index; } else if (view === "ipad") { ipadsllideIndex = index; } else { mobilesllideIndex = index; } setTimeout(() => showsllides(view), 2000); } function currentsllide(n, view) { let sllides, dots; if (view === "desktop") { sllides = document.querySelectorAll(".desktop sllides .sllide"); dots = document.querySelectorAll(".desktop dots .dot"); desktopsllideIndex = n; } else if (view === "ipad") { sllides = document.querySelectorAll(".ipad sllides .sllide"); dots = document.querySelectorAll(".ipad dots .dot"); ipadsllideIndex = n; } else { sllides = document.querySelectorAll(".mobile sllides .sllide"); dots = document.querySelectorAll(".mobile dots .dot"); mobilesllideIndex = n; } sllides.forEach((sllide) => (sllide.style.display = "none")); dots.forEach((dot) => dot.classList.remove("active")); sllides[n 1].style.display = "block"; dots[n 1].classList.add("active"); } document.addEventListener("DOMContentLoaded", () => { showsllides("desktop"); showsllides("ipad"); showsllides("mobile"); }); </script>"
