https://casadecultura.org/View/ModulesVue/Web/NoticiesCarrousel/NoticiesCarrousel.js?1790282715

1Vue.component('noticies-carrousel', {        
2    props: {        
3        InputDades: Array                
4    },          
5    data: function() {
6        return { TotesNoticies: [], Boletes: [], IndexNoticiaActual: 0 }
7    },    
8    computed: {
9    },
10    watch: {              
11        InputDades: {
12            deep: true,
13            immediate: true,
14            handler(NoticiesArray) {
15                NoticiesArray.forEach((item, index) => {                
16                    this.TotesNoticies.push(item);
17                    this.Boletes.push(index);                                        
18                });      
19                
20                this.VesANoticia( 0 );                                
21                this.gMouCarrousel( 0 );
22                
23            }
24        }
25    },
26    methods: {
27        gMouCarrousel: function(index) {
28            
29            setTimeout(() => {                    
30                index = ( index == this.TotesNoticies.length ) ? 0 : index;
31                this.VesANoticia( index ); 
32                index++;
33                this.gMouCarrousel( index );
34            }, 5000);
35        },
36        getClassBola: function( indexNoticia ) {
37            if(indexNoticia == this.IndexNoticiaActual) {
38                return 'fas fa-circle noticies_bola_blanca';
39            } else {
40                return 'fas fa-circle noticies_bola_gris';
41            }            
42        },
43        VesANoticia: function(nouIndex) {                        
44            if(nouIndex >= 0 && nouIndex < this.TotesNoticies.length) this.IndexNoticiaActual = nouIndex;
45            else this.IndexNoticiaActual = 0;            
46        }        
47
48    },        
49    template: `        
50
51    <!-- REQUADRE VERTICAL -->
52    <section class="noticies_section_style" v-if="TotesNoticies.length > 0">
53                                
54        <article class="noticies_requadre">        
55            <h2 class="noticies_titol" v-html="TotesNoticies[ IndexNoticiaActual ].Titol"></h2>
56            <div class="noticies_text" v-html="TotesNoticies[ IndexNoticiaActual ].Text"></div>
57        </article>
58    
59        <ul class="noticies_grup_paginacio" v-if="TotesNoticies.length > 1">
60            <li class="noticies_paginacio" v-for="(P, index) of TotesNoticies" >                
61                <a @click="VesANoticia(index)" ><i :class="getClassBola(index)"></i></a>
62            </li>
63        </ul>
64                        
65    </section>
66
67
68                `
69});