Bdtjtk

at first, sorry for my bad english.
i'm using vue-slick in my vuejs code,
i had a problem with its style!
when i use a simple div or img or smth , it works great!
but when i use a v-for for my component in it, the style Appearance gets ruined!

i'm using event bus to handle data.
i've already imported slick-carousel style and theme css in my styles.
here you a screenshot from my problem
https://ibb.co/4RgL1nG
https://www.mediafire.com/view/oui50d2e4057wq7/Screenshot_from_2019-01-02_11-12-19.png

 <template>

  <div>

    <div class="container"  style="padding: 0 40px; height: 400px; 

     background-color: #1b1e21">

       <slick

         ref="slick" style="max-width: 100% ;  "

        :options=this.slickOptions>

        <div v-for="pst in posts">

             <div class="council-subject-content-item color 1" 

             @click="openPost(pst._id, pst.authorId)">

             <div class="title-image"></div>

            <h4 class="black-color">{{pst.title}}</h4>

            <h5>{{pst.superParentName}}</h5>

            <p class="black-color">

              {{pst.content[0].text}}{{pst.content[0].text}}

            </p>

            <div class="profile-image"></div>

            <span class="name regular-ir">{{pst.authorName}} 

 </span>

            <div class="council-subject-footer background-1">

              <span class="right number">{{pst.commentNum}}</span>

              <img class="right" 

src="../../images/consultation/comment2.svg" style="width: 20px">

              <img class="left" 

src="../../images/consultation/viewed.svg" style="width: 

24px;margin-top: 2px;">

                  <span class="left number">{{pst.seenNum}}</span>

            </div>

          </div>

        </div>

      </slick>

    </div>

     </div>

   </template>



 <script>

  import slick from 'vue-slick'

  import {eventBus} from "../../main";

  import axios from 'axios'



  export default {

    data: function () {

      return {

        posts: {},

        slickOptions: {

          slidesToShow: 4,

          centerMode: true,

          dots: true,

          arrows: true,

          responsive: [

            {

              breakpoint: 1024,

              settings: {

                slidesToShow: 3,

                slidesToScroll: 3,

               infinite: true,

                dots: true

              }

            },

             {

              breakpoint: 600,

              settings: {

                slidesToShow: 2,

                slidesToScroll: 2

              }

            },

            {

              breakpoint: 480,

              settings: {

                slidesToShow: 1,

                slidesToScroll: 1

              }

            }

          ]

        }

      }

    },

    beforeMount() {



axios.get('https://www.test.magisterapp.ir/v2/student/post/all/1-5?sortby=seenNum')

        .then(res => {

          this.posts = res.data.posts

        })

        .catch(error => {

          console.log(error)

        })

    },

    methods: {

      createRandClass() {

        let color = math.floor((Math.random() * 4) + 1);

        return "color" + color

      },

      openPost(id, teacherId) {

        console.log(id)

        this.$router.push({

          name: "blogPost",

          query: {

            "id": id

          },

          params: {

            "teacherId": teacherId

          }

        })

      }

    },

    components: {

      slick

    }



  }

</script>