I experience a weird behaviour when the amount of slides are the same as the itemsToShow. When having 3 slides only 2 of them appears, 3rd is hidden. (Example)

Hi,
I need to disable navigation button in case

curruntSlide 0 >> disabled prev button
curruntSlide last >> disabled next button

Thank you.

Is your feature request related to a problem? Please describe.
The carousel is great but I can't access the current slide number, neither in get or set.

Describe the solution you'd like
I'd like, for example, to access the current slide number like this:
<carousel v-model="activeSlide">

And in my parent component I want to be able to GET this "activeSlide" and SET it if I want.

Describe alternatives you've considered
An alternative, for the moment, is to put a child component in the slide, and when I click on this component it updates a parent prop.

Additional context
None

Describe the bug
When the carousel is inside a component with a flex display, you can't navigate through slides properly.

To Reproduce
Put the carousel in a div:

        <div id="diaporama">
          <carousel :items-to-show="1">
              ...

Set the CSS of the div:

#diaporama {
  display: flex;
  align-items: center;
}

Expected behavior
I expect the carousel to be vertically aligned inside the div and the navigation to display the slides completely.

Screenshots
https://ibb.co/vPMHtbv
https://ibb.co/PFShFZh
https://ibb.co/zrKDFQw

Desktop (please complete the following information):

• OS: Ubuntu 20.04
• Browser: Chrome
• Version: 87.0.4280.66

how to make the carousel auto slide?

When I have :wrapAround="true" set on the carousel element, wrapAround works fine. However, I want to only have pagination (and therefore wrapAround) on smaller page sizes. If you have wrapAround on the carousel element, the slides appear out of order on large screen sizes. However, if you supply wrapAround: true in the breakpoints object, it breaks entirely.

Codepen here: https://codepen.io/eileengmccall/pen/PopozBp

You'll notice that if you shrink down the screen so the breakpoint activates, the number on the slide jumps to 5 and stays there as soon as you try to paginate.

Any help would be appreciated!

<Carousel :settings="settings" :breakpoints="breakpoints">
  <Slide v-for="slide in 10" :key="slide">
    <div class="carousel__item">{{ slide }}</div>
  </Slide>
  <template #addons>
    <Navigation />
  </template>
</Carousel> 
<script>
  import { defineComponent } from 'vue';
  import { Carousel, Navigation, Slide } from 'vue3-carousel';
  import 'vue3-carousel/dist/carousel.css';
  export default defineComponent({
    name: 'Breakpoints',
    components: {
      Carousel,
      Slide,
      Navigation,
    },
    data: () => ({
      // carousel settings
      settings: {
        itemsToShow: 1,
        wrapAround:true
      },
      breakpoints: {
        700: {
          itemsToShow: 3.5,
        },
        1024: {
          itemsToShow: 5,
        },
      },
    }),
  });
</script>

hi, when use to "wrapAround" not showing slider item. if make resize to screen, its showing.
what sould make

Describe the bug

Not working when sliding twice on in-app-browser(facebook...etc).
but i can use next-button to be next-content.

Smartphone (please complete the following information):

• Device: iPhoneXS
• OS: iOS 14.4
• Browser: Facebook in-app-browser

WrapAround not working properly when using 2 carousels on the same page, One always resets when clicking on next/previous.

Hello,
I can't use the framework in a vue 3 typescript project.
What can I do about it?

TS7016: Could not find a declaration file for module 'vue3-carousel'. 'C:/Users/Jannik/PhpstormProjects/backify-landing/node_modules/vue3-carousel/dist/carousel.js' implicitly has an 'any' type.
Try npm install @types/vue3-carousel if it exists or add a new declaration (.d.ts) file containing declare module 'vue3-carousel';

Carousel slide goes forward (translateX: -308px) by click carousel__prev. This bug appears if you have 2 slides in your Carousel with wrapAround="true".

