<template>

    <div class="page_content_container item_container">

        <div class="news_listings_container mb-5">

            <div class="news_body ">

                <swiper :options="swiperOption"   ref="mySwiper">

                    <swiper-slide class="m-5" style="border: 4px dotted yellow !important; background-color: cyan !important;
                        max-width: 500px !important;">Slide 2</swiper-slide>
                    <swiper-slide class="m-5" style="border: 4px dotted yellow !important; background-color: cyan !important;
                        max-width: 500px !important;">Slide 3</swiper-slide>
                    <swiper-slide class="m-5" style="border: 4px dotted yellow !important; background-color: cyan !important;
                        max-width: 500px !important;">Slide 4</swiper-slide>
                    <div class="swiper-pagination" slot="pagination"></div>
                    <div class="swiper-button-prev" slot="button-prev"></div>
                    <div class="swiper-button-next" slot="button-next"></div>
                </swiper>

            </div>

        </div><!-- <div class="news_listings_container mb-4"> -->

    </div> <!-- 	<div class="page_content_container"> -->

</template>

<script>
    import {bus} from '../../../app';
    import appMixin from '../../../appMixin';

    import Vue from 'vue';
    import Vue2Filters from 'vue2-filters' 
    Vue.use(Vue2Filters)


    import 'swiper/dist/css/swiper.css'
    import {swiper, swiperSlide} from 'vue-awesome-swiper'


    export default {
        components: {
            swiper,
            swiperSlide
        },
        data: function () {


            return {

                swiperOption: {
                    slidesPerView: 1,
                    spaceBetween: 30,
                    keyboard: {
                        enabled: true,
                    },
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true
                    },
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev'
                    }
                }
            }

        },
        name: 'TopNewsList',


        mounted() {
            this.setAppTitle('News', 'News', bus);
        }, // mounted() {


        mixins: [appMixin, Vue2Filters.mixin],

        methods: {}, // methods: {

        computed: {

            swiper() {
                return this.$refs.mySwiper.swiper
            },


            
        } //computed: {

    }


</script>

<style lang="scss" scoped>
    @import "./resources/sass/_variables.scss";

    .row_with_centered_cells {
        display: flex;
        font-size: 0.85em;
        width: 100%;

        justify-content: space-around;
        align-items: center;

        margin-top: 10px;
        border: 2px solid blue !important;
    }

    .swiper-pagination {
        margin-top: 20px;
        background-color: cadetblue !important;
    }
    .swiper-button-prev {
        background-color: lightblue !important;
    }
    .swiper-button-next {
        background-color: olive !important;
    }


</style>