Как изменить стрелки slick slider

$(document).ready(function() {
  $('.slick-slider').slick({
    slidesToShow: 3,
    centerMode: true,
    centerPadding: '50px',
    prevArrow: "<img src='https://svgshare.com/i/6Ei.svg' class='prev' alt='1'>",
    nextArrow: "<img src='https://svgshare.com/i/6Gf.svg' class='next' alt='2'>",
  });
});

.slider-box {
  position: relative;
}

li {
  margin-top: 20px;
  position: relative;
  float: left;
  margin-right: 20px;
}

.prev,
.next {
  position: absolute;
  top: 30%;
  height: 60px;
  width: 60px;
  z-index: 1;
  cursor: pointer;
}

.next {
  right: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
<div class="slider-box">
  <div class="slick-slider">
    <div>
      <img src="https://via.placeholder.com/150x150">
    </div>
    <div>
      <img src="https://via.placeholder.com/150x150">
    </div>
    <div>
      <img src="https://via.placeholder.com/150x150">
    </div>
    <div>
      <img src="https://via.placeholder.com/150x150">
    </div>
  </div>
</div>

$(document).ready(function() {
  $('.single-item').slick({
    arrows: true
  });
});

.single-item {
  width: 50%;
  margin: 20px auto;
  text-align: center;
  border: 3px solid purple;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" />

<style>
  .slick-prev:before,
  .slick-next:before {
    display: none;
  }
  
  .slick-prev,
  .slick-next {
    width: 50px;
    height: 50px;
    z-index:5;
  }
  
  .slick-prev,.slick-prev:hover,.slick-prev:focus {
    left: 10px;
    background: url(https://pp.userapi.com/c841622/v841622565/10d5b/-6kAk3WFMKQ.jpg)
  }
  
  .slick-next,.slick-next:hover,.slick-next:focus {
    right: 10px;
    background: url(http://dom2.fans/all_news/0113/img/play-2.png)
  }
</style>

<div class=single-item>
  <div>
    <h3>1</h3>
  </div>
  <div>
    <h3>2</h3>
  </div>
  <div>
    <h3>3</h3>
  </div>
  <div>
    <h3>4</h3>
  </div>
  <div>
    <h3>5</h3>
  </div>
  <div>
    <h3>6</h3>
  </div>
</div>

kizosokizoso

9,2933 золотых знака28 серебряных знаков57 бронзовых знаков

In your fiddle, you had forgotten to add the slick-theme.css file as an external resource. If you wanted to follow the default styling of the author, you need that file. Or if you want your own styling then please go ahead and make your own styling and make it youw own theme .css file or something.

<link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/slick/slick-theme.css"/>

and this css for visibility,

.slick-prev:before, .slick-next:before{
    color:red;
}

The updted jsFiddle can be found here.

Code snippet here…

$(document).ready(function() {
  $('.slider').slick({
    centerMode: true,
    centerPadding: '60px',
    dots: true,
    /* Just changed this to get the bottom dots navigation */
    infinite: true,
    speed: 300,
    slidesToShow: 4,
    slidesToScroll: 1,
    arrows: true
  });
});

body {
        background-color: #fff;
      }
      .slider {
        margin: 60px auto;
        width: 500px;
      }
      div {
        height: 100%;
      }
      p {
        text-align: center;
        font-size: 12px;
        color: white;
      }
      /* added the following to give the background color of the arrows as red for visibility, the default which can be found in the slick-theme.css was white */
      .slick-prev:before,
      .slick-next:before {
        color: red;
      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><script src="http://kenwheeler.github.io/slick/slick/slick.js"></script>
<link href="http://kenwheeler.github.io/slick/slick/slick.css" rel="stylesheet"/>
<link href="http://kenwheeler.github.io/slick/slick/slick-theme.css" rel="stylesheet"/>

<div class="slider">
  <div>
    <img src="http://www.onguardapparel.com/images/products/thumb/8013LN_Cat.jpg" height="100" width="100" />
  </div>
  <div>
    <img src="http://www.onguardapparel.com/images/products/thumb/HiddenTailor.9074B.jpg" height="100" width="100" />
  </div>
  <div>
    <img src="http://www.onguardapparel.com/images/products/thumb/1600ETY.JPG" height="100" width="100" />
  </div>
  <div>
    <img src="http://www.onguardapparel.com/images/products/thumb/VIPERPRO81.jpg" height="100" width="100" />
  </div>
  <div>
    <img src="http://www.onguardapparel.com/images/products/thumb/garment_bag.jpg" height="100" width="100" />
  </div>
  <div>
    <img src="http://www.onguardapparel.com/images/products/thumb/1077.jpg" height="100" width="100" />
  </div>
</div>

Hope this helps

answered Mar 11, 2015 at 23:08

if the arrow are on a white background just add a color for them in your css like this:

.slick-prev:before, .slick-next:before {
  color: #09529b !important;
}

answered Aug 16, 2018 at 14:24

answered Dec 8, 2015 at 0:25

FloJDMFloJDM

2983 silver badges12 bronze badges

answered Mar 14, 2021 at 20:14

answered Oct 25, 2021 at 10:13

In your fiddle, you had forgotten to add the slick-theme.css file as an external resource. If you wanted to follow the default styling of the author, you need that file. Or if you want your own styling then please go ahead and make your own styling and make it youw own theme .css file or something.

<link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/slick/slick-theme.css"/>

and this css for visibility,

.slick-prev:before, .slick-next:before{
    color:red;
}

The updted jsFiddle can be found here.

Code snippet here…

$(document).ready(function() {
  $('.slider').slick({
    centerMode: true,
    centerPadding: '60px',
    dots: true,
    /* Just changed this to get the bottom dots navigation */
    infinite: true,
    speed: 300,
    slidesToShow: 4,
    slidesToScroll: 1,
    arrows: true
  });
});

body {
        background-color: #fff;
      }
      .slider {
        margin: 60px auto;
        width: 500px;
      }
      div {
        height: 100%;
      }
      p {
        text-align: center;
        font-size: 12px;
        color: white;
      }
      /* added the following to give the background color of the arrows as red for visibility, the default which can be found in the slick-theme.css was white */
      .slick-prev:before,
      .slick-next:before {
        color: red;
      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><script src="http://kenwheeler.github.io/slick/slick/slick.js"></script>
<link href="http://kenwheeler.github.io/slick/slick/slick.css" rel="stylesheet"/>
<link href="http://kenwheeler.github.io/slick/slick/slick-theme.css" rel="stylesheet"/>

<div class="slider">
  <div>
    <img src="http://www.onguardapparel.com/images/products/thumb/8013LN_Cat.jpg" height="100" width="100" />
  </div>
  <div>
    <img src="http://www.onguardapparel.com/images/products/thumb/HiddenTailor.9074B.jpg" height="100" width="100" />
  </div>
  <div>
    <img src="http://www.onguardapparel.com/images/products/thumb/1600ETY.JPG" height="100" width="100" />
  </div>
  <div>
    <img src="http://www.onguardapparel.com/images/products/thumb/VIPERPRO81.jpg" height="100" width="100" />
  </div>
  <div>
    <img src="http://www.onguardapparel.com/images/products/thumb/garment_bag.jpg" height="100" width="100" />
  </div>
  <div>
    <img src="http://www.onguardapparel.com/images/products/thumb/1077.jpg" height="100" width="100" />
  </div>
</div>

Hope this helps

answered Mar 11, 2015 at 23:08

if the arrow are on a white background just add a color for them in your css like this:

.slick-prev:before, .slick-next:before {
  color: #09529b !important;
}

answered Aug 16, 2018 at 14:24

answered Dec 8, 2015 at 0:25

FloJDMFloJDM

2983 silver badges12 bronze badges

answered Mar 14, 2021 at 20:14

answered Oct 25, 2021 at 10:13