antoniandre / vueper-slides Goto Github PK

I'm checking out your library as a longtime user of https://idangero.us/swiper/ who also uses vue.

Your library is awesome! There were a few things I thought worth mentioning in case they were helpful ideas for you.

1. When doing a long drag, the slide would only advance by one. For example, on the 6 visible slides, sliding 1 by 1, full-width, no arrows, dragging distance of 70px multiple slides example, if you slide over an entire "screen" worth, you still only advance to the 2nd slide. This just seems unintuitive to me, and I would expect the active slide to be closer to where the drag terminated.

2. Having the slide automatically travel to the touch point was definitely new (e.g. when putting finger/clicking on the slide, it moves to that point as if you had started the drag from the edge of the screen already). It's a cool effect, not sure how expected it is for an everyday average web user. I did see that this effect was disabled when using the dragging distance property. I suppose I was just surprised that there wasn't documentation/information about this feature, and under what circumstances it is enabled/disabled.
   (Basically I'm referring to https://github.com/antoniandre/vueper-slides/blob/master/src/components/vueperslides/vueperslides.vue#L462-L464)

3. Disabling Y scroll while X scroll active. I think it's more pleasing to not allow body Y scroll WHILE X scroll is actively scrolling.

Thank you for your time.

Sorry - hopefully the last question.

Can this carousel scale to fit the content? Our designer has taken issue with the ratio / fixed-height and wants me to fit the slider to the height of the largest content plus some padding.

I can't see an obvious way to do it. Is this something that could be done in CSS, or is there some javascript scaling wizardry I'll run into if I attempt it?

Thanks!

Hi, thanks for this amazing slider, it looks great and promising :)

i'd like to ask you for one little mobile feature which improves the UX, it's to hide arrows and bullets and show the edges of next slides to tell the user there is next slides and should swipe to see them... something similar to what is described here: https://uxdesign.cc/creating-horizontal-scrolling-containers-the-right-way-css-grid-c256f64fc585

Thanks

I struggled hard .. and spent almost more than 10 hours with no solution. Tryying to avoid the cut in the image, if the web page is resized the image gets trimmed. I tried all fixed-height, parallax.

But get an example to avoid the cut in the image. I am ok to have empty content/ transparent content behind the slide if image is small.

Hello there 👋

I started working on #13 but I can't use it with yarn|npm link to test it before sending your the MR 😨

Is it working for you?

Here's what I did

cd vueper-slides
yarn link
yarn build-bundle   

cd ../my-project 
yarn link vueperslides

When I run my project, I got this message in terminal:

export 'VueperSlide' was not found in 'vueperslides' 

and this one on my webpage's console:

TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

Thanks for your help!

I am building a Testimonial.
i want different client images for different testimonial. i want something like that but that 's not working for me. i just want to add custom html elements.
is there a proper way to achieve this?

<vueper-slides autoplay :bullets="false" class="no-shadow">
      <vueper-slide v-for="items in slides" :key="items.id" :title="items.title" :content="items.content">
        <img :src="`images/${items.clientImage}`" alt=""/>
      </vueper-slide>
    </vueper-slides>

Is there any way currently to use moment or another filter for props e.g :content="myValue | moment('Do-MMM-YYYY HH:mm:ss')"

Add LICENSE file :)

When the page is loaded, the slide 2 is displayed for a short second before jumping to first. Is there a way to avoid this? Or is this intended. If it is intended behavior. Could you provide an option to disable this behavior (if there is not already present).

Note: adding infinite:false would remove this behavior ofcourse. but I do not want to disable the infinite scroll option.

This behavior can also be seen in the provided demo.

Hi. I've read through the documentation but I'm struggling a bit with the slide-ratio attribute.

When I scale my site for a very small mobile browser, the slide ratio means that the top and bottom of the content get cut off.

Is it possible to set a minimum height so that the ratio doesn't squeeze the height too far?

Thanks

