<template>
    <div  class="fullwidth" >
        <b-carousel id="main-slider"
                    style="text-shadow: 1px 1px 2px #333;height: 90vh;"
                    controls
                    indicators
                    background="#ababab"
                    :interval="4000"  

                    v-model="slide"
                    @sliding-start="onSlideStart"
                    @sliding-end="onSlideEnd"
                    >

            <!-- Text slides with image -->
            <b-carousel-slide caption="Autyzm"
                              text=" "
                              img-src="/static/img/img3.jpg"
                              ></b-carousel-slide>


            <!-- Slides with image only -->
            <b-carousel-slide img-src="/static/img/img2.jpg">
            </b-carousel-slide>
            <b-carousel-slide img-src="/static/img/img4.jpg">
            </b-carousel-slide>
            <b-carousel-slide img-src="/static/img/img5.jpg" style="object-position: bottom;">
            </b-carousel-slide>
            <b-carousel-slide img-src="/static/img/img1.jpg">
            </b-carousel-slide>
            <!-- Slides with img slot -->
            <!-- Note the classes .d-block and .img-fluid to prevent browser default image alignment -->


        </b-carousel>
        <div style="padding: 5% 0%">
        <div class="quotation">
            <div>
            <p class="q-text">
                <q>Naszym zadaniem jako nauczycieli osób autystycznych jest przede wszystkim zobaczenie świata z ich perspektywy i wykorzystanie tej perspektywy, by nauczyć ich funkcjonować  w naszej kulturze jak najbardziej samodzielnie.</q>
            </p>
            <p class="q-author">
                Gary B. Mesibov
            </p>
            </div>
        </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'MainPage',
        data() {
            return {
                msg: 'HomePage',
                slide: 0
            }
        }
    }
</script>
<style>

 
</style>
<style scoped>
.navbar {position:fixed !important;background:red}
.img-fluid{object-position: inherit;} 
</style>

