108 lines
3.2 KiB
Vue
108 lines
3.2 KiB
Vue
<template>
|
||
<hooper
|
||
ref="carousel"
|
||
style="height: auto;"
|
||
:infiniteScroll="true"
|
||
:autoPlay="autoplay"
|
||
:playSpeed="7000"
|
||
:transition="800"
|
||
:wheelControl="false"
|
||
:mouseDrag="false"
|
||
:touchDrag="false">
|
||
<slide v-for="(slide, key) in oSlides" :key="slide.id">
|
||
<div class="content">
|
||
<div class="text">
|
||
<p class="catch" v-html="slide.catch_phrase" :style="'color: ' + slide.catch_color"></p>
|
||
<h1 v-if="!key" class="title" v-html="slide.title" :style="'color: ' + slide.title_color"></h1>
|
||
<p v-if="key" class="title" v-html="slide.title" :style="'color: ' + slide.title_color"></p>
|
||
<a :href="slide.link" :target="slide.new_tab === 1 ? '_blank' : '_self'" class="btn" :style="'background-color: ' + slide.link_color">{{ slide.link_label }}</a>
|
||
</div>
|
||
<!-- TODO : GESTION IMG SI MOBILE -->
|
||
<picture>
|
||
<source media="(max-width:500px)" :srcset="slide.picture_r">
|
||
<img :src="slide.picture" alt="Image - Le Gaulois">
|
||
</picture>
|
||
</div>
|
||
</slide>
|
||
<div class="hooper-navigation" slot="hooper-addons">
|
||
<button type="button" class="hooper-prev" @click="slide('prev')">‹</button>
|
||
<button type="button" class="hooper-next" @click="slide('next')">›</button>
|
||
</div>
|
||
</hooper>
|
||
</template>
|
||
|
||
<script>
|
||
import { Hooper, Slide, Navigation as HooperNavigation } from 'hooper2';
|
||
import 'hooper2/dist/hooper.css';
|
||
|
||
export default {
|
||
components: {
|
||
Hooper,
|
||
Slide,
|
||
HooperNavigation
|
||
},
|
||
mounted() {
|
||
this.oSlides = JSON.parse(this.slides);
|
||
|
||
setTimeout(() => {
|
||
this.autoplay = false;
|
||
},6000)
|
||
},
|
||
props: [
|
||
'slides'
|
||
],
|
||
data(){
|
||
return {
|
||
'oSlides': [],
|
||
autoplay: true
|
||
}
|
||
},
|
||
methods: {
|
||
slide(direction){
|
||
if (direction === 'next') {
|
||
this.$refs.carousel.slideNext();
|
||
}else{
|
||
this.$refs.carousel.slidePrev();
|
||
}
|
||
this.$refs.carousel.restart();
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import "../../../sass/_variables.scss";
|
||
.hooper:hover {
|
||
& .hooper-next, .hooper-prev {
|
||
opacity: 0.5;
|
||
}
|
||
}
|
||
.hooper-prev {
|
||
left: 10px;
|
||
}
|
||
.hooper-next {
|
||
right: 10px;
|
||
}
|
||
.hooper-next, .hooper-prev {
|
||
user-select: none;
|
||
color: #4e3238 !important;
|
||
font-size: 3rem;
|
||
font-family: "Veneer" !important;
|
||
line-height: 0em !important;
|
||
background-color: white;
|
||
border-radius: 50%;
|
||
opacity: 0;
|
||
width: 2.5rem;
|
||
height: 2.5rem;
|
||
padding: 0 0 0.4rem 0;
|
||
position: absolute;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
cursor: pointer;
|
||
transition: opacity 0.5s;
|
||
|
||
@include max-width($mobile) {
|
||
opacity: 0.5;
|
||
}
|
||
}
|
||
</style>
|