splidejs / vue-splide Goto Github PK
View Code? Open in Web Editor NEWThe Splide component for Vue.
License: MIT License
The Splide component for Vue.
License: MIT License
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?
0.5.18
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.
No response
<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
The correct width is applied to the splide component
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.
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,
}
}
}
Using the files from the CDN directly in a webpage does not work. Needs a dist folder with built code.
When scrolling on mobile or chrome, it causes the slider to recalculate the width and restart the slide.
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.
We created a thumbnail based on the example code.. but thumbnails is not reacting when its click
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!
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.
Is there any typings available for this package?
0.5.18 (vue-splide)
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
No response
Add multiple images to a vue-splide component with lazy-load enabled
Lazy loads the images
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!
Hey, thank for your work with awesome project.
Waiting for Vue 3 support.
0.5.1
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.
No response
Correct splide__list translateX on page refresh.
last version
Uncaught (in promise) TypeError: Object(...) is not a function
.
No link
As I mention below
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>
[Vue warn]: beforeDestroy
has been renamed to beforeUnmount
.
0.5.13
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>
No response
Splide gets updated the options with the new property values.
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>
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', }, } }
https://github.com/unjs/unplugin
I think you should write a new one with this.
0.5.0
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.
No response
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
I expect not to see any error.
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
0.6.3
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,
},
No response
Three dots not appearing.
[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?
^0.6.7
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
No response
no error messages in console and completely support Content Security Policy in on of the best slider that can i seen
I have two slider in my vue project. 1st one is working perfectly but the second one is not working.
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) } },
0.5.18
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
https://github.com/zynth17/vue-splide-nuxt3-bug
supposed to not have any warning
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')
The plugin is great but it lacks documentation for VueJS 3 and composition API.
When we follow what is written we have several errors.
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"
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?
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
There is no way to use grid extension
0.5.14
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?
No response
<style scoped>
.splide__arrows {
background: black;
}
</style>
Apply the style into 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>
0.5.18
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.
No response
<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>
Splide's autoplay
should work when pauseOnHover
& pauseOnFocus
are disabled
0.5.1
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.
No response
Without TypeError.
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
0.5.0
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.
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
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.
0.7.1
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>
No response
Please look up!
I thought it would work like such as with 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. 🙂
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.