Slide area not visible

[Rahulgans]

`import slick from 'vue-slick';

export default { name: 'search-listing-component', components:{searchFilter,slick}, data(){ return { listingData:[], slickOptions:{ slidesToShow:2, horizontal:true, arrows:true } } },`

MY VIEW CODE. I am using Bootstrap 4.

<div class="col-12 col-lg-5 mt-md-5 pl-3 pr-2"> <div class="row"> <div class="col"> <slick ref="slick" :options="slickOptions"> <img class="img-fluid d-block col-6" src="@/assets/list1.png" /> <img class="img-fluid d-block col-6" src="@/assets/list1.png" /> </slick> </div> </div>

Nothing appears on the page. When I inspect on developer tools, I am able to see the classes concerned with slick

[adamhughes86]

I had this same issue. The DOM was showing everything loaded but I couldn't see much

My issue was that I was importing the Slick styles into a scoped CSS block, therefore the CSS would not affect the Slick elements as they are in a different component

Moving the Slick CSS import to a global location fixed it for me

[CydGoblin]

In order to target children with CSS selectors in a parent using Scoped CSS, you need to add the /deep/ selector to the beginning of your selector statement.

<style scoped>
  /deep/ .child {
    background-color: blue;
  }
</style>