Describe the bug
If you have a button to click on into a slide, the mobile will treat the click as a drag and it does nothing when you click on it.

To Reproduce
Steps to reproduce the behavior:

1. Add a tag inside of a carousel slide
2. Click on it on mobile (Chrome's inspect element with toggle device toolbar on works also)
3. Nothing happens

Expected behavior
The click event is treated differently than the drag event and the button does what was meant to do.

Hi. I'm new in using component plugin like these. I'm trying to applied your component in my project and it working. But I'm wondering if I can customizing the style of pagination button. If it possible, can you guide me how?

Is your feature request related to a problem? Please describe.
Problem: When trying to install vue-carousel in a Nuxt project, it can't resolve the dependency tree since Nuxt still is based on Vue2:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! Found: [email protected]
npm ERR! node_modules/vue

Describe the solution you'd like
Nuxt doesn't support Vue3 yet, but it does provide a Composition API package via @nuxtjs/composition-api. Is there any way we can make it work? Thank you.

Is your feature request related to a problem? Please describe.
Not related to a problem. Just trying to best understand functionality

Describe the solution you'd like
On the first slide, I'd like to hide the left arrow and on the last slide I'd like to hide the right arrow.

Describe alternatives you've considered
Using v-if="currentSlide > 0" on the #prev template, doesn't update when current slide changes.

Same with v-if="currentSlide == slidesCount"

Additional context
Let me know if this is even possible.

Can you tell where you are at with this TODO?

Can I help implementing it?

Bind current slide to the v-model

Originally posted by @antssanjeewa in #32 (comment)

Is there any possibility to add something like:
<carousel :enableTouch="false">

Much appreciated!

reactivity.esm-bundler.js?a1e9:722 Uncaught RangeError: Maximum call stack size exceeded
slideTo @ carousel.es.js?0b81:252
slideTo @ carousel.es.js?0b81:252
slideTo @ carousel.es.js?0b81:252
slideTo @ carousel.es.js?0b81:252
slideTo @ carousel.es.js?0b81:252
slideTo @ carousel.es.js?0b81:252
slideTo @ carousel.es.js?0b81:252
slideTo @ carousel.es.js?0b81:252
slideTo @ carousel.es.js?0b81:252

Describe the bug
When addon Pagination is included it does not reflect breakpoints.
So it shows more page fields then there are itemsToShow.

Can you enable way to increase pooling rate of touch/mouse dragging? It's very laggy.
It's because mouseevents you are using are laggy, better use interval polling for it

Try to slide mouse left right fast in this
https://codepen.io/ismail9k/pen/BaLYeMa
and any of slides here
https://splidejs.com/

@ismail9k Still exits the problem with dynamic data. When you remove an instance, the changes is not appearing immediately. You should refresh the page. Even a bad solution with forceUpdate doesn't work

Originally posted by @slobodadev in #37 (comment)

Describe the bug
When another component is used inside slide it is not compiled and is treated like a unknown tag

To Reproduce
https://codesandbox.io/s/practical-morning-96bng?file=/src/components/MyCarousel.vue

Expected behavior
Requested Component is rendered inside the slide

My project setup like below:

• Vue router

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  { path: '/', name: 'Home', component: Home },
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

• App.vue

<template>
  <router-view />
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import Home from './views/Home.vue'

export default defineComponent({
  name: 'App',
  components: {
    Home
  }
})
</script>

• Carousel.vue same as document example

• Home.vue

<template>
  <Carousel />
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import Footer from './components/Carousel.vue'

export default defineComponent({
  components: {
    Carousel,
  }
})
</script>

Everything work fine if I put carousel example in home.vue, but when I import it from another components, I hit the issues.

  "dependencies": {
    "@popperjs/core": "^2.9.1",
    "bootstrap": "^5.0.0-beta3",
    "vue": "^3.0.5",
    "vue-router": "^4.0.5",
    "vue3-carousel": "^0.1.13"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.1.5",
    "@vue/compiler-sfc": "^3.0.5",
    "sass": "^1.32.8",
    "typescript": "^4.1.3",
    "vite": "^2.1.3",
    "vue-tsc": "^0.0.8"
  }

Custom Navigation style & custom slide item more than one

No updating props should update the current configs, I will open a bug issue for this

Originally posted by @ismail9k in #32 (reply in thread)

I am missing the callback to destory if only one slide, or show no arrows on single slide

Describe the solution you'd like
I wanted to automate this to show no navigation/pagination/drag/slide if only single slide

Describe alternatives you've considered
create callbacks or remove those arrows and drag slide function

Additional context
Thanks you for simple carousel :D

Description
I mobile devices I can not scroll any further when I reach the carousel. Probably the .preventDefault breaks the normal page scrolling if the user starts the touch on the carousel.

To Reproduce
Steps to reproduce the behavior:

1. Go to dev.agapegemeinde.de with a mobile device (iOS+Safari and Android+Firefox tested)
2. Scroll down the page until you reach "Gruppen und Aktionen" try to scroll further down (the carousel will always prevent it)

Expected behavior
A threshold of movement to the side before the scroll down is prevented

Tested on (Smartphone)

• Device: iPhone SE (Safari), Samsung Galaxy S7 (Firefox v.88.1.4)

Describe the bug

When i make manual slides, arrows not working

To Reproduce

It works

    <carousel :items-to-show="1">
          <slide  v-for="slide in 10" :key="slide">
                    {{slide}}
           </slide>
      
      <template #addons>
      <navigation />
        <pagination /> 
      </template>
    </carousel>

It not works

    <carousel :items-to-show="1">
          <slide >
                    <p>1</p>
           </slide>
         <slide >
                    <p>2</p>
           </slide>
      
      <template #addons>
      <navigation />
        <pagination /> 
      </template>
    </carousel>

thanks.

Describe the bug
When using a reactive array to generate the carousel, the slides don't load if the array is empty at the creation of the component. You have to set the array with a value inside.

To Reproduce
In the composition API, create a reactive variable like this:

  setup() {
    const new = reactive({
      title: '',
      attachments: [],
    });

Fetch the news with something like this:

    onMounted(async () => {
      fetchNews(route.params.id);
    });

Although everything is loaded everywhere, the carousel doesn't update, it remains empty.
If you want the carousel to have its slides, you have to set the variable like this:

  setup() {
    const new = reactive({
      title: '',
      attachments: [''],
    });

Expected behavior
The carousel should load its slides even if the array is empty.

Desktop (please complete the following information):

• OS: Ubuntu 20.04
• Browser: Chrome
• Version: 87.0.4280.66

Hello, what's the timeline for the roadmap? I am keenly waiting on the very next checkbox -> being able to style the active/inactive slides to create a coverflow effect etc. I ❤️ the stability/minimalism on this component!

Originally posted by @oneWaveAdrian in #32 (comment)

Data is not updating on tempate when you add/remove instance

<carousel v-if="presentedImages.length" :items-to-show="2" :snapAlign="'start'" :breakpoints="breakpoints" :wrap-around="true">
    <slide class="slide" v-for="image in presentedImages" :key="image.id">
        <img v-if="image.attachment_url" class="videoFile" :src="image.attachment_url" />
        <div  @click="deleteImage(image.id)" class="fa-stack remove-button cross-btn">
          <i class="fa fa-times"></i>
        </div>
    </slide>
    <template #addons>
        <navigation />
    </template>
</carousel>

const { images: presentedImages } = toRefs(props);
const deleteImage = (id) => {
    removeAttachment(id).then(res => {
      presentedImages.value = presentedImages.value.filter(img => {
        return img.id !== id;
      });
    })
    .catch(err => console.log(err))
  }
      

FYI: Ref is updating in script.

Originally posted by @slobodadev in #33

Hi,

I have to say, this is really nice vue 3 carousel. Saved me a lot of time. Good Job!

But I think you have small error in documentation:
In the props table is parameter "initialSlide" and I think it should be "currentSlide".

Is your feature request related to a problem? Please describe.
Please add looping feature.

Describe the solution you'd like
For instance it may be called: loop. And can get true or false values as a boolean.

Describe alternatives you've considered
Slick, Swiper
Additional context
No any other content.

Hi !

It seems like it's not working properly when using the mouse to slide, but it works fine when using the navigation.
Checkout the demo below :)

Thanks

Describe the bug
The carousel is inside a div (flexed).
I have several big images in the carousel, and I put max-height and max-width so that the images fit.

To Reproduce
Insert the carousel like this:

        <div id="diaporama">
          <carousel :items-to-show="1" wrapAround>
            <slide
              v-for="(item, i) in files"
              :key="`carousel-${i}`">
              <div class="diapo">
                {{ item.description }}<br />
                <img
                  :src="`${apiUrl}/files/${item.id}`"/>
              </div>
            </slide>

            <template #addons>
              <navigation />
              <pagination />
            </template>
          </carousel>

        </div>

The relevant CSS is this one:

#diaporama {
  flex: 0 1 90%;
  padding: 0 50px;
  max-height: 100%;
  overflow-y: hidden;
}

#diaporama img {
  max-width: 100%;
  max-height: 100%;
}

