Checks

• Not a duplicate.
• Not a question, feature request, or anything other than a bug report directly related to Vue Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

0.5.18

Description

I am trying to change splide's width dynamically to make the carousel fullscreen when the user clicks on it. So I set :

:options="carouselFullscreen ? bigCarouselOptions : smallCarouselOptions"

The options are indeed different (I can see them changing in vue dev tools) but they do not take effect. I think it is due to the fact that a style attribute is set and stays at the first value, but if I change this as well dynamically, the slides of the carousel are a bit offset when changing the width.

Reproduction Link

No response

Steps to Reproduce

 <Splide
      :class="
        carouselFullscreen
          ? 'splide small-carousel is-initialized splide--slide splide--ltr splide--draggable is-active'
          : 'splide small-carousel is-initialized splide--slide splide--ltr splide--draggable is-active'
      "
      :style="carouselFullscreen ? 'max-width: 100vw;' : 'max-width: 95vw;'"
      @click="carouselFullscreen = !carouselFullscreen"
      :options="carouselFullscreen ? bigCarouselOptions : smallCarouselOptions"
    >
      <SplideSlide
        v-for="picture in pictures"
        :key="picture.id"
        v-show="!arePicturesLoading"
      >
        <img
          :class="carouselFullscreen ? 'fullscreen-picture' : 'small-picture'"
          :onload="pictureLoaded"
          :src="picture.name"
        />
      </SplideSlide>
    </Splide>



smallCarouselOptions: {
        gap: "1rem",
        arrows: false,
        width: "95vw",
      },
bigCarouselOptions: {
        gap: "1rem",
        arrows: false,
        width: "100vw",
      },

A workaround I found was to create 2 splide components and hide one or another with v-if. The problem with it is that the current displayed slide comes back to the first one when fullscreen is enabled/disabled and that it is not optimal

Expected Behaviour

The correct width is applied to the splide component

When I try to change style of arrow (e.g. .splide__arrow--prev/.splide__arrow--next), it doesn't apply.

I work on Vue 3

code sample:

<template>
    <splide class="wrap-reviews__cards" :options="options" id="splide">

      <splide-slide class="wrap-reviews__card" v-for="review in REVIEWS" :key="review.title">
        <div class="wrap-reviews__card-back">
          <img src="../assets/images/reviews-quotes.svg" alt="Quotes">
        </div>
        <div class="wrap-reviews__card-box">
          <h6>{{ review.title }}</h6>
          <span v-bind:class="{'wrap-reviews__card-name--red': review.company === 'Upwork',
                'wrap-reviews__card-name': true}">
                  Member: <em>{{ review.customer }}</em>
                </span>
          <div class="wrap-reviews__card-info">
            <div class="wrap-reviews__card-info--stars" v-if="review.company === 'Clutch'">
              <img src="../assets/images/reviews-star--green.png" alt="star">
              <img src="../assets/images/reviews-star--green.png" alt="star">
              <img src="../assets/images/reviews-star--green.png" alt="star">
              <img src="../assets/images/reviews-star--green.png" alt="star">
              <img src="../assets/images/reviews-star--green.png" alt="star">
            </div>
            <div class="wrap-reviews__card-info--stars" v-else>
              <img src="../assets/images/reviews-star--red.png" alt="star">
              <img src="../assets/images/reviews-star--red.png" alt="star">
              <img src="../assets/images/reviews-star--red.png" alt="star">
              <img src="../assets/images/reviews-star--red.png" alt="star">
              <img src="../assets/images/reviews-star--red.png" alt="star">
            </div>
            <b>5.00</b>
            <span>{{ review.date }}</span>
          </div>
          <p class="wrap-reviews__card-txt">{{ review.review }}</p>
          <div class="wrap-reviews__card-bottom">
            <div class="wrap-reviews__card-img">
              <img v-bind:src="require('@/assets/images/' + review.companyImg)" alt="platform">
            </div>
            <a href="">Link review</a>
          </div>
        </div>
      </splide-slide>
    </splide>
</template>

<script>
import { REVIEWS } from "@/constants";
import { Splide, SplideSlide } from '@splidejs/vue-splide';
import '@splidejs/splide/dist/css/themes/splide-default.min.css';

export default {
  name: 'Slider',
  components: {
    Splide,
    SplideSlide
  },
  setup() {

    return {
      REVIEWS,
      options: {
        type: 'loop',
        width: "100%",
        perPage: 2,
        rewind: true,
        gap: "3.625em",
        focus: 'center',
        pagination: false,
        arrowPath: 'M40 10.7586L40 0L19.375 13.6552L-4.25588e-08 0.827585L-5.95823e-07 11.5862L19.375 24L40 10.7586Z',
        breakpoints: {
          1200: {
            arrows: false,
            pagination: true,
            perPage: 1,
            gap: "3.625em",
            padding: "2.5rem",
          }
        }
      }
    }
  },
};
</script>

