gs-shop/vue-slick-carousel

🚥Vue Slick Carousel with True SSR Written for ⚡Faster Luxstay

vue-slick-carousel's Issues

Cannot read property '$el' of undefined on resizing window

in the responsive example, see the error while resizing the window.

InnerSlider.js:305 Uncaught TypeError: Cannot read property '$el' of undefined
    at VueComponent.resizeWindow (InnerSlider.js:305)
    at VueComponent.<anonymous> (InnerSlider.js:299)
    at invokeFunc (index.js:160)
    at trailingEdge (index.js:207)
    at timerExpired (index.js:195)

add gh-pages

make static, showing SSR results.

slideToShow is not working on vertical mode

migrate to gs-shop org

update docs

• email
• package.json meta
• license
• copyright
• readme links

🚑 npm registry trouble for 1.0.0-beta.2, 1.0.0-beta.3

error https://registry.yarnpkg.com/vue-slick-carousel/-/vue-slick-carousel-1.0.0-beta.2.tgz: Extracting tar content of undefined failed, the file appears to be corrupt: "Unexpected end of data"
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

wait for recovery.

package.json meta

• license
• description
• keyword
• homepage
• bugs
• author
• repository

type script definition required

Error in render: "TypeError: Cannot read property 'filter' of null"

TypeError: Cannot read property 'filter' of null
    at VueComponent.settings (VueSlickCarousel.js:36)
    at Watcher.get (vue.runtime.esm.js:4473)
    at Watcher.evaluate (vue.runtime.esm.js:4578)
    at Proxy.computedGetter (vue.runtime.esm.js:4830)
    at Proxy.render (VueSlickCarousel.js:184)
    at VueComponent.Vue._render (vue.runtime.esm.js:3542)
    at VueComponent.updateComponent (vue.runtime.esm.js:4060)
    at Watcher.get (vue.runtime.esm.js:4473)
    at Watcher.run (vue.runtime.esm.js:4548)
    at flushSchedulerQueue (vue.runtime.esm.js:4304)

add examples

write a couple of examples, maybe to the jsfiddle.net

performance <> stability

Currently, the most significant instability comes from changing props.
This is a reliable way to force the InnserSlider to update as props change by assigning key.

This is not the best way because it can impact performance.
However, since this component is in the early stages, stability may be a priority.

// VueSlickCarousel
render() {
  // ...
  return (
      <InnerSlider
        ref="innerSlider"
        {...{ props: settings }}
        key={JSON.stringify(settings)}>
        {newChildren}
      </InnerSlider>
    )
}

For now, the "key guard" for stability will be used.
For the future, see the performance impact, and keep trying to fix the bugs on props change, consider removing the guard.

document settings

missing fonts & svg

• ./ajax-loader.gif in ./node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/vue-slick-carousel/dist/slick-theme.css
• ./fonts/slick.eot in ./node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/vue-slick-carousel/dist/slick-theme.css
• ./fonts/slick.svg in ./node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/vue-slick-carousel/dist/slick-theme.css
• ./fonts/slick.ttf in ./node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/vue-slick-carousel/dist/slick-theme.css
• ./fonts/slick.woff in ./node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/vue-slick-carousel/dist/slick-theme.css

#37 breaks
the theme css requires fonts and svg.
don't want to copy all those assets.
revert.

autoplay is not working if enable the setting by changing props

try switch to "auto play" tab from the other tab.

duplicated key for multiple rows example

main.js:18 [Vue warn]: Duplicate keys detected: 'postcloned4'. This may cause an update error.

found in

---> <VueSlickCarousel>
       <VContent>
         <ExamplesPage> at demo/pages/examples/index.vue
           <VApp>
             <App> at demo/App.vue
               <Root>

replace jsx settings to named slots

settings easing

the setting is not useful.
leaked in from the slick-carousel.
remove it.

Uncaught TypeError: Cannot read property '$el' of undefined

resizeWindow call after the element is destroyed.

InnerSlider.js:326 Uncaught TypeError: Cannot read property '$el' of undefined
    at VueComponent.resizeWindow (InnerSlider.js:326)
    at VueComponent.<anonymous> (InnerSlider.js:319)
    at invokeFunc (index.js:160)
    at trailingEdge (index.js:207)
    at timerExpired (index.js:195)

variable width example slide is broken on mobile

it is caused by the larger size of slides than slide width.

rename api

the api names have 'slick' prefix.
eg) slickPrev, slickNext

the prefixes are for distinguishing the method of the component as a jquery plugin.
vue doesn't need this.
consider deprecating these.

document slots & event

Duplicate keys detected: 'originalundefined' error on setting lazyLoad enabled

[Vue warn]: Duplicate keys detected: 'originalundefined'. This may cause an update error.