I am using a custom component for slideContent slot in my slide and visible-slides set to 5 in my breakpoints option i set visibleSlides to 2, but it's not changing slide count here is my code:

<vueper-slides
        class="no-shadow"
        ref="cosmeVueperSlide"
        :bullets="false"
        slide-multiple
        fixed-height="100%"
        :visible-slides="5"
        :dragging-distance="100"
        :disableArrowsOnEdges="true"
        :slide-ratio="1 / 5"
        :breakpoints="{ 600: { visibleSlides: 2 } }">
        <!-- Custom Icons -->
        <v-icon slot="arrowLeft">chevron_left</v-icon>
        <v-icon slot="arrowRight">chevron_right</v-icon>
        <!-- Custom Icons End -->
        <vueper-slide
          v-for="product in initialData.items" :key="product.id">

            <!-- Custom Component -->

        </vueper-slide />
    </vueper-slides>

Hi Antoni

I am really enjoying using vueper-slides. I think its great. Thanks for creating it!

I am trying to show / hide a tooltip for each slide in the carousel but can't access the mouseover and mouseleave events for individual slides.

Ideally, I would like to add @mouseOver="active = true" @mouseleave="active = false" to each slide. So that the tooltip div can be toggled. Something like this:

<vueper-slides><vueper-slide v-for="(slide, key) in slides" :key="key" :image="slide.image" @mouseover="active = true" @mouseleave="active = false"></vueper-slide></vueper-slides><div v-if="active" class="tooltip">{{selectedImage}}</div>

Is this something that exists and if not, could you add this feature? I have a demo here: https://repl.it/@rjlevy/Vue-carousel-vueper-slides-v3

Looking forward to hearing from you.

Thanks,
Roland

I have multiple product cards as slideContent that works as a links to the product detail page.

My issue is if i drag slider from a card item router pushes to the product detail page. I would like to prevent this behaviour. I couldn't find any event that emits from the vueperslide component to check if it is dragging or not dragging.

Is there a way to achieve this?

here is my component:

<vueper-slides
          class="no-shadow"
          :bullets="false"
          slide-multiple
          :visible-slides="5"
          :dragging-distance="100"
          :disableArrowsOnEdges="true"
          :breakpoints="{ 800: { visibleSlides: 2 } }">
          <vueper-slide
            v-for="item in initialData.items" :key="item.id">

            <div
              class="product-slider"
              @click.prevent.stop="goProductDetail(item.id, item.slug)"
              slot="slideContent">

              <div class="card-image">
                <img :src="item.cover_image.image" :alt="item.title">
              </div>

              <div class="card-content">
                <h4 class="card-title">{{ item.title }}</h4>
                <p class="card-reviews"><span>{{ item.review_count }}</span> inceleme</p>

                <div class="rating-container">
                  <star-rating
                    :show-rating="false"
                    :rating="item.rating"
                    :star-size="15"
                    :read-only="true"
                    :round-start-rating="false"
                    :active-color="activeStarColor"
                    :inactive-color="inactiveStarColor"
                    rounded-corners>
                  </star-rating>
                  <p><span>{{ item.rating.toFixed(2) }}</span>/5 puan</p>
                </div>
              </div>

            </div>

          </vueper-slide>
        </vueper-slides>

It would be nice to be able to have text that doesn't change in the title/content while the background slides do change. Right now the best I can do is make duplicate titles/content in all my slides, but that's nowhere near ideal.

Hi again.
food for thought: Have you considered switching to 3d transforms, or using will-change: transform on the track for improving swipe performance? CSS transitions should be pretty performant themselves, but there is something about that swipe animation, that causes lag on Android devices (chrome 53). Compared to how iOS handles the animation, its night and day. I would just like to know your view on that. Thanks.

Hello, I tried to use a link or a route name in the entire slide but without success
below my try

<vueper-slides autoplay fade slide-content-outside="top" :slide-ratio="0.3">
     <vueper-slide
	   v-for="(slide, i) in slides"
           :key="i"
	   :image="slide.image">
           <a :href="slite.route" slot="slideContent"></a>
    </vueper-slide>