<style lang="scss" scoped>
@import '../views/Main';
@import '../assets/scss/style.scss';
.splide__arrow--next {
  width: 100px;
  height: 100px;
}
</style>

Checks

• Not a duplicate.
• Not a question, feature request, or anything other than a bug report directly related to Vue Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

last version

Description

Uncaught (in promise) TypeError: Object(...) is not a function.

Reproduction Link

No link

Steps to Reproduce

As I mention below

Expected Behaviour

I am trying to use this package, but I got error Uncaught (in promise) TypeError: Object(...) is not a function. Why?

<template>
    <div class="wrapper">
        <h2>Basic</h2>

        <Splide :options="options">
            <SplideSlide v-for="slide in slides" :key="slide.alt">
                <img :src="slide.src" :alt="slide.alt" />
            </SplideSlide>
        </Splide>

        <button @click="enabled = !enabled">
            {{ enabled ? 'Hide Slider' : 'Show Slider' }}
        </button>
    </div>
</template>

<script lang="ts">
//import { Splide as Core } from '@splidejs/splide';
import { Splide, SplideSlide } from '@splidejs/vue-splide';
import { defineComponent } from 'vue'; //defineComponent, ref
import axios from 'axios';

export default defineComponent({
    name: 'BasicExample',

    components: {
        Splide,
        SplideSlide,
    },

    setup() {
        function generateSlides() {
            axios
                .get('api/sliders/index', {})
                .then((response) => {
                    let responseData = response.data;
                    slides = responseData.sliders.data;
                })
                .catch((error) => {
                    console.log(error);
                });
            //.finally(() => {});
        }

        let slides = generateSlides();

        const options = {
            rewind: true,
            perPage: 2,
            gap: '1rem',
            height: '15rem',
            breakpoints: {
                1000: {
                    perPage: 1,
                },
            },
        };

        const enabled = true; //ref<boolean>(true);
        //const onSplideMounted = (splide: Core) => console.log(splide.length);
        //const onSplideMove = (splide: Core, index: number) => console.log('move to', index);

        return {
            slides,
            options,
            //onSplideMounted,
            //onSplideMove,
            enabled,
        };
    },
});
</script>

Checks

• Not a duplicate.
• Not a question, feature request, or anything other than a bug report directly related to Vue Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

0.7.1

Description

Direct adding video to Splide not works properly

<template>
  <Splide 
    :options="options" 
    :extensions="extensions" 
    ref="refNewsListSplider">
  </Splide>
</template>

<style scoped>
.splide__slide img {
  vertical-align: middle;
}
</style>

<script>
let NewsListSplider = null;

import { Splide, SplideSlide } from '@splidejs/vue-splide';
import { Video } from '@splidejs/splide-extension-video';

import { defineComponent, onMounted, ref } from 'vue';

import '@splidejs/splide/dist/css/themes/splide-default.min.css';
import '@splidejs/splide-extension-video/dist/css/splide-extension-video.min.css';

export default defineComponent({
  components: {
    Splide,
    SplideSlide,
  },
  setup() {
    const options = {
      rewind : true,
      height: '320px',
      pagination: false,
      gap : '2rem',
      heightRatio: 0.5625,
    };
    const refNewsListSplider = ref();
    NewsListSplider = refNewsListSplider;
    onMounted(
      () => {
        if ( refNewsListSplider.value && refNewsListSplider.value.splide ) {
          refNewsListSplider.value.splide.add( '<li class="splide__slide"><img class="img-fluid rounded-2 w-100" src="/img/noimage.png"></li>' );
        }
      }
    );
    return {
      options,
      extensions: { Video },
      refNewsListSplider,
    }
  },
  data() {
    return {
    }
  },
  methods: {
    change(images) {
      NewsListSplider.value.splide.remove(Array.from(Array(100).keys()));
      images.forEach(img => {
        NewsListSplider.value.splide.add(
          '<li class="splide__slide d-flex" style="height: 360px; justify-content: center;">\
              <img class="text-center img-fluid rounded-2" style="max-height: 360px;" src="'+img+'">\
          </li>'
        );
      });
    },
    insertVideo(path) {
      NewsListSplider.value.splide.add(
        '<li class="splide__slide d-flex" data-splide-html-video="'+path+'" style="height: 360px; justify-content: center;">\
            <img class="text-center img-fluid rounded-2" style="max-height: 360px;" src="./img/preview_video1.png">\
        </li>'
      );
      console.log('Trying to insert the video..\n'+path);
    }
  },
})
</script>