Expected behavior
I expect the images to fit perfectly in the carousel, not overflowing horizontally or vertically.

Screenshots
https://ibb.co/28XXWNL

** Override workaround
I managed to update the CSS property like this, just after having loaded what would fill the images:

          nextTick(() => {
            const els = document.querySelectorAll('.diapo img');
            for (let x = 0; x < els.length; x += 1) {
              els[x].style['max-height'] = `${document.getElementById('diaporama').clientHeight - 100}px`;
            }
          });

Desktop (please complete the following information):

• OS: Ubuntu 20.04
• Browser: Chrome
• Version: 87.0.4280.66

I need a way to include custom navigation buttons or methods to control the slider with custom buttons.

My template:

<carousel v-if="presentedVideos.length"  :wrap-around="true">
  <slide class="slide" v-for="video in presentedVideos" :key="video.id">
     <iframe class="videoFile" :src="video.video_link"></iframe>
  </slide>
  <template #addons>
    <navigation />
  </template>
</carousel>

1. When presentedVideos ref contains only one item in array - carousel has crashed. I can't slide anymore.
   
   Element outside

2. Same problem when I add new instance.
   
   (after reload problem disappears)

3. Another case when I remove instance. I'm using this way - #36 (comment)
   Carousel items is not updating immediately. I should click on the slide arrows. After that removed instance is disappeared.

Is your feature request related to a problem? Please describe.
I can't slide more than one item per click...

Describe the solution you'd like
The right component has to accept props to do it.

(used with vue and ionic)

It always stays at page one whatever you do. But if I change the window size it will work again.

Code:

<template>
  <Carousel>
    <Slide v-for="slide in 10" :key="slide">
      <div style="width:50px;background-color:purple">{{ slide }}</div>
    </Slide>

    <template #addons>
      <Navigation />
      <Pagination />
    </template>
  </Carousel>
</template>

<script lang="ts">
import "vue3-carousel/dist/carousel.css";
import { Carousel, Slide, Pagination, Navigation } from "vue3-carousel";
export default {
  name: "Tab1",
  components: {
    Carousel,
    Slide,
    Pagination,
    Navigation,
  },
};
</script>

Describe the bug
I have a carousel with some breakpoints, in each one I use itemsToShow to define the quantity of items to show.
I also use the addon pagination which should be customizable using the slidesCount but it's not working.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://ismail9k.github.io/vue3-carousel/examples.html#pagination
2. Scroll
3. Pay attention to the pagination, when you are in the step 7 or 8 there is no more scroll
4. See error

Expected behavior
It should be customizable the slidesCount, currently if I define the property on each breakpoint it doesn't work.

Screenshots

Describe the bug
Sliding in the basic vue carousel example does not work on an iPhone Xs.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'https://ismail9k.github.io/vue3-carousel/examples.html.'
2. Try to slide to the right
3. Does not work

Smartphone (please complete the following information):

• Device:[e.g. iPhone Xs
• OS: e.g. 14.4
• Browser stock safari

We also tried to embed the carousel into our website, which also did not work on various iPhone models.

I am using the vue3-carousel to display a slide of images in my project built using vue.js 3. Everything works fine except for the fact that the image section turns blank when ever 1 image is to be displayed. I added another image to the current image and the bug went away so I am certain my image is not broken or something like that

My code:

template:
<div> <carousel :items-to-show="1" :wrapAround='true' class="h-4/5 md:mx-4 rounded-md overflow-hidden bg-cover bg-center"> <slide v-for="(image, index) in product.images" :key="index"> <img :src="image" :alt="product.name" class="w-full"> </slide> <template #addons> <navigation /> <pagination /> </template> </carousel> </div>

script:
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
@Options({ components: { Carousel, Slide, Pagination, Navigation },

Description
Slide animation not working. When I click any of navigation buttons, the transform style of the element with class name carousel _track does not change. But it works normally in examples. I think it is bug. Or am I wrong somewhere?

Steps to reproduce the behavior:

1. Click navigation button
2. See the bug

My code

<Carousel :wrap-around="true" :settings="settings">
    <Slide v-for="slide in 10" :key="slide">
        <div class="carousel__item">
            {{ slide }}
        </div>
    </Slide>

    <template #addons>
        <Navigation />
        <!-- <Pagination /> -->
    </template>
</Carousel>

<script>
import { Carousel, Slide, Navigation } from 'vue3-carousel';
import 'vue3-carousel/dist/carousel.css';

export default {
    name: 'ProductDrawer',
    components: {
        Carousel,
        Slide,
        Navigation
    },
    props: {
        open: {
            type: Boolean
        },
        productId: {
            type: Number
        }
    },
    data () {
        return {
            settings: {
                itemsToShow: 1,
                snapAlign: 'center'
            }
        };
    }
}
</script>

.carousel__item {
    min-height: 200px;
    width: 100%;
    background-color: #642afb;
    color: white;
    font-size: 20px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel__slide {
    padding: 10px;
}

.carousel__prev,
.carousel__next {
    box-sizing: content-box;
    border: 5px solid white;
}

Describe the bug
config.wrapAround is ignored when swiping to change slides (TouchEvent start/move/end or MouseEvent down/move/up)
Function slideTo() does not check config.wrapAround if called from handleDragEnd()

To Reproduce
Steps to reproduce the behavior:

1. Set config.wrapAround to false (the default value)
2. Swipe to the final slide using the mouse or touch events (not by next() or prev())
3. Swipe one more time and the carousel returns to the first slide
4. Same issue in the reverse direction

Expected behavior
If config.wrapAround is false, swiping ahead on the final slide or back on the first slide should not change the slide.

Desktop (please complete the following information):

• OS: MacOS
• Browser Chrome / Safari
• Version 88.0.4324.192 / 14.0.2

Smartphone (please complete the following information):

• Device: iPhone7
• OS: iOS 13
• Browser Safari
• Version 13

I have like 3 carousel in one page on my website, and from that 3 carousel, it have each different bg and position styling, i wonder if i can add my own class on the button tag?

I was just curious if it was possible to customize the nav arrows. I tried targeting the css selector class and the button with no success. I know I can go into the npm module and update it there, but that is inefficient, because if do a fresh npm install I will lose the change.

if it's possible. Can you add a working demo of the carousel so that we can have an overview of the component before using. Thanks!