Home
JavaScript
tutoriels

Créer un onglets de curseur déplaçables en HTML CSS et JavaScript

curseur

Vous auriez vu les onglets coulissants déplaçables sur YouTube qui filtrent les vidéos en fonction de l'intérêt de l'utilisateur ou sur des sites web. Si vous êtes curieux de savoir comment le créer avec du JavaScript, vous pouvez continuer à lire ce blog.
Dans ce blog, vous apprendrez à créer des onglets de curseur déplaçables comme YouTube en HTML CSS et JavaScript. Ce curseur peut être un composant d'interface utilisateur utile pour les vidéos, les images et les sites de blog qui doivent filtrer le contenu en fonction des intérêts des utilisateurs.

Dans ce curseur, les utilisateurs peuvent faire glisser les onglets en faisant glisser ou en utilisant les icônes précédent et suivant.

Codes Sources

Code HTML

Tout d'abord, collez les codes suivants dans votre fichier index.html 
 
<!DOCTYPE html>
<!-- Coding Team -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Draggable Slider Tabs | Coding</title>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Font Awesome CDN Link for Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
    <script src="script.js" defer></script>
  </head>
  <body>
    <div class="wrapper">
      <div class="icon"><i id="left" class="fa-solid fa-angle-left"></i></div>
      <ul class="tabs-box">
        <li class="tab">Coding</li>
        <li class="tab active">JavaScript</li>
        <li class="tab">Podcasts</li>
        <li class="tab">Databases</li>
        <li class="tab">Web Development</li>
        <li class="tab">Unboxing</li>
        <li class="tab">History</li>
        <li class="tab">Programming</li>
        <li class="tab">Gadgets</li>
        <li class="tab">Algorithms</li>
        <li class="tab">Comedy</li>
        <li class="tab">Gaming</li>
        <li class="tab">Share Market</li>
        <li class="tab">Smartphones</li>
        <li class="tab">Data Structure</li>
      </ul>
      <div class="icon"><i id="right" class="fa-solid fa-angle-right"></i></div>
    </div>

  </body>
</html>

Code CSS

Deuxièmement, collez les codes suivants dans votre fichier style.css 
 
/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body {
  display: flex;
  padding: 0 10px;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #5372F0;
}
.wrapper {
  padding: 35px;
  position: relative;
  overflow-x: hidden;
  max-width: 1000px;
  background: #fff;
  border-radius: 13px;
}
.wrapper .icon {
  position: absolute;
  top: 0;
  height: 100%;
  width: 120px;
  display: flex;
  align-items: center;
}
.icon:first-child {
  left: 0;
  display: none;
  background: linear-gradient(90deg, #fff 70%, transparent);
}
.icon:last-child {
  right: 0;
  justify-content: flex-end;
  background: linear-gradient(-90deg, #fff 70%, transparent);
}
.icon i {
  width: 55px;
  height: 55px;
  cursor: pointer;
  font-size: 1.2rem;
  text-align: center;
  line-height: 55px;
  border-radius: 50%;
}
.icon i:hover {
  background: #efedfb;
}
.icon:first-child i {
  margin-left: 15px;
} 
.icon:last-child i {
  margin-right: 15px;
} 
.wrapper .tabs-box {
  display: flex;
  gap: 12px;
  list-style: none;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
.tabs-box.dragging {
  scroll-behavior: auto;
  cursor: grab;
}
.tabs-box .tab {
  cursor: pointer;
  font-size: 1.18rem;
  white-space: nowrap;
  background: #f5f4fd;
  padding: 13px 20px;
  border-radius: 30px;
  border: 1px solid #d8d5f2;
}
.tabs-box .tab:hover{
  background: #efedfb;
}
.tabs-box.dragging .tab {
  user-select: none;
  pointer-events: none;
}
.tabs-box .tab.active{
  color: #fff;
  background: #5372F0;
  border-color: transparent;
}

Code JavaScript

Enfin, collez les codes suivants dans votre fichier script.js. Si vous ne comprenez pas les codes JavaScript, je vous recommande fortement de regarder la vidéo YouTube ci-dessus pour comprendre quelle ligne fait quoi. 
 
const tabsBox = document.querySelector(".tabs-box"),
allTabs = tabsBox.querySelectorAll(".tab"),
arrowIcons = document.querySelectorAll(".icon i");

let isDragging = false;

const handleIcons = (scrollVal) => {
    let maxScrollableWidth = tabsBox.scrollWidth - tabsBox.clientWidth;
    arrowIcons[0].parentElement.style.display = scrollVal <= 0 ? "none" : "flex";
    arrowIcons[1].parentElement.style.display = maxScrollableWidth - scrollVal <= 1 ? "none" : "flex";
}

arrowIcons.forEach(icon => {
    icon.addEventListener("click", () => {
        // if clicked icon is left, reduce 350 from tabsBox scrollLeft else add
        let scrollWidth = tabsBox.scrollLeft += icon.id === "left" ? -340 : 340;
        handleIcons(scrollWidth);
    });
});

allTabs.forEach(tab => {
    tab.addEventListener("click", () => {
        tabsBox.querySelector(".active").classList.remove("active");
        tab.classList.add("active");
    });
});

const dragging = (e) => {
    if(!isDragging) return;
    tabsBox.classList.add("dragging");
    tabsBox.scrollLeft -= e.movementX;
    handleIcons(tabsBox.scrollLeft)
}

const dragStop = () => {
    isDragging = false;
    tabsBox.classList.remove("dragging");
}

tabsBox.addEventListener("mousedown", () => isDragging = true);
tabsBox.addEventListener("mousemove", dragging);
document.addEventListener("mouseup", dragStop);
C'est tout, maintenant vous avez créé avec succès des onglets de curseur déplaçables comme YouTube en HTML CSS et JavaScript. Si votre code ne fonctionne pas ou si vous avez rencontré des problèmes, vous pouvez commenter le poste+

Commentaires

  • A+
  • A-