No video slide shown(only preview image) after trying to update slider section directly _this.$refs._BaseImageSlider.insertVideo('./img/newspost/inner-img/'+res.news_video); But this method based on change method which also works for adding images. Got instruction from https://splidejs.com/extensions/video/#overview

P.S. I add my content directly because using an AXIOS AJAX features. And it works if slide will be static added into template section. So problem with add() method only for video extension and I don't know why it happens.

P.S.S. Found that it works as in GUIDE. But I've not a lot of experience in VUE and not fully understand how I can update videos variable and update SpliteSlide after template will be loaded..

<template>
  <div id="post-images">
    <Splide ref="splide" :options="options" :extensions="extensions">
      <SplideSlide v-for="( id, index ) in videos" :key="id" :data-splide-html-video="id">
        <img src="/img/preview_video1.png" class="text-center img-fluid rounded-2" style="height: 100%;">
      </SplideSlide>
    </Splide>
    <br>
    <label for="formImageMultiple" class="form-label">Загрузка изображений</label>
    <input class="form-control" type="file" @change="onFileChange" id="formImageMultiple" multiple>
    <br>
  </div>
</template>

Tried to load dynamically for SplideSlide section and got same broken slide :\

<SplideSlide v-model="UpdateVideos" v-for="( id, index ) in UpdateVideos" :key="id" :data-splide-html-video="id">
    <img src="/img/preview_video1.png" class="text-center img-fluid rounded-2" style="height: 100%;">
</SplideSlide>

Reproduction Link

No response

Steps to Reproduce

Please look up!

Expected Behaviour

I thought it would work like such as with images :)

Hello,

I encountered the following error when I was trying to locally register Splide and SplideSlide components.

ERROR in ../node_modules/@splidejs/vue-splide/src/js/components/Splide.vue 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <template>
|   <div class="splide">
|     <div class="splide__slider" v-if="hasSliderWrapper">
 @ ../node_modules/@splidejs/vue-splide/src/js/index.js 8:0-41 13:17-23 13:30-36 18:0-31
 @ ./App.js
 @ ./index.js

I'm using vue-loader v15.9.4

I installed a fresh Laravel 8 project with laravel-mix v6 pre-configured.
Everything works fine with npm run watch or npm run dev but not with npm run prod
Below is my package.json file

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "@tailwindcss/forms": "^0.2.1",
        "@tailwindcss/typography": "^0.3.1",
        "alpinejs": "^2.7.3",
        "autoprefixer": "^10.0.2",
        "axios": "^0.21",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "postcss-import": "^12.0.1",
        "tailwindcss": "^2.0.1",
        "vue-loader": "^15.9.5",
        "vue-template-compiler": "^2.6.12"
    },
    "dependencies": {
        "@splidejs/vue-splide": "^0.3.5",
        "vue": "^2.6.12"
    }
}

Am I doing something wrong? Please help out

Checks

• Not a duplicate.
• Not a question, feature request, or anything other than a bug report directly related to Vue Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

0.6.3

Description

I updated from version 0.5.18 to 0.6.3. When I pick the carousel with mouseclick, pull it to side a bit and then release, after the track come back to its normal position. three dots with class splide__sr appear. This did not happen in previous version. Video is attached below, I cannot provide reproduction.

Carousel settings:

