modify slick.min.js or slick.css

[ahmed_chouihi]

I am working with slick carousel on Magento 1.9 this is the current render

This is the render that I want to have

The color code is :

Blue -> Product Image

Red  -> Product Name and Description below

Green -> Price of the Product

I want to modify the width of the products (Css style)

When I have inspected I found that

opacity: 1;width: 960px;transform: translate3d(0px, 0px, 0px);

<div class="slick-track" role="listbox" style="opacity: 1; width: 960px; transform: translate3d(0px, 0px, 0px);"><li class="item slick-slide slick-current slick-active" tabindex="-1" role="option" aria-describedby="slick-slide00" style="width: 192px;" data-slick-index="0" aria-hidden="false">

So to modify the class .slicktrack whether we can modify from this file slick.min.js or slick.css For the file slick.css that is here

   .slick-track
   {    position: relative;    top: 0;    left: 0;    display: block;
   }

and for the slick.min.js

here is the location of piece of code

b.$slider.addClass("slick-slider"),b.$slideTrack=0===b.slideCount?a('<div class="slick-track"/>').appendTo(b.$slider):b.$slides.wrapAll('<div class="slick-track"/>').parent(),b.$list=b.$slideTrack.wrap

I want to know to change the style (width) I should modify the css file or the min.js one

Thanks in advance

[vishi_gulati]

Hello @ahmed_chouihi ,

You don't need to change it in slick.css. Please add your css changes in other custom css which is loaded after slick.css

If it helps you, please accept it as solution and give kudos.

Regards.

[shubham_khandelwal1]

Hi @ahmed_chouihi 

I don't think you need to do changes in slick.css or other files for your customisation.

You should use your custom Css or js if you want to do custom changes.

Please find below links this might help you to set custom css:

Magento 1.9 Add Custom Css 

Hope this helps you.

If my answer is useful, please Accept as Solution & give Kudos
Shubham Khandelwal