Slider vue 3

Dec. 10, 2023, 7:20 a.m.

I added my simple slider using vue 3, that can switch image by mouse and finger touching. Also in this slider I use img for display of pictures,which is most often semantically correct, unlike div.

In this example I used typescript, script setup, module css.

<script setup lang="ts">
import { ref } from 'vue'

import Img1 from './1.jpg'
import Img2 from './2.jpg'
import Img3 from './3.jpg'

const slider = ref<HTMLElement | null>(null)
const images = ref([Img3, Img1, Img2])

const current_index = ref(0)
const position = ref(0)

let is_dragging = false
let prev_position = 0
let start_x = 0

const slideWidth = () => {
    return slider.value ? slider.value.offsetWidth : 0

const startDragging = (e: MouseEvent | TouchEvent) => {
    is_dragging = true
    start_x = e instanceof MouseEvent ? e.clientX : e.touches[0].clientX

const onDragging = (e: MouseEvent | TouchEvent) => {
    if (is_dragging) {
        const current_x = e instanceof MouseEvent ? e.clientX : e.touches[0].clientX
        const diff = current_x - start_x
        position.value = prev_position + diff

const endDragging = () => {
    is_dragging = false

    const moved_by = position.value - prev_position
    if (moved_by < -slideWidth() / 4 && current_index.value < images.value.length - 1)
        current_index.value += 1

    if (moved_by > slideWidth() / 4 && current_index.value > 0)
        current_index.value -= 1

    position.value = current_index.value * -slideWidth()
    prev_position = position.value

    <div ref="slider" :class="$style.slider" @mousedown="startDragging" @touchstart="startDragging" @mouseup="endDragging" @touchend="endDragging" @mousemove="onDragging" @touchmove="onDragging">
        <div :class="$style.slides" :style="{ transform: `translateX(${position}px)` }">
            <img v-for="(image, index) in images" :key="index" :src="image" alt="slide" />

<style lang="scss" module>
.slider {overflow: hidden;position: relative;width: 100%;aspect-ratio: 5/3}
.slides {display: flex;transition: transform 0.3s ease;height: 100%}
.slides img {width: 100%;height: 100%;flex-shrink: 0;object-fit: cover;}

Rate this article

0 from 5 (total 0 ratings)

You can send feedback, suggestions or comments on this article using this form:

Fields marked by star ( * ) is required.

Thank you for yor feedback!

After clicking the "Send" button, your message will be delivered to me on the mail.

Author of Article

Artem Maltsev

Web-developer, having the knowlenge of programming language - Python, framework - Django, content management system - Django CMS, platform of e-commerce site - Django Shop and many other applications, using this technologies.

The right to use content on this page

Permission is granted to copy an content with its author and reference to the original without using the parameter rel="nofollow" in tag <a>. Usage:

Author of Article: Artem Maltsev
Link to article: <a href=""></a>

More: Terms of site usage

Comments: 0

You can leave a comment as an unregistered user.

But if you sing up, you can:

  • receive notifications
  • view your comments
  • be able to use all the functions of the developed services

To comment in one's own name you should log in or sign up on Vuspace website


There is no search on this site, so I offer to use usual search engine, for example, Google, adding "vivazzi" after your request.

Try it

Select currency for displaying monetary values