自定义光滑箭头

Posted 2023-05-07

技术标签:

【中文标题】自定义光滑箭头【英文标题】：Custom Slick Arrows 【发布时间】：2021-12-23 00:57:35 【问题描述】：

我在我的项目中使用 Slick.js，我希望按钮和点位于 div 内。我尝试过在 javascript 上放置 div 的选择器，但是每当我这样做时，该按钮都不起作用。我已经更改了一些 css 代码，我可以将下一个按钮放在图像中，但似乎上一个按钮显示在光滑的图像下方。我不确定为什么会这样。谢谢。

$('.sliding-announcement').slick(
    dots: true,
    infinite: true,
    speed: 100,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 2000,
    arrows: true,
    variableWidth: true,
    prevArrow: '<button class="button-slider slide-arrow prev-arrow"></button>',
  nextArrow: '<button class="button-slider slide-arrow next-arrow"></button>',
    responsive: [
      
        breakpoint: 1024,
        settings: 
          slidesToShow: 1,
          slidesToScroll: 1,
          infinite: true,
          dots: true
        
      ,
      
        breakpoint: 600,
        settings: 
          slidesToShow: 1,
          slidesToScroll: 1
        
      ,
      
        breakpoint: 480,
        settings: 
          slidesToShow: 1,
          slidesToScroll: 1
        
      
    ]
  );

.button-slider
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

.slide-arrow
  position: absolute;
  top: 50%;
  margin-top: -15px;

.prev-arrow
    background: red;
  right: 10px;
  width: 0;
  height: 100%;
  border-left: 0 solid transparent;
  border-right: 15px solid #113463;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;

.next-arrow
    background: red;
  right: 0px;
  width: 0;
  height: 0;
  border-right: 0 solid transparent;
  border-left: 15px solid #113463;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 
 
<div class="sliding-announcement">

    <div class="sliding-annonuncement-image-container">
        <img class="sliding-annonuncement-image" src="https://i.picsum.photos/id/789/536/354.jpg?hmac=bACXXOVJWzwDX0UtvGkk0xqXo1F2fk2N9XxBgPW6Jwg">
    </div>
    <div class="sliding-annonuncement-image-container">
        <img class="sliding-annonuncement-image" src="https://i.picsum.photos/id/789/536/354.jpg?hmac=bACXXOVJWzwDX0UtvGkk0xqXo1F2fk2N9XxBgPW6Jwg">
    </div>
    <div class="sliding-annonuncement-image-container">
        <img class="sliding-annonuncement-image" src="https://i.picsum.photos/id/789/536/354.jpg?hmac=bACXXOVJWzwDX0UtvGkk0xqXo1F2fk2N9XxBgPW6Jwg">
    </div>
    <div class="sliding-annonuncement-image-container">
        <img class="sliding-annonuncement-image" src="https://i.picsum.photos/id/789/536/354.jpg?hmac=bACXXOVJWzwDX0UtvGkk0xqXo1F2fk2N9XxBgPW6Jwg">
    </div>

</div>

【问题讨论】：

要在div里面的按钮和点，里面有div? 抱歉，上一篇文章中好像没有图片，我已经用网上找到的图片编辑了这篇文章。我遇到的问题是，光滑轮播的上一个按钮不在光滑图像的顶部，这与可以在图像顶部看到的下一个按钮不同。我正在尝试将上一个按钮和指示器放在图像的顶部。对不起，我的第一篇文章的混乱在滑块的顶部，还是在中间（高度）？下面包含一个工作示例。 【参考方案1】：

您应该为此使用pseudo 类。在滑块周围添加一个包装器，并为其定位 relative，以便您可以 absolute 定位您的箭头。

下面是一个工作示例：

$('.sliding-announcement').slick(
    dots: true,
    infinite: true,
    speed: 100,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 2000,
    arrows: true,
    variableWidth: true,
    prevArrow: $('.prev-arrow'),
    nextArrow: $('.next-arrow'),
    responsive: [
        
            breakpoint: 1024,
            settings: 
                slidesToShow: 1,
                slidesToScroll: 1,
                infinite: true,
                dots: true
            
        ,
        
        breakpoint: 600,
            settings: 
                slidesToShow: 1,
                slidesToScroll: 1
            
        ,
        
        breakpoint: 480,
        settings: 
                slidesToShow: 1,
                slidesToScroll: 1
            
        
    ]
);

.button-slider 
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;


.slide-arrow 
    position: absolute;
    top: 50%;
    transform: translateY(-50%);


.prev-arrow 
    left: 10px;


.next-arrow 
    right: 10px;


.slide-arrow::after 
    content: '';
    background: red;
    width: 0;
    height: 100%;


.prev-arrow::after 
    border-left: 0 solid transparent;
    border-right: 15px solid #113463;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;


.next-arrow::after 
    border-right: 0 solid transparent;
    border-left: 15px solid #113463;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;


.sliding-announcement-wrap 
    position: relative;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 
<div class="sliding-announcement-wrap">
    <div class="sliding-announcement">

        <div class="sliding-annonuncement-image-container">
            <img class="sliding-annonuncement-image" src="https://i.picsum.photos/id/789/536/354.jpg?hmac=bACXXOVJWzwDX0UtvGkk0xqXo1F2fk2N9XxBgPW6Jwg">
        </div>
        <div class="sliding-annonuncement-image-container">
            <img class="sliding-annonuncement-image" src="https://i.picsum.photos/id/1035/536/354.jpg?hmac=N7LdfGCyj7EjI-_m2RvtgMrZ-SKgYmtwPBf_dd7ZDf8">
        </div>
        <div class="sliding-annonuncement-image-container">
            <img class="sliding-annonuncement-image" src="https://i.picsum.photos/id/789/536/354.jpg?hmac=bACXXOVJWzwDX0UtvGkk0xqXo1F2fk2N9XxBgPW6Jwg">
        </div>
        <div class="sliding-annonuncement-image-container">
            <img class="sliding-annonuncement-image" src="https://i.picsum.photos/id/1035/536/354.jpg?hmac=N7LdfGCyj7EjI-_m2RvtgMrZ-SKgYmtwPBf_dd7ZDf8">
        </div>

    </div>

    <button class="button-slider slide-arrow prev-arrow"></button>
    <button class="button-slider slide-arrow next-arrow"></button>
</div>

【讨论】：

以上是关于自定义光滑箭头的主要内容，如果未能解决你的问题，请参考以下文章

如何在光滑的滑块中创建自定义箭头以在悬停时更改图像？

如何使用带有缩略图滑块的光滑滑块创建自定义滑块？

如何将箭头控件设置为自定义按钮

光滑的滑块箭头在响应模式下表现得像幻灯片

php woocommerce流行品牌旋转木马与光滑和自定义分类循环