found in

---> <SliderTrack>
       <InnerSlider>
         <VueSlickCarousel>
           <VContent>
             <ExamplesPage> at demo/pages/examples/index.vue
               <VApp>
                 <App> at demo/App.vue
                   <Root>

add release notes generator

test gitmoji supporting tools

• https://github.com/momocow/semantic-release-gitmoji
• https://github.com/frinyvonnick/gitmoji-changelog

change/fix commit message convensions for gitmoji to find best fit for those tools.

settings focusOnSelect should move the slide center

current behavior moves the selected slide to the leftmost position.
moving the selected slide to the center makes more sense.

consider changing the behavior

settings draggable/swipe/touchMove are possibly redundant

The settings are for handling touch/mouse events for moving slides.
Explanations and codes for those are redundant and not precise.
We need to review and clear things up.

settings lazyLoad type should be string

the setting value should be either 'ondemand' or 'progressive'.

replace callbacks to event

# Settings

• beforeChange
• afterChange
• onEdge
• onInit
• onLazyLoadError
• onReInit
• swipeEvent
• onLazyLoad

# Internal

• InnerSlider.selectHandler called from SliderTrack.focusOnSelect
• InnerSlider.changeSlide called from SliderArrow.clickHandler
• InnerSlider.changeSlide called from SliderDots.clickHandler

e2e test paths are broken

by changing router mode from history to hash by #31

SSR test fails with different slide width

style="width: 100%; left: 0%;">
                  <div
                      aria-hidden="false"
                      class="slick-active slick-current slick-slide"
                      data-index="0"
    -                 style="outline: none; width: 100%;"
    +                 style="outline: none;"
                      tabindex="-1">
                      <div
                          class=""
                          style="">
                          <div

kyuwoo-choi@f285087 breaks the test.

deploy to bit.dev

https://bit.dev/

improve readme

• describe essential features
• show how vue-slick-carousel improves performance with SSR

consider vue as the peerDependency

Cannot read property 'speed' of undefined

InnerSlider.js:346 Uncaught TypeError: Cannot read property 'speed' of undefined
    at HTMLImageElement.image.onload (InnerSlider.js:346)

unwanted demo.html in dist

vertical mode reveals all slides

improve demo page with ssr

funny can not show SSR demo.
need to rebuild demo with SSR.

candidate solution: https://github.com/Akryum/vue-cli-plugin-ssr

settings "slide" not working

akiran/react-slick#1699

embed font in slick theme css

.slick-loading .slick-list
{
    background: #fff url('./ajax-loader.gif') center center no-repeat;
}

/* Icons */
@font-face
{
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;

    src: url('./fonts/slick.eot');
    src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg');
}

ref: #37

mobile center mode shows more slides than configured

desktop

mobile

desktop

mobile

current slide is not centered in vertical center mode

see vertical-swipe-to-slide example

arrow click handler error due to not updating responsive setting

on updating props, got the error.
no responsive settings are updated.

[Vue warn]: Invalid handler for event "click": got null

found in

---> <SliderArrow>
       <InnerSlider>
         <VueSlickCarousel>
           <VContent>
             <ExamplesPage> at demo/pages/examples/index.vue
               <VApp>
                 <App> at demo/App.vue
                   <Root>

wrong arrows & dots with responsive

settings

{
  "dots": true,
  "infinite": false,
  "speed": 500,
  "slidesToShow": 4,
  "slidesToScroll": 4,
  "initialSlide": 0,
  "responsive": [
    {
      "breakpoint": 1024,
      "settings": {
        "slidesToShow": 3,
        "slidesToScroll": 3,
        "infinite": true,
        "dots": true
      }
    },
    {
      "breakpoint": 600,
      "settings": {
        "slidesToShow": 2,
        "slidesToScroll": 2,
        "initialSlide": 2
      }
    },
    {
      "breakpoint": 480,
      "settings": {
        "slidesToShow": 1,
        "slidesToScroll": 1
      }
    }
  ]
}

1024 < size

600 < size <= 1024

xss vulnerability from build/test deps

document migration from slick-carousel

settings className

in vue, classes defined in the component apply to the root element.
consider removing this.

arrow click handler error

error on assigning null to click handler.

pre commit lint/test is required

accidental commits make noise. at least do lint before commit.

https://www.npmjs.com/package/husky

document methods

examples on mobile look ugly

consider including slick styles in dist

import VueSlickCarousel from 'vue-slick-carousel'
import 'vue-slick-carousel/dist/slick.css

is better than

import VueSlickCarousel from 'vue-slick-carousel'
import 'slick-carousel/slick/slick.css

and, we can move the slick-carousel from dep to devDep

write e2e

to confirm settings/apis work.