Editor.DomComponents.addType('october-swiper', {
                    isComponent: el => {
                        if (el.attributes) {


                            if(el.attributes.getNamedItem('october-swiper')) {
                                var r = el.attributes.getNamedItem('october-swiper').value;
                                 console.log(el);

                                if(r == '1'){

                                    return true;
                                }

                            }

                        }

                    },
                    model: {
                        defaults: {
                            traits: [
                            'id',
                            {
                                type: 'select',
                                name: 'swiper',

                                options:  [
                                    'homepage',
                                    'experience',
                                    'courchevel',
                                    'bien-etre'
                                ]
                            },

                            ]

                        },
                        init() {
                            this.on('change:attributes:swiper', this.handleChange);
                            this.handleChange();
                        },
                        handleChange() {
                            const swiper = this.getAttributes().swiper;



                            if(this.getAttributes()['october-swiper'] == '1'){

                                if (swiper) {


                                    this.attributes['content'] = '';
                                    this.components(`{% partial 'carousel' scope='${swiper}' %}`);



                                } else {
                                    this.attributes['content'] = '';
                                    this.components(`Select swiper`);
                                }
                            }
                        }
                    }
                });

                Editor.BlockManager.add('october-swiper-block', {
                    label: 'Slider',
                    category: 'Components',
                    content:`<div data-gjs-type="october-swiper" october-swiper="1" ></div>`,
                    attributes: {
                        class: 'fa fa-code'
                    }
                });