</vueper-slides>

        slides: [
        {
		image: "/banners/banner1.jpg",
                 route: "link-to-page-1"
        },
        {
		image: "/banners/banner2.jpg",
                 route: "link-to-page-2"
        }
      ],

I'm trying to set the fixed-height value from a dynamic variable or function like this:

<vueper-slides
       class="no-shadow"
       :fixed-height="setSliderHeight()"
...

But it breaks the slider, since it is trying to add eventListeners while it's not ready i assume. I get the following error:
Cannot read property 'addEventListener' of undefined

From these lines:

// Touch enabled slideshow.
        if (this.touch.enabled) {
          this.$refs.track.addEventListener(hasTouch ? 'touchstart' : 'mousedown', this.onMouseDown);
          document.addEventListener(hasTouch ? 'touchmove' : 'mousemove', this.onMouseMove);
          document.addEventListener(hasTouch ? 'touchend' : 'mouseup', this.onMouseUp);
        }

However it works when i just input a string like fixed-height="50px" directly.
I use nuxt with no-ssr.

Maybe you know a simple solution for this, thanks a lot! 🙏

I had put my import as a plugin:

import Vue from 'vue'
import { VueperSlides, VueperSlide } from 'vueperslides'
import 'vueperslides/dist/vueperslides.css'

Vue.use(VueperSlides)
Vue.use(VueperSlide)

And getting it at nuxt.config.js
plugins: ['~/plugins/vueper'],

Trying to render like this:

    <no-ssr>
      <vueper-slides class="no-shadow" :visible-slides="3" :slide-ratio="1/4" :dragging-distance="70">
        <vueper-slide v-for="i in 9" :key="i" :title="i.toString()"></vueper-slide>
      </vueper-slides>
    </no-ssr>

What else i supposed to do? 🤔 

