DEV Community: Frontend Solutions

How To Create Draggable slider in HTML, CSS and Javascript 🔥💯

Frontend Solutions — Tue, 27 Jun 2023 07:32:15 +0000

original article on Frontend Solutions : How To Create Draggable Slider In HTML, CSS and JavaScript 🔥💯

Have you ever come across a draggable slider on websites like YouTube and wondered how to implement it on your own website? Look no further! In this tutorial, we will walk you through the process of creating a draggable slider using HTML, CSS, and JavaScript.

The draggable slider allows users to slide through different components by either dragging them with the mouse or using the previous and next buttons positioned on the left and right sides of the slider.

To begin, we will use HTML to structure the basic elements of our slider. This will include a container element to hold the slider tabs and the previous and next buttons. Inside the container, we will create individual tabs as separate elements.

Here's the HTML code structure for our draggable slider: ⬇

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <title>Draggable slider tab || Frontend Solutions</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- FontAwesome CDN Link -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
    />
  </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">Programming</li>
        <li class="tab active">HTML</li>
        <li class="tab">CSS</li>
        <li class="tab">Python</li>
        <li class="tab">Frontend Development</li>
        <li class="tab">Javascript</li>
        <li class="tab">C++</li>
        <li class="tab">C Language</li>
        <li class="tab">Java</li>
        <li class="tab">Coding</li>
        <li class="tab">PHP</li>
        <li class="tab">Study</li>
        <li class="tab">Computer Science</li>
        <li class="tab">Google</li>
        <li class="tab">AI</li>
      </ul>
      <div class="icon"><i id="right" class="fa-solid fa-angle-right"></i></div>
    </div>
  </body>
</html>

Next, we will apply CSS styles to enhance the appearance of our slider. We can customize the appearance of the tabs, buttons, and container to match the design requirements of your website. CSS will allow us to create a visually appealing and user-friendly slider.

Here’s the CSS code structure for our draggable slider: ⬇

/* import poppins font from google fonts */
@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: #e3d5ca;
}
.wrapper {
  padding: 35px;
  position: relative;
  overflow-x: hidden;
  max-width: 1000px;
  background: #fffdf0;
  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, #fffdf0 70%, transparent);
}
.icon:last-child {
  right: 0;
  justify-content: flex-end;
  background: linear-gradient(-90deg, #fffdf0 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: #e76f51;
  border-color: transparent;
}

Now comes the exciting part: implementing the functionality of the draggable slider using JavaScript. We will use JavaScript to enable the dragging feature, allowing users to slide the tabs to the right or left. By capturing the mouse events and calculating the position of the tabs, we can create a smooth and interactive sliding experience.

To further enhance the user experience, we will also add event listeners to the previous and next buttons. These listeners will trigger the sliding animation when the buttons are clicked, providing an alternative navigation method for users.

Here’s the JavaScript code: ⬇

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)

If you're eager to see the end result in action, you can check out a live demo of this slider on Frontend Solutions : How To Create Draggable Slider In HTML, CSS and JavaScript 🔥💯

By following this tutorial, you will have all the knowledge necessary to create your own draggable slider using HTML, CSS, and JavaScript. With some creativity and customization, you can integrate this slider into your website, providing a dynamic and engaging user experience.

Congratulations 🎉🎉, you have successfully created the draggable slider ✨🎉🎉✨

Awesome CSS Text Animations

Frontend Solutions — Thu, 22 Jun 2023 08:13:57 +0000

Collection of HTML and CSS Text Animation examples. Hand-Picked from codepe.io. The collection is free.

original article on Frontend Solutions : 22 Awesome CSS Text Animations

1.Pure CSS Text Animation

Made with: HTML / CSS (SCSS)

Created by Robin Treur, Created At September 10, 2016

Responsive : yes

Dependencies : -

Compatible browsers : Chrome, Edge, Firefox, Opera, Safari

DEV Community: Frontend Solutions

How To Create Draggable slider in HTML, CSS and Javascript 🔥💯

Awesome CSS Text Animations

1.Pure CSS Text Animation

2. Splitting Splash | Bouncy CSS Text Animation

3. SVG - CSS Text Animation

4. Transmission: Glowing Text Animation

5. Hand written SVG text animation

6. Text Animation

7. Shining Text Animation Effect

8. Title Text Animation

9. Text animation

10. Decode Text Effect

11. Text animation

12. SVG Text Animation

13. Loading Text Animation

14. ✈️ Airport info

15. Pure CSS Gradient Text Animation

16. happy new year

17. Pure CSS Text Animation

18. Text Animation

19. Welcome Text animaiton

thanks for reading.

17 HTML and CSS 404 Page Templates

1. Space 404

2. Space 404

3. 404 Page

4. GSAP 404 typed message using SplitText

5. 404 Error Page

6. Bubbley 404

7. 404 Error Page

8. 404 Makes bear sad 🐻😭

9. 404 Page

10. Illustration for 404 Page

11. 404 page

12. 404 error page

13. CSS 404 page

14. 404 page

15. Neon 404 Page Not Found

16. BSOD 404 Page

17. 404 paozinho

thanks for reading.

6 JavaScript File Uploaders

1. File Upload & Image Preview

2. File Upload

3. Images Uploader (Drag & Browse)

4. File Uploader With Animation

5. Drag And Drop File Upload

6. Responsive Animated File Uploader

13 CSS Blog Cards

1. Blog Card Design

2. Blog card

3. Blog Card Slider

4. Blog Card Transparent Text Animation

5. Blog Card Design

6. Blog Card (Sass & Pug)

7. Blog Posts Card Layout

8. Blog Post

9. CSS Card

10. Card CSS

11. Responsive Css Card

12. CSS Blog Card

13. CSS Filter Cards