幻灯片 CSS 顶部的光滑箭头答案

【问题标题】：slick arrow at top of slide CSS幻灯片 CSS 顶部的光滑箭头
【发布时间】：2022-11-29 16:30:46
【问题描述】：

嗨，这是我第一次使用 slick carousel。我需要改变箭头的位置，所以箭头会像图中的红色箭头一样在顶层，而不是在滑块的侧面。我尝试使用我在论坛上找到的类似解决方案，但没有人适合我。我尝试使用 position absolute 和 top 属性，但找不到好的 CSS 来解决这个问题。我想把箭头放在课堂上：carousel_btn_arrow

HTML


<div class="carousel_wrap">
    <div class="carousel_header">
        <div class="carousel_title typography__headline4">${Recommendation title}</div>

        <div class="carousel_btn_arrow">
           
        </div>
    </div>
    <div class="carousel_content">
    ${#Recommendation}
        <div class="product_grid_item" data-shortId="${shortId}" data-sku="${sku}">
            <a href="${url}">
                <div class="product_grid_item_img"><img src=${Image_url}></div>
            </a>
            <div class="product_grid_item_title typography__text1">${Name}</div>
            <div class="product_grid_item_price typography__text4">$${Price}</div>
    </div>
    ${/Recommendation}
        </div>
</div>

CSS

.carousel_wrap
{
  display:flex;
  flex-direction: column;
  
}
.carousel_header
{
  display:flex;
  justify-content: space-between;
  margin-bottom: var(--size-250);
}
.carousel_content
{
  display:flex;
  gap: var(--size-125);
}

.product_grid_item
{
  display:flex;
  flex-direction:column;
  gap:var(--size-50);
}
.product_grid_item_img
{
  background: var(--color-grid-item-blend);
}

.product_grid_item_img img 
{
  mix-blend-mode: multiply;
}
.slick-slide
{
  margin-left: var(--size-125);
}


.slick-arrow
{

  cursor: pointer;
  background: transparent;
  border:none;
}
.slick-arrow::before
{
  border: 0;
}
.slick-prev::before
{
  background: url("arrow_prev.svg") no-repeat center;
  margin-right: var(--size);
}
.slick-next::before
{
  background: url("arrow_next.svg") no-repeat center;
}

$(document).ready(function()
{
  $(".carousel_content").slick({
     arrows:true,
     slidesToShow: 3.99,
     slideToScroll: 1,
     infinite: true,
      prevArrow:"<button type='button' class='slick-prev'></button>",
      nextArrow:"<button type='button' class='slick-next'></button>"
  });
  
});

【问题讨论】：

标签： html css slider position slick

【解决方案1】：

随时随地制作你的独立箭头，然后使用光滑的文档......

prevArrow: string (html|jQuery 选择器) |对象（DOM 节点|jQuery 目的）

所以基本上只是制作你的箭头，为每个箭头添加一个特定的 ID 或 CLASS，然后将它加载到光滑的 prevArrow: $("specificIDorspecificClass")

【讨论】：