Vue-carousel: Bug: slideClick events not firing

Created on 25 Jul 2018 · 20Comments · Source: SSENSE/vue-carousel

we tried to add the link to any web page different by slide..

but is not working..

we code 👍

what is wrong ?

what additional file is required ?

we add the @slideClick="handleSlideClick" in


<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Vue Carousel - Navigation example</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <meta name="viewport" content="width=device-width, initial-scale=1">
      <script type="text/javascript" src="https://ssense.github.io/vue-carousel/js/vue-carousel.min.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
  <style type="text/css">
    #container {
  padding: 0 60px;
}

.VueCarousel-slide {
  position: relative;
  background: #42b983;
  color: #fff;
  font-family: Arial;
  font-size: 24px;
  text-align: center;
  min-height: 100px;
}

.label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
  </style>

  <script type="text/javascript">
 Vue.config.devtools = true
 window.onload=function(){


new Vue({
  el: '#example',
  components: {
    'carousel': VueCarousel.Carousel,
    'slide': VueCarousel.Slide
  },


   methods: {
                handleSlideClick: function(dataset){
                   alert(dataset.index, dataset.name)

                }
    },

  //template: '<div @click:slideClick="handleSlideClick"><carousel navigationEnabled="false">' + buildSlideMarkup(10) + '</carousel></div>'
   template : 
   '<carousel navigationEnabled="true">'+
   '<slide data-index="0" data-name="MySlideName" @slideClick="handleSlideClick"> Slide 1 Content</slide>'+
   '<slide data-index="1" data-name="MySlideName" @slideClick="handleSlideClick"> Slide 2 Content</slide>'+
   '<slide data-index="2" data-name="MySlideName" @slideClick="handleSlideClick"> Slide 3 Content</slide>'+
   '<slide data-index="3" data-name="MySlideName" @slideClick="handleSlideClick"> Slide 4 Content</slide>'+
   '</carousel>'

});

    }

</script>

</head>
<body>
  <div id="container">
  <div id="example"></div>
</div>


</body>
</html>

bug help wanted

Source

hdkcreative

👍1

Most helpful comment

Thanks for your answer @pratiksingh05 , I managed to solve this with a local stored fork renaming slideClick to slideclick as suggested in #310.

sebastienbarbier on 6 Nov 2018

👍3

All 20 comments

@hdkcreative Hi, I achieved that see below this code

:scrollPerPage="true" :autoplayTimeout="5000" :autoplay="true" :mouse-drag="mouseDrag"
:loop="true" @pageChange="onPageChange" >

To add @pagechange event on carousel and in JS side:

onPageChange: function (val) {
var currentIndex = val + 1; // Alerts counter with respect to total count, Ex. (1 of 4),(2 of 4)
}

val is value of currentIndex position number so you can use as page number

Let me know if any quries

pratiksingh05 on 26 Jul 2018

👍1

Hey @hdkcreative, just test and it seems there is a bug with slideClick at the moment. Based on the issues we usually get, it's not a hugely used feature and we're missing tests for it so not 100% when it was introduced. I'll switch this to a bug fix request, and see if we can get it fixed

In the meantime, does @pratiksingh05 solution help you out?

quinnlangille on 26 Jul 2018

@quinnlangille Yes! it'll work for me so definitely it'll work if he implements.

pratiksingh05 on 26 Jul 2018

hi @pratiksingh05 , you can add your code a fiddle or codepen for example please ?

hdkcreative on 26 Jul 2018

Hey @hdkcreative, just test and it seems there is a bug with slideClick at the moment. Based on the issues we usually get, it's not a hugely used feature and we're missing tests for it so not 100% when it was introduced. I'll switch this to a bug fix request, and see if we can get it fixed

In the meantime, does @pratiksingh05 solution help you out?

thank you @quinnlangille , we can wait for this ! :)

hdkcreative on 26 Jul 2018

I am unable to reproduce this error using the above code. The events are working as intended for me. I have tested in Chrome, Firefox and Edge on a Windows 10 machine.

Can someone provide a fiddle with an example?

ERPedersen on 27 Jul 2018

hi @ERPedersen , thank you for response, you can check the code in 👍

https://codepen.io/hdkcreative/pen/wxrLop

wait your response please ;)

hdkcreative on 27 Jul 2018

👎2 👍1

Any update on this issue ? Tried today but couldn't make slideClick work.

sebastienbarbier on 6 Nov 2018

All right, works with latest vue if we rename the event slideclick instead of slideClick. Might be related to #310

sebastienbarbier on 6 Nov 2018

Any update on this issue ? Tried today but couldn't make slideClick work.

No, it worked for me if you see above my example that will work for you as well
Just add within the carousel block of code @sebastienbarbier

slide v-for="(item, index) in YourArrayData " :key="index"
// Here you add your div which you want to show
slide

above code(slide) is follow <> tag, which is not showing after post this blog

Note:- Nevertheless It'd be default behavior of slide to show both the side arrow for slide and just need to use a click event of the side arrow to make sure your page will change and get reflected in your screen

Need to do:- :scrollPerPage="true" and :loop="true" on carousel tag

Let me know if it's not work.

pratiksingh05 on 6 Nov 2018

Thanks for your answer @pratiksingh05 , I managed to solve this with a local stored fork renaming slideClick to slideclick as suggested in #310.

sebastienbarbier on 6 Nov 2018

👍3

Hey @sebastienbarbier @pratiksingh05, the difference is likely related to the projects vue version. I'm not 100% on this because their docs are fuzzy here, but I'm pretty sure at some point they deprecated camel and snake case event naming.

I can confirm that on my local slideClick does not work and slideclick does. There is a PR up to resolve this in the docs/event name to make the development experience around this better. Will ping here once it's released!

quinnlangille on 11 Nov 2018

Any news with this one?
The slideClick event is still not working and it took me almost an hour to figure out that I need to use slideclick instead

rico-ocepek on 30 Jan 2019

@rico-ocepek

It's fixed in https://github.com/SSENSE/vue-carousel/pull/361, but isn't merged yet

ERPedersen on 30 Jan 2019

Merging that today! Sorry it was hanging for so long, it's been a crazy week lol

quinnlangille on 31 Jan 2019

👍1

@ERPedersen @quinnlangille Thank you guys!

rico-ocepek on 31 Jan 2019

👍1

Does this problem solved? Because it seems I still have the problem even though I change slideClick to slideclick ? I try to use the https://codepen.io/hdkcreative/pen/wxrLop from above, and change the @slideClick to @slideclick and nothing happen when I sliding through the carousel, or press the prev next button

keviinnch on 14 May 2019

Does this problem solved? Because it seems I still have the problem even though I change slideClick to slideclick ? I try to use the https://codepen.io/hdkcreative/pen/wxrLop from above, and change the @slideClick to @slideclick and nothing happen when I sliding through the carousel, or press the prev next button

You should use slideclick in the <slide> tag.
Like this:
slide.screen(v-for="(img, index) in images" :key="index" @slideclick="openScreen(img)")

vedees on 17 May 2019

This seems to be totally resolved based on a: the number of answers here and , b: not hearing back from anyone. Will close now, thanks for your help guys!

quinnlangille on 29 May 2019

Camel-case doesn't work for props. The Documentation needs to be updated.
use the following:

navigation-enabled instead of navigationEnabled
navigation-next-label instead of navigationNextLabel
navigation-prev-label instead of navigationPrevLabel