Installing 1.11.1 (via the method described in #9) results in a document not defined error in nuxt:

   return component;
  }
  /* style inject */
  function __vue_create_injector__$1() {
    var head = document.head || document.getElementsByTagName('head')[0];
    var styles = __vue_create_injector__$1.styles || (__vue_create_injector__$1.styles = {});
    var isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());

    return function addStyle(id, css) {
      if (document.querySelector('style[data-vue-ssr-id~="' + id + '"]')) return; // SSR styles are present.            

I've noticed on first page load, all the slides pile up down the page before suddenly turning into a carousel. Is this the server-side rendered version I'm seeing?

I wonder if there is a way to stop it?

In regards to issue #10, the request is to support server side rendering.

Please note that in Nuxt you can use Vueper Slides by wrapping your slideshow with the <no-ssr> tag. (refer to issue #6)

is there a way to add a click even on the btn inside the .content

for example this is my code

<vueper-slide v-for="(categoryImg, i) in category.imgs" :key="i"
  :title="categoryImg.imgName" :image="categoryImg.imgUrl"
    :content="categoryImg.content"></vueper-slide>

part of my object which has content

{
  imgName: 'car 1',
   imgUrl: require('../assets/images/budget_car/img1.png'),
   content: '<button v-on:click="say()">Say hi</button>'
               }

and here is the function say()

,
        methods: {
            say: function () {
                console.log('dasd')
            }
        }

i tried it but it is not working

screenshot of what i am trying to do

Is there a possibility to make click handlers work inside a single slide?

If not, do you have a workaround for this?

Thanks.

Cause "ReferenceError: document is not defined" when use with Nuxt.js

Hi,
This is a great project and really good work. But I was wondering how this can be used with Nuxt JS and how well does it play with SSR? Can you share a small gist about how it can be used with Nuxt JS?

Hi tnx for the component.
Im struggling to make the images rounded , I got :slideImageInside=true but now if i try to manipulate the css in my vue file it doesnt take effect and i dont even know if thats the right place im doing it 😄 would appreciate any help.
Thanks.

Hi,

It states in the docs that the default css is barebones / minimal css. It's quite barebones, but it has this near impossible to-track down box-shadow:

-webkit-box-shadow:0 0 20px rgba(0,0,0,.25);box-shadow:0 0 20px rgba(0,0,0,.25);

on the before and after pseudo-elements of the parallax wrapper, which requires a fair bit of css jiggery-pokery to get rid of.

More of a recommendation, but none of my designs have that, so I always have to remove it using css overrides. It would be great if it was an optional "enhancement" rather than a default :)

Related to #27, when vueper-slides is touchable, the drag and drop produce click event and follow the link. Is it possible to prevent click event if drag started ?

<vueper-slides> <vueper-slide link="/" ></vueper-slide> </vueper-slides>

I am not sure, if the following is an issue or intended behavior.
Is it not possible to have images as slide content. (Not as background image.).
The problem with background image is the complete image cannot not shown sometimes.

Can we name bullets for better accessibility?

When I set fade to true, transitionSpeed seems unaffected; slides change at the default fade speed.

Current version breaks nuxt because it forces the vue dependency to .16 when nuxt uses .17

Package shouldn't include Vue by itself, because the hosting application will provide it.

Hi,
when :bullets="false" is used, bullets property is undefined, and therefore the condition linked below throws an error (e.g. cannot read property 2 of undefined).

I am getting this error:

[Vue warn]: Error in mounted hook: "TypeError: Cannot read property '$slots' of undefined"

when using like this:

    <vueper-slides v-if="photos" fixed-height="100vh" :arrows="false" :bullets="false" :autoplay="true" :transitionSpeed="800"
        :speed="8000" :touchable="false">
        <vueper-slide v-for="photo in photos" :image="photo.url"></vueper-slide>

    </vueper-slides>

Rather than indicating the number of items I would like to display, I would like to specify the spacing between and then render as many as will fit within the provided space and cut off (or fade away) any overflowing content.

The approach makes things simpler with responsive design.

Is this already possible? And I'm missing it?

The use case I have for carousels most of the time is for mobile / tablet only, and displaying the full content at higher breakpoints, completely removing the carousel at that point.

It would be very useful to have a breakpoint event to do this - unwrap / remove all the markup / events and just leave the slides' content on the page to be styled as needed at that breakpoint.

As far as I can see, this isn't possible in the current version?

I could just duplicate and hide / show the carousel / content, but that's not DRY by any means...

URL should be wrapped in quotes.

Sorry, me again. I've just upgraded to version 1.13.1 simply by typing:

npm install --save-dev vueperslides@latest and if I do so and try to run the application I can't view it any more, instead I get:

Cannot GET /

I just find out that disableArrowsOnEdges blocks the keyboard arrows until you changes to the next slide.

Reproduce:

• Load the page where your slider is.
• Try to move using the keyboard arrows
• Move manually or using the carousel controllers (bullets, arrows) to the next slide
• Hit again the keyboard arrows

I'd like a possibility to have stationary titles/content with a parallax background. Right now, I can kind of simulate this with slideContentOutside and then absolutely position it over the background, but it's a rather convoluted solution to this issue.

getting errors when using it with typescript

Hi At the beginning I set autoplay true. In some events, I changed it to false. Everything works fine until I want to continue sliding and setting autoplay true again.
I want stopOnClick($time);

if I stopped/freeze animation I wanted to change all slides in the carousel is it possible?

I have touchable set to false by default and I only want it to become true at the mobile level, so I've set it as an option within a breakpoints object, but even when I reach it, the default value still persists.

[Vue warn]: Invalid prop: type check failed for prop "initSlide". Expected , got Number.

found in

--->
at D:\Project\Datauniverse\2019\antiscam\partner.antiscam.co.kr\src\components\web2.vue

[Vue warn]: Invalid prop: type check failed for prop "slideRatio". Expected , got Number.

found in

--->
at D:\Project\Datauniverse\2019\antiscam\partner.antiscam.co.kr\src\components\web2.vue

[Vue warn]: Invalid prop: type check failed for prop "speed". Expected , String, got Number.

found in

--->
at D:\Project\Datauniverse\2019\antiscam\partner.antiscam.co.kr\src\components\web2.vue

[Vue warn]: Invalid prop: type check failed for prop "transitionSpeed". Expected , String, got Number.
[Vue warn]: Invalid prop: type check failed for prop "initSlide". Expected , got Number.
......

occured in IE11

how can I solve these problems

Hey @antoniandre,

Great component. I'd love to use it in my app if this bug gets fixed. Here's some code with the problem:

<vueper-slides
    :visible-slides="3"
    slide-multiple
    :slide-ratio="1/4"
    :dragging-distance="200"
    :breakpoints="{ 1500: { visibleSlides: 2 }, 1050: { visibleSlides: 1 } }">
    <vueper-slide v-for="i in 5" :key="i" :title="i.toString()"></vueper-slide>
  </vueper-slides>

As you can see, I'm changing the amount of visible slides depending on the screen size. It works well, except I'm seeing an extra slide (the last one) being duplicated and put in at the beginning.

I've modified the example codepen to show this problem, the arrows aren't showing up for some reason, but whatever - https://codepen.io/anon/pen/LwPMJw

Exact steps to repro with the codepen:

• Reduce your browser window until only one slide is showing
• (Notice that for some reason it scrolls to slide 2)
• Scroll to the right through the entire slide deck (until you see slide 1)
• (Notice the blank slide in there)
• Increase your browser window and notice that slide 5 has been duplicated and placed at the beginning before slide 1

Please let me know if you can get to this soon, I'd really like to use this component 😄

• Operating System: MacOS
• Node Version: 10.16.2
• NPM Version: 5.6.0
• Vueper Slides Version: 1.20.1

Expected Behavior

Both formats <div slot="slideContent"> and <template v-slot:slideContent> work.

Actual Behavior

(1) slot format

<div slot="slideContent"> format:

<VueperSlides>
  <VueperSlide
    v-for="(image, index) in images"
    :key="index"
  >
    <div slot="slideContent">
      <a
        :href="image.link"
        :style="{ 'background-image': `url(${image.url})` }"
        target="_brank"
      />
    </div>
  </VueperSlide>
</VueperSlides>

It works.

(2) v-slot format

<template v-slot:slideContent> format:

<VueperSlides>
  <VueperSlide
    v-for="(image, index) in images"
    :key="index"
  >
    <template v-slot:slideContent>
      <div>
        <a
          :href="image.link"
          :style="{ 'background-image': `url(${image.url})` }"
          target="_brank"
        />
      </div>
    </template>
  </VueperSlide>
</VueperSlides>

A blank is displayed.

Memo

VNode.elm property is used in Vueper Slides.

• https://github.com/antoniandre/vueper-slides/blob/v1.20.0/src/components/vueperslides/vueperslides.vue#L297

const { elm: elmC = {} } = slideContent[0]

Unfortunately v-slot directive format does NOT support VNode.elm 😢

(VNode.elm is undefined)

• vuejs/vue#9580 (comment)

I don't think additional context is needed.

Hello,
When i generate report in lighthouse i get this report : Does not use passive listeners to improve scrolling performance (Consider marking your touch and wheel event listeners as passive to improve your page's scroll performance.)
https://developers.google.com/web/tools/lighthouse/audits/passive-event-listeners?utm_source=lighthouse&utm_medium=extension
And i found that the problem comes from this file :

I think it will be awesome if you can add {passive : true} for touch and wheel listeners as bellow :

Is there an official way to pause & resume autoplay? by setting autoplay to true/false doesn't really work for me.

What's the official way for goToSlide? by calling the method directly breaks the whole thing.

Many Thanks!

Hi @antoniandre,

Your slider/carousel looks promising.
Do you plan to support multiple items? (like on slick http://kenwheeler.github.io/slick/)

Thank you.