Solution 1 :

I had the same issue. After debugging a bit, I found the sizes in HTML were bigger than screen width. Adding the following line to header section fixed my issue:

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

Solution 2 :

switch arrows’ value from false to true for all breakpoints and it should work, as it worked for me. or copy the code:

let slider = $(".slider");

slider.not('.slick-initialized').slick({
  autoplay: false,
  infinite: true,
  vertical: false,
  dots: true,
  arrows: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  customPaging: function(slider, i) {},
  responsive: [{
    breakpoint: 1024,
    settings: {
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: true,
      vertical: false,
    },
  }, {
    breakpoint: 600,
    settings: {
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: true,
      vertical: false,
    },
  }, {
    breakpoint: 480,
    settings: {
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: true,
      vertical: false,
    },
  }]
});

In CSS change the width of the carousel (image-slider):

.slider {
  max-width: 80%;
  margin: 30px auto;
}

I hope it helps!

Problem :

I have created slider using slick slider. The issue I have is that the width of the working fine with breakpoints for online.

However the same code is not working when I write in normal html file. Can any one help me with this. Check from inspect and see for both normal and online code.

let slider = $(".slider");

slider.not('.slick-initialized').slick({
  autoplay: false,
  infinite: true,
  vertical: false,
  dots: true,
  arrows: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  customPaging: function(slider, i) {},
  responsive: [{
    breakpoint: 1024,
    settings: {
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: false,
      vertical: false,
    },
  }, {
    breakpoint: 600,
    settings: {
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: false,
      vertical: false,
    },
  }, {
    breakpoint: 480,
    settings: {
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: false,
      vertical: false,
    },
  }]
});
.slide-img {
  text-align: center;
  height: 150px;
  width: auto;
}

.main-title {
  font-size: 18px;
  line-height: 24px;
  margin-bottom: 12px;
}

.description {
  font-size: 12px;
  line-height: 18px;
  margin-bottom: 18px;
}

.know-more {
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  line-height: 20px;
  text-decoration: none;
}

.know-more:focus {
  outline: none;
}

.know-more img {
  display: inline-block;
  margin-left: 8px;
  margin-bottom: -2px;
  width: 14px;
  height: 14px !important;
}

.text-xs-center {
  text-align: center !important;
  padding: 40px 15px !important;
}

.slider {
  width: auto;
  margin: 30px;
}

.slider .slick-slide {
  background: #292e3e;
  color: white;
  padding: 40px 0;
  font-size: 30px;
  font-family: "Arial", "Helvetica";
  text-align: center;
}

.slider .slick-prev:before,
.slider .slick-next:before {
  color: #292e3e;
}

.slider .slick-slide:nth-child(odd) {
  background: #57C09F;
}

.slick-slide img {
  display: initial !important;
}

.slick-dots li {
  display: inline-block;
  width: 6px !important;
  height: 6px !important;
  background: #cccccc;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  margin: 0 6px;
  cursor: pointer;
  position: relative;
}

.slick-dots li.slick-active {
  background: #26d400;
  width: 31px !important;
  height: 6px !important;
  border-radius: 4px;
  border: none;
}
<link rel='stylesheet' href='https://rawgit.com/kenwheeler/slick/master/slick/slick.css'>
<link rel='stylesheet' href='https://rawgit.com/kenwheeler/slick/master/slick/slick-theme.css'>

<section class="slider">
  <div class="text-xs-center">
    <img class="slide-img" src="https://webfeb.in/wp-content/uploads/2016/11/logo-design-for-it-company.jpg">
    <h2 class="main-title">HEAD TITLE 1</h2>
    <h3 class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</h3>
    <a class="know-more" href="#">LEARN MORE<img src="https://www.kindpng.com/picc/m/141-1415295_red-right-arrow-hd-png-download.png" alt=""></a>
  </div>
  <div class="text-xs-center">
    <img class="slide-img" src="https://cdn5.vectorstock.com/i/1000x1000/08/04/umbrella-protection-company-logo-concept-vector-2740804.jpg">
    <h2 class="main-title">HEAD TITLE 2</h2>
    <h3 class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</h3>
    <a class="know-more" href="#">LEARN MORE<img src="https://www.kindpng.com/picc/m/141-1415295_red-right-arrow-hd-png-download.png" alt=""></a>
  </div>
  <div class="text-xs-center">
    <img class="slide-img" src="https://webfeb.in/wp-content/uploads/2017/05/digital-world-design.jpg">
    <h2 class="main-title">HEAD TITLE 3</h2>
    <h3 class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</h3>
    <a class="know-more" href="#">LEARN MORE<img src="https://www.kindpng.com/picc/m/141-1415295_red-right-arrow-hd-png-download.png" alt=""></a>
  </div>
  <div class="text-xs-center">
    <img class="slide-img" src="https://previews.123rf.com/images/mahabiru/mahabiru1601/mahabiru160100044/50770590-business-corporate-letter-d-logo-design-vector-.jpg">
    <h2 class="main-title">HEAD TITLE 4</h2>
    <h3 class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</h3>
    <a class="know-more" href="#">LEARN MORE<img src="https://www.kindpng.com/picc/m/141-1415295_red-right-arrow-hd-png-download.png" alt=""></a>
  </div>
  <div class="text-xs-center">
    <img class="slide-img" src="https://previews.123rf.com/images/hartgraphic/hartgraphic1712/hartgraphic171200016/92243101-digital-cube-icon-.jpg">
    <h2 class="main-title">HEAD TITLE 5</h2>
    <h3 class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</h3>
    <a class="know-more" href="#">LEARN MORE<img src="https://www.kindpng.com/picc/m/141-1415295_red-right-arrow-hd-png-download.png" alt=""></a>
  </div>
  <div class="text-xs-center">
    <img class="slide-img" src="https://previews.123rf.com/images/putracetol/putracetol1701/putracetol170100016/69776339-digital-cube-logo.jpg">
    <h2 class="main-title">HEAD TITLE 6</h2>
    <h3 class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</h3>
    <a class="know-more" href="#">LEARN MORE<img src="https://www.kindpng.com/picc/m/141-1415295_red-right-arrow-hd-png-download.png" alt=""></a>
  </div>
</section>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://kenwheeler.github.io/slick/slick/slick.js'></script>

I mean in codepen or JSFiddle.

Comments

Comment posted by Pavankumar Kori

No its working in noermal html file in local file in computer. But its working in codepen and JDFiddle. I means the width in codepen is taking correctly according to the screen size but in local its taking desktop width size.

Comment posted by jkalandarov

Yes, it is taking full desktop width because it is supposed to do so. If you want your carousel (image-slider) size was smaller than the full width of the screen, then you can set the width yourself. See updated answer.

By

Leave a Reply

Your email address will not be published. Required fields are marked *