vue-carousel: Bug: slideClick events not firing

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 <slider… but this not work


<!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>

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 1
Comments: 20 (8 by maintainers)

Most upvoted comments

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

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

wait your response please 😉

hdkcreative on Jul 27, 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 Nov 6, 2018

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 May 17, 2019

@ERPedersen @quinnlangille Thank you guys!

rico-ocepek on Jan 31, 2019

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

quinnlangille on Jan 31, 2019

@hdkcreative Hi, I achieved that see below this code

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 Jul 26, 2018