Swiper JS Autoplay Slider: No Pauses, No Clicks, Just Smooth Scrolling | Marquee Effect | HTML CSS

Опубликовано: 19 Май 2026
на канале: Ecem Gokdogan

10,376

143

This tutorial demonstrates how to create a Swiper JS slider with smooth autoplay (marquee effect) using HTML, CSS, and JavaScript. The project shows how to set up a continuous image slider with no pauses by using the Swiper library's autoplay feature and customizing the speed and behavior of the slider. It also includes a solution to prevent the slider from stopping when clicked by using the "pointer-events: none" CSS property. This video is ideal for implementing smooth, responsive sliders in their websites or applications.

🏞️ The images used in this project are designed by Freepik: https://www.freepik.com

⭐Lists:
Swiper JS:    • Swiper JS
GSAP:    • GSAP
Slider with Vanilla Javascript & CSS:    • Slider with Vanilla Javascript & CSS
Background Animation:    • Background Animation
CSS Hover Effect:    • CSS Hover Effect

👩‍💻 My Social Profiles:
X: https://x.com/ecemgo
Codepen: https://codepen.io/ecemgo
GitHub: https://github.com/ecemgo
TikTok:   / ecemgo

🕔 Timestamps:
0:00 – Intro
0:29 – HTML
1:16 – CSS
3:15 – Swiper JS
3:36 – Prevent clicking on the slider