ismail9k / vue3-carousel

A highly customizable, lightweight Vue 3 carousel component for your next awesome project.
https://vue3-carousel.ismail9k.com/
MIT License
741 stars 174 forks source link

Carrousel crash on ios #318

Open oau-dev opened 1 year ago

oau-dev commented 1 year ago

Describe the bug Page with carrousel crash on ios

Expected behavior don't crash ...

Screenshots app crash, freeze or black screen or return to main ios menu

mobile

js version

$ cat  package.json 
{
  "name": "nuxt-app",
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@types/node": "^18",
    "eslint": "^8.39.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-config-xo": "^0.43.1",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-vue": "^9.11.0",
    "node-sass": "^8.0.0",
    "nuxt": "^3.4.1",
    "sass": "^1.62.1",
    "sass-loader": "^10.4.1"
  },
  "dependencies": {
    "@kevinmarrec/nuxt-pwa": "^0.17.0",
    "vue3-carousel": "^0.3.1"
  }
}

I don't now how to get usefull logs on ios so .. no I don't have any logs. Everything is workin fine on firefox/linux, firefox/android, chrome/android. Desktop ios/safari, ios/chrome

<template>
  <div id="root">
    <div id="pref">
      <div>
        <hr />
      </div>
      <div id="leftbackcard"></div>
      <div id="rightbackcard"></div>
      <div>
        <carousel :items-to-show="1" :wrapAround="true">
          <slide v-for="(v, k) in data.value" :key="k">
            <JobsSwiper :key="k" :data="v.job" />
          </slide>
        </carousel>
      </div>
      <div class="spacer"></div>
    </div>
  </div>
</template>
<script setup>
import "vue3-carousel/dist/carousel.css";
import { Carousel, Slide, Pagination, Navigation } from "vue3-carousel";
const props = defineProps(["data"]);
</script>

The data contains arround 100 items.

oau-dev commented 1 year ago

It's working with less items in the list... Any way to feed the component with bunch of data and not with all the data ?