Looking to accomplish
Vue.js 2.6.10
ruby 2.6.5
rails 6.0.3
Greetings, wanderer.
I have utilized the Vue library along with vue-slick-carousel to craft the slides.
https://github.com/gs-shop/vue-slick-carousel
However, there seems to be an issue where the button on the slide is clickable in Chrome but not in Safari (it appears hidden upon hovering). Occasionally, repeatedly clicking on it may initiate the action.
Here's a glimpse of the source code below.
I would greatly appreciate if you could shed light on the root cause and potential solution.
Chrome
https://i.sstatic.net/AyYYz.gif
Safari
https://i.sstatic.net/1gTaF.gif
Source code for arrow buttons
https://i.sstatic.net/IU5c3.png
Code
SlickCarouselMixin.vue
<script>
import SlickCarousel from 'vue-slick-carousel'
import 'vue-slick-carousel/dist/vue-slick-carousel.css'
import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css'
export default {
components: {SlickCarousel},
data: function () {
return {
slickOptions: {
dots: true,
arrows: true,
swipe: false,
slidesToScroll: 3,
slidesToShow: 3,
infinite: false,
speed: 1000,
},
}
}
}
</script>
<style>
.slick-prev, .slick-next{
width: 0;
height: 0;
position: absolute;
top: 40%;
}
.slick-prev{
left: -30px;
}
.slick-next{
right: 0;
}
.slick-prev:before, .slick-next:before {
font-family: "Font Awesome 5 Free";
font-size: 90px;
color: #c7c7c7;
line-height: 1;
text-rendering: auto;
display: inline-block;
font-style: normal;
font-variant: normal;
}
.slick-prev:before {
content: "‹";
}
.slick-next:before {
content: "›";
}
.slick-prev.slick-disabled, .slick-next.slick-disabled {
pointer-events: none;
opacity: 0;
}
.slick-dots li.slick-active button:before {
color: #86bc25;
}
.slick-slide > div {
margin: 0.5rem;
}
.slick-slide li > a {
padding: 1.25rem;
}
</style>
Show.vue
<template>
<div>
<div class="m-3 p-3">
<SlickCarousel v-bind="slickOptions" class="other-item-list">
<li v-for="test in tests">
・・・
</li>
</SlickCarousel>
</div>
</div>
</template>
<script>
import SlickCarousel from "../../../common/SlickCarouselMixin"
export default {
mixins: [SlickCarousel],
・・・
</script>
<style>
.lb-nav a.lb-prev, .lb-nav a.lb-next {
width: 50%;
}
.fadeIn {
animation: fadeIn 0.4s;
}
</style>