type: 'slide',
  rewind: false,
  waitForTransition: false,
  width: '100%',
  perMove: 1,
  speed: 700,
  pagination: false,
  arrowPath: 'M30.3,18.9L11.8,0.5c-0.6-0.6-1.6-0.6-2.2,0C9,1.1,9,2,9.7,2.6L27.1,20L9.7,37.4C9,38,9,38.9,9.7,39.5 c0.3,0.3,0.7,0.5,1.1,0.5c0.4,0,0.8-0.2,1.1-0.5l18.5-18.4c0.3-0.3,0.5-0.7,0.5-1.1C30.8,19.6,30.6,19.2,30.3,18.9z',
  breakpoints: {
    7000: {
      perPage: 6,
      gap: '30px',
    },
    1900: {
      perPage: 5,
      gap: '25px',
    },
    1400: {
      perPage: 4,
      gap: '20px',
    },
    1279: {
      perPage: 4,
      gap: '15px',
    },
    1024: {
      perPage: 3,
      gap: '10px',
    },
    768: {
      perPage: 2,
      gap: '10px',
    },
    640: {
      perPage: 1,
    },

Reproduction Link

No response

Steps to Reproduce

1. Install v0.6.3 of vue-splide
2. Pick and pull carousel to the side, then release and wait for animation to end
3. Three dots appear

Expected Behaviour

Three dots not appearing.

I have tried using go but it's not working because of the sync method.
For the secondary slider, it selects the particular slide but for primary it doesn't work or say sync.

Is there any typings available for this package?

I followed all the examples, I had no luck. The preview of what is displayed is shown below.

Here is my code for my slider.

<template>
    <div>
        <splide :slides="slides">
                <splide-slide v-for="slide in slides" :key="slide.urlToImage">
                    <img :src="slide.urlToImage">
                </splide-slide>
            </splide>
    </div>
</template>

<script>
import axios from 'axios'
import { Splide, SplideSlide } from '@splidejs/vue-splide'


export default {
    components: {
        Splide,
        SplideSlide
    },

    data(){
        return {
            slides: null,
        }
    },
    methods: {
        getArticles: function(){
            axios.get('https://newsapi.org/v2/top-headlines?country=us&apiKey=2b6ef6ad2d01456fa3b7389970ab9f6a')
            .then(response => {
                this.slides = response.data.articles
            })
        }
    },
    mounted() {
      this.getArticles()
    },

    updated(){

    }
}
</script>

Has anyone tried to use a Vue solution in Nuxt as a plugin or a module?

I'm having lots of challenges trying to do this the right way!

I'm trying to import Splide Vue slider from NPM into Nuxt and after you install it via NPM, there seems to be a challenge on how to import it into a splide.js file in plugins then try to address it in nuxtconfig.js as a plugin. I get all sorts of errors.

here are my files:

nuxt.config.js

modules: [
    // https://go.nuxtjs.dev/bootstrap
    '@nuxtjs/style-resources',
    '@nuxtjs/bulma', 
    '@splidejs/splide'
    
  ],

splide.vue (in nuxt components)

<template>
  <splide :options="options">
        <splide-slide>
            <h1>boo</h1>
        </splide-slide>
        <splide-slide>
            <h1>boo2</h1>
        </splide-slide>
  </splide>
</template>

<script>
  export default {
      data() {
          return {
              options: {
                rewind : true,
                  width  : 800,
                  perPage: 1,
                  gap    : '1rem',
              },
          };
      },
  }
</script>

splide.js (in plugins)

import Vue from 'vue';
import VueSplide from 'vue-splide';

Vue.use( VueSplide );
new Vue( {
    el    : '#app',
    render: h => h( App ),
  } );

this was the link on the splide site: splide instructions

my most recent error is "window is not defined"

I have successfully implement the slider and it's working, just that I have a custom button that I want to use to control the slider
So I have the below

<button class="mb-10 mx-auto" @click="test()">Next</button>

methods:{
   test() {
      Splide.go( '+' );
    }
}

This is the error message that I got.

When scrolling on mobile or chrome, it causes the slider to recalculate the width and restart the slide.

I use this plugin for my banners in my Nuxt app, after loading page first time it works perfectly, yet it doesn't work after changing page and returning to the page where the banners are. Can someone tell me is there a fix or it's my local problem?

Hey, thank for your work with awesome project.
Waiting for Vue 3 support.

Checks

• Not a duplicate.
• Not a question, feature request, or anything other than a bug report directly related to Vue Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

0.5.14

Description

It's not possible to stylizing with scoped style, by some reason, it's not adding vue data-v attribute, it's not using in Vue.js?

Reproduction Link

No response

Steps to Reproduce

1. add some code into scoped style, like:

<style scoped>
.splide__arrows {
  background: black;
}
</style>

Expected Behaviour

Apply the style into component

Checks

• Not a duplicate.
• Not a question, feature request, or anything other than a bug report directly related to Vue Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

0.5.0

Description

I have an error when compiling the App.
Apparently the path described here is correct: https://splidejs.com/integration/vue-splide/
I checked in the project's tree, the path exists. I really don't understand why I have this error, and of course the solution suggested (Run 'npm i -S @splidejs/splide' to add it) doesn't work, as you might have expected.

Reproduction Link

No response

Steps to Reproduce

1. Follow the steps here: https://splidejs.com/integration/vue-splide/
2. Look in the console:

Module Error (from ./node_modules/eslint-loader/index.js):
error: '@splidejs/splide' should be listed in the project's dependencies. Run 'npm i -S @splidejs/splide' to add it (import/no-extraneous-dependencies) at src/components/projets/ADI.vue:288:1:
  286 | import { Splide, SplideSlide } from '@splidejs/vue-splide';
  287 | import QuiEstCe from '@/components/QuiEstCe.vue';
> 288 | import '@splidejs/splide/dist/css/themes/splide-skyblue.min.css';
      | ^
  289 | 
  290 | export default defineComponent({
  291 |   name: 'ADI',


1 error found.

 @ ./src/router/index.js 261:13-52
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.1.63:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

Expected Behaviour

I expect not to see any error.

I am having a similar issue to this one from the main libraries repo https://github.com/Splidejs/splide/issues/55. I am using nuxt and everything appears to work fine other than the loop functionality. Any ideas? This image is from right before the slide pops into view. As you can see, there are no slides to the right.

The NPM version doesn't work in IE11, i removed it from my project and used the CDN version, looks to have fixed my issue. Is the NPM version uptodate with the CDN version?

Version

0.5.1

Description

I updated from older version (0.3.5) to the newest with Splide v3 in my Vue 3 - TypeScript project. Whenever I try to compile, I got implicitAny error:

ERROR in node_modules/@splidejs/vue-splide/src/js/components/index.ts:2:40
TS7016: Could not find a declaration file for module './SplideSlide/SplideSlide.vue'. 'project_root/node_modules/@splidejs/vue-splide/src/js/components/SplideSlide/SplideSlide.vue.js' implicitly has an 'any' type.
1 | export { default as Splide } from './Splide/Splide.vue';
2 | export { default as SplideSlide } from './SplideSlide/SplideSlide.vue';`

In older version, I've had almost the same problem, but I was able to fix it by creating .d.ts file containing
declare module '@splidejs/vue-splide';

In this case, this does not work. Thanks for help.

Reproduction Link

No response

Steps to Reproduce

1. Create Vue 3 Typescript project
2. Install @splidejs/vue-splide
3. Setup component containing Splide and SplideSlide

Expected Behaviour

Without TypeError.

Checks

• Not a duplicate.
• Not a question, feature request, or anything other than a bug report directly related to Vue Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

0.5.18

Description

got a weird error on previewing nuxt 3 after the build
it does work and run on developent. but got the warning on preview mode

Reproduction Link

https://github.com/zynth17/vue-splide-nuxt3-bug

Steps to Reproduce

1. install nuxt 3
2. install splide
3. use it on a page
4. run npm run build
5. run npm start
6. open the preview and see warning
   ...

Expected Behaviour

supposed to not have any warning

Checks

• Not a duplicate.
• Not a question, feature request, or anything other than a bug report directly related to Vue Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

0.5.0

Description

I just follow the steps here: https://splidejs.com/integration/vue-splide/

And I have this in the console:

 WARNING  Compiled with 2 warnings                                                                                                                                                                                                    

 warning  in ./node_modules/@splidejs/vue-splide/dist/js/vue-splide.esm.js

"export 'createElementBlock' was not found in 'vue'

 warning  in ./node_modules/@splidejs/vue-splide/dist/js/vue-splide.esm.js

"export 'createElementVNode' was not found in 'vue
```'



### Reproduction Link

_No response_

### Steps to Reproduce

1. Go here: https://splidejs.com/integration/vue-splide/
2. Read carefullt
3. Follow the steps
4. Be disappointed to see the warnings in the console


### Expected Behaviour

I expect not to see any warnings.

not relevant anymore

Hi,

do I need to do anything to re-init the slider upon creation of a new slide? My code looks like:

Upon creation of a new "round" I can see in my VueDevtools that a new SplideSlide is correctly added, and I can see that it is there (just outside the viewport) but it seems that the slider thinks that the previous last item is still the last one.

Any suggestions or is this a bug?
Thanks alot!

Periodically, there is a problem when a slider is created, the width is not calculated correctly, which is why the slider does not work correctly.

Perhaps this is due to the fact that the parent component is not fully loaded, and the slider will already enter a width calculation.

At the moment, the problem can be solved as follows:
methods:{ onMounted(slider){ setTimeout(function () { slider.refresh(); },1500) } },

There is no way to use grid extension

Hello, I found something anomaly.
When using autoplay option, splide component emit autoplay excessively.
It calls at least 1000 times per minute.
You can check this out through Vue.js devtools

I hope you to consider fix it.
thank you.

I have the following configs:

galleryOptionsMain: {
        rewind: true,
        perPage: 1,
        perMove: 1,
        heightRatio: 0.66,
        pagination: false,
        arrows: false
},

galleryOptionsThumbnails: {
        rewind: true,
        gap: '1rem',
        pagination: false,
        arrows: false,
        fixedWidth: 110,
        fixedHeight: 70,
        cover: true,
        focus: 'center',
        isNavigation: true,
        updateOnMove: true
},

However my gallery slides seem to all have the class 'is-visible' applied to them, making them vertically stack. I'm using my own css but using the splide min css and can see Splide has correctly set a fixed width/height inline style on each.

The plugin is great but it lacks documentation for VueJS 3 and composition API.
When we follow what is written we have several errors.

Just an FYI, the vue component isn't IE 11 compatible, I had to transpile this library before it would work;

(in Vue)

Checks

• Not a duplicate.
• Not a question, feature request, or anything other than a bug report directly related to Vue Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

0.5.18

Description

In my use case I have a Splide slideshow as only component in my screen.
When pauseOnHover & pauseOnFocus are false then autoplay will never work also not when clicking on the control button.

Reproduction Link

No response

Steps to Reproduce

<template>
  <div>
    <Splide ref="splide" :options="slideConfig">
      <SplideSlide v-for="slide of slides" :key="slide">
        <img :src="slide" />
      </SplideSlide>
    </Splide>
    <div class="splide__autoplay">
      <button class="splide__play">Play</button>
      <button class="splide__pause">Pause</button>
    </div>
  </div>
</template>

<script>
import { Splide, SplideSlide } from "@splidejs/vue-splide";
import "@splidejs/splide/dist/css/splide.min.css";
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    const splide = ref();

    return {
      splide,
    };
  },
  name: "EventPage",
  components: {
    Splide,
    SplideSlide,
  },
  data: function () {
    return {
      slideConfig: {
        interval: 500,
        speed: 500,
        autoplay: true,
        rewind: true,
        rewindSpeed: 0,
        pauseOnHover: false,
        pauseOnFocus: false,
        perPage: 1,
      },
      slides: [],
    };
  },
  methods: {},
  mounted: function () {
    const list = [
      "https://dummyimage.com/600x400/000/fff&text=test1",
      "https://dummyimage.com/600x400/000/fff&text=test2",
      "https://dummyimage.com/600x400/000/fff&text=test3",
      "https://dummyimage.com/600x400/000/fff&text=test4",
    ];
    this.slides = list;
  },
});
</script>

Expected Behaviour

Splide's autoplay should work when pauseOnHover & pauseOnFocus are disabled

Checks

• Not a duplicate.
• Not a question, feature request, or anything other than a bug report directly related to Vue Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

0.5.13

Description

Splide options are not reactive. I have logged inside options and the data does indeed change but Splide ignores them.

<template>
  <div
    v-show="!computedStyle.isHidden"
    @click.stop="emitClicked(data)" 
    @mouseover.stop="handleMouseover(data)"
    @mouseleave.stop="handleMouseleave"
    :id="data.id"
    :data-type="data.elementType"
    :data-label="data.label"
    class="g-canvas-element g-draggable g-dropzone" 
    :style="computedStyle" 
  >
    <Splide 
      ref="slider" 
      :options="options"
      class="slider"
    >
      <SplideSlide v-for="(slide, index) in data.children" :key="index">
        <canvas-slide :data="slide"/>
      </SplideSlide>
    </Splide>
  </div>
</template>

<script>
import { ref, onUnmounted, inject, computed } from 'vue';
import { useCanvasElementEvents } from '@/app/shared.js';
import CanvasSlide from '@/app/components/CanvasSlide';

export default {
  components: {
    CanvasSlide,
  },
  props: {
    data: Object
  },
  setup(props) {
    const el = useCanvasElementEvents(props);
    const emitter = inject('emitter');
    const slider = ref(null);

    const options = computed(() => {
      return {
        rewind: true,
        drag: false,
        padding: el.computedStyle.value.sliderPadding || 0,
        arrows: el.computedStyle.value.sliderArrows || false,
        pagination: el.computedStyle.value.sliderPagination || false,
      }
    });

    const showInspectedSlide = (index) => {
      slider.value.splide.go(index);
    };

    emitter.on(`inspectSlide-${props.data.id}`, showInspectedSlide);

    onUnmounted(() => {
      emitter.off(`inspectSlide-${props.data.id}`, showInspectedSlide);
    });

    return { 
      ...el,
      slider,
      options,
    }
  }
}
</script>

Reproduction Link

No response

Steps to Reproduce

1. Have a computed options object with a property that reference a ref or a computed property.
2. Change the reactive property of the option.
   ...

Expected Behaviour

Splide gets updated the options with the new property values.

Checks

• Not a duplicate.
• Not a question, feature request, or anything other than a bug report directly related to Vue Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

^0.6.7

Description

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-...='), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.

Inline Style Attribute violate csp

Reproduction Link

No response

Steps to Reproduce

1. activate csp headers
   (in my case: content-security-policy: style-src 'self';)

Expected Behaviour

no error messages in console and completely support Content Security Policy in on of the best slider that can i seen

i have the problem when i use mixins on the project, error like this :

runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Component emitted event "splide:autoplay:play" but it is neither declared in the emits option nor as an "onSplide:autoplay:play" prop

the error overloop

[email protected]
[email protected]

ERROR in ./node_modules/@splidejs/vue-splide/src/js/index.js
Module not found: Error: Can't resolve './components/Splide' in '\node_modules@splidejs\vue-splide\src\js'
@ ./node_modules/@splidejs/vue-splide/src/js/index.js 8:0-41 13:17-23 13:30-36 18:0-31

The files are clearly there under ./node_modules/@splidejs/vue-splide/src/js/components... so I'm not sure what's going on?

Hi

I've got vue-splide working beautifully (great package) with a primary and secondary thumbnail slider. The primary and secondary are sync'd and working fine together, but there's one issue I don't understand how to resolve.

Secondary has isNavigation: true, which I can see adds some CSS properties to the thumbnail slider, but the thumbnails themselves do not become navigation links. Cursor on mouse hover remains as the default and clicking the thumbnail has no effect.

Comparing the <li> elements on my secondary to the example on splidejs.com shows that role="button" and aria-label="Go to slide X" are missing from mine.

Is this a bug, or is it possible I've used two incompatible options?

Thanks

splidePrimary: {
	type       : 'loop',
	heightRatio: 0.6,
	pagination : false,
	arrows     : true,
	cover      : true,
	speed      : 300,
	lazyLoad   : 'nearby',
	preloadPages : 1,
	classes: {
	  arrow : 'splide__arrow splide-custom-arrow',
	},
},
splideSecondary: {
	type         : 'slide',
	rewind       : true,
	fixedWidth   : 130,
	fixedHeight  : 70,
	isNavigation : true,
	gap          : 0,
	focus        : 'center',
	pagination   : false,
	cover        : true,
	arrows       : false,
	lazyLoad     : 'nearby',
	preloadPages : 4,
	breakpoints : {
	    '600': {
		fixedWidth  : 66,
		fixedHeight : 40,
	    }
	}
}

Hi @NaotoshiFujita

I would like to have the markup already on the server. Is it possible to add support SSR support?
It may be possible to wrap the splidejs plugin in a UMD wrapper.

It would be great to change the direction of the slider for the mobile version

Example:

sliderOptions: { direction: 'ttb', height : '425px', width : '80px', breakpoints: { '768': { direction: 'ltr', width : '100%', height : '80px', }, } }

Version

0.5.1

Description

This issue is related to https://github.com/Splidejs/splide/issues/292#issue-835039365 (copy and other in new tab, otherwise it does not find it, I dont know why)

I have a carousel with this options:

{
type: 'loop',
waitForTransition: false,
width : '100%',
speed : 800,
pagination: true,
arrows: false,
perPage: 1,
autoplay: false,
interval: 7000,
breakpoints: {
7000: {
height: '480px',
},
1279: {
height: '450px',
},
1023: {
height: '345px',
},
767: {
height: '380px',
}
}
}

Slides contain full width images. When I refresh page, slider is shifted by 34px (translateX(-3840px)). After I slightly move the carousel, it shifts out to position where it SHOULD BE in the beginning (translateX(-3806px)).

I tried to create the same carousel but without images, so I could tell if it has something to do with image load but bug remained.

There is one interesting thing - when I call splide.refresh() around 250ms after mounted splide event, splide renders just fine as it should be, so this might be a quick solution for now..

<Splide :options="options" @splide:mounted="onMountedSplide"> ... </Splide>

onMountedSplide: ( splide: any ) => {
setTimeout(() => {
splide.refresh()
}, 250)
},

If I change carousel to type slide, it works as it should, so it is only problem with loop type.

Reproduction Link

No response

Steps to Reproduce

1. Create Vue 3 typescript project
2. Include splide with options mentioned above
3. In splideslide with relative position, include image with absolute position, left 0, top 0, full width and any height.
4. Refresh page

Expected Behaviour

Correct splide__list translateX on page refresh.

I'm getting the following error on page load. I'm using a main gallery with a synced thumbnail gallery:

TypeError: Cannot read property 'left' of undefined

Setting a breakpoint it seems this.padding becomes undefined during mount, it doesn't matter if I provide options.padding or not.

get width() {
      return track.clientWidth - this.padding.left - this.padding.right;
},

I don't have an easy reproducible example as I have quite a complex gallery and I'm ripping out one library for another. Hoping it's something obvious to you in the logic of: https://github.com/Splidejs/splide/blob/fe53e80423e04615231b59c64b069ddd296dd44b/src/js/components/layout/directions/horizontal.js#L74-L78

i have an option to disable arrows when the item is only 1.. but on vue router, i can see the option value was changed from true to false when i navigate to new page, but the component still showing the arrows

We created a thumbnail based on the example code.. but thumbnails is not reacting when its click

I have two slider in my vue project. 1st one is working perfectly but the second one is not working.

Hi,
I would like to control how many slides to show "perPage" upon viewport change. So I've done a handler updating the options ond Splide, and thought that there was an event detecting that called "updated" - but that event never gets fired, and I can't fire a refresh myself. The only method working for me from the api when using $refs is splide.go, otherwise I get splide.xxx is not a function :-(

Can anyone help me on what to do to make the slider refresh when I want it to?

Thanks in advance!

https://github.com/unjs/unplugin

I think you should write a new one with this.

Checks

• Not a duplicate.
• Not a question, feature request, or anything other than a bug report directly related to Vue Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

0.5.18 (vue-splide)

Description

As written in the documentation, I used the data-splide-lazy="path-to-image" with the lazyLoad: true option. The 2 first images are loaded but not the next ones.

The problem is that when scrolling to the next ones, a loading animation is displayed but the next images are not loaded and no request is made in the network tab.

Another problem I encountered, I couldn't catch the lazyload:loaded event with @lazyload:loaded

Reproduction Link

No response

Steps to Reproduce

Add multiple images to a vue-splide component with lazy-load enabled

Expected Behaviour

Lazy loads the images

Is there an getter like getArrow('arrow_class') or something similar?
I'm trying to disable "prev-arrow" when slider mounted.
Maybe someone already has a solution. 🙂

Using the files from the CDN directly in a webpage does not work. Needs a dist folder with built code.

https://www.jsdelivr.com/package/npm/@splidejs/vue-splide

Thanks for fixing vue-splide to vue3 lifecycles!

I'm trying to add slides after component has mounted, but autoplay doesn't seems to work.
What should i do to make autoplay work ?

// MySlyderComponent.vue

<template>
  <div class="slider">
    <splide
      :options="splideOptions"
      @splide:mounted="onMounted"
      >
    </splide>
  </div>
</template>

<script>
import { ref, Ref, onMounted } from 'vue'
import { createSlides } from '@models/slides'
import { Splide, SplideSlide } from '@splidejs/vue-splide'
import { fullPath } from '@/helpers/fullPath'
export default {
  name: 'SliderComponent',
  components: {
    Splide,
    SplideSlide,
  },
  setup() {
    const splideOptions = {
      type: 'loop',
      perPage: 1,
      perMove: 1,
      arrows: false,
      autoplay: true,
      height: 'auto',
      lazyLoad: true
    }
    const slideItems = ref([])
    return { slideItems, splideOptions, fullPath }
  },
  methods: {
    onMounted( splide ) {
      createSlides(splide)
      splide.play
    }
  },
}
</script>

// my-slides.js

import { ref } from "vue"
export default function useApi (url: RequestInfo, options?: RequestInit | undefined){
  const response = ref()
  const request = async () => {
    const res = await fetch(url, options)
    const data = await res.json()
    response.value = data
  }
  return { response, request }
}


export async function getSlides() {
  const { response: slides, request } = useApi<Slides>(
    'https://mydomain.com/api/v1/slides/'
  )
  const loaded = ref(false)
  if (loaded.value === false) {
    await request()
    loaded.value = true
  }
  return { slides }
}

export function createSlides(splide) {
  const slides = []
  const prom = getSlides().then((promise2Result) => {
    promise2Result.slides._rawValue.items.forEach(
      el => {
        splide.add('<li class="splide__slide"><a class="slider-image-wrapper"><img class="slider-image" src="' + 'https://2021.radiopiterfm.ru/' + el.imgPath + '"></a></li>')
      }
    )
  })
  return slides
}

I saw some events to run autostart play but I can't find how it works if I aded slides after Splider was created with no slides.

splide.emit('autostart:play')

[Vue warn]: beforeDestroy has been renamed to beforeUnmount.