光滑的滑块样式

如何解决光滑的滑块样式

我正在尝试使用 Slick Slider 来复制此线框（附后）

我已经设置了一个代码笔并使滑块处于相当不错的状态，但对按钮的位置如何按照滑块进行了难倒。我也认为我设置高度和宽度以溢出屏幕的方式不正确。任何建议将不胜感激。

https://codepen.io/mattrees92/pen/wvddGgK

<div class="container">
<div class="row">
<div class="col-md-4">
<h1> Hello </h1>
<p> Here is an example of a slider we can use for Gaggia. Content block will be on    the left with slider on the right </p>
<button> Click Me </button>
</div>
<div class="col-md-8">
<div class="slider">
<div>
<img src="https://images.unsplash.com/photo-1446770145316-10a05382c470?dpr=1&auto=format&fit=crop&w=900&h=450&q=80&cs=tinysrgb&crop=" alt="">
</div>
<div>
<img src="https://images.unsplash.com/photo-1455717974081-0436a066bb96?dpr=1&auto=format&fit=crop&w=900&h=450&q=80&cs=tinysrgb&crop=" alt="">
</div>
<div>
<img src="https://images.unsplash.com/photo-1477420086945-b99c643e8a3d?dpr=1&auto=format&fit=crop&w=900&h=450&q=80&cs=tinysrgb&crop=" alt="">
</div>
</div>
</div>
</div>
</div>

  outline: none;
  Box-sizing: border-Box;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  background-color: #fff;
}
.slider {
  display: flex;
}

.slick-track {
  will-change: transform;
}

.slick-list {
  overflow: hidden;
  will-change: transform;
}

.slick-slide {
  padding: 10px;
  margin: 20px;
  filter: drop-shadow(0px 0px 10px rgba(0,0.1));
}

.slick-slide img {
  height: 100vh;
  max-height: 80vh;
  width: 400px;
  margin: 0 auto;
  object-fit: cover;
}

[type="button"] {
  position: fixed;
  top: 50%;
  z-index: 10;
  width: 70px;
  height: 70px;
  overflow: hidden;
  border: 0;
  text-indent: -9999px;
  background-color: black;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  opacity: 0.9;
  transform: translateY(-50%);
  transition: all 0.25s ease;
}

.slick-next {
  right: 0;
  position: absolute;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjx0aXRsZT5jaGV2cm9uLXJpZ2h0PC90aXRsZT48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMTUuNzA2IDExLjI5NGwtNi02Yy0wLjM4Ny0wLjM4Ny0xLjAyNS0wLjM4Ny0xLjQxMyAwcy0wLjM4NyAxLjAyNSAwIDEuNDEzbDUuMjk0IDUuMjk0LTUuMjk0IDUuMjk0Yy0wLjM4NyAwLjM4Ny0wLjM4NyAxLjAyNSAwIDEuNDEzIDAuMTk0IDAuMTk0IDAuNDUgMC4yOTQgMC43MDYgMC4yOTRzMC41MTMtMC4xIDAuNzA2LTAuMjk0bDYtNmMwLjM5NC0wLjM4NyAwLjM5NC0xLjAyNSAwLTEuNDEzeiI+PC9wYXRoPjwvc3ZnPg==);
}

.slick-prev {
  left: 0;
  position: absolute;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjx0aXRsZT5jaGV2cm9uLWxlZnQ8L3RpdGxlPjxwYXRoIGZpbGw9IiNmZmZmZmYiIGQ9Ik0xMC40MTMgMTJsNS4yOTQtNS4yOTRjMC4zODctMC4zODcgMC4zODctMS4wMjUgMC0xLjQxM3MtMS4wMjUtMC4zODctMS40MTMgMGwtNiA2Yy0wLjM4NyAwLjM4Ny0wLjM4NyAxLjAyNSAwIDEuNDEzbDYgNmMwLjE5NCAwLjE5NCAwLjQ1IDAuMjk0IDAuNzA2IDAuMjk0czAuNTEzLTAuMSAwLjcwNi0wLjI5NGMwLjM4Ny0wLjM4NyAwLjM4Ny0xLjAyNSAwLTEuNDEzbC01LjI5NC01LjI5NHoiPjwvcGF0aD48L3N2Zz4=);
}

解决方法

我已根据设计调整了 const getDiscountedPrice = (price,discount) => { return Math.round( price * (1 - (discount/100)) ); } const calculateTotalPrice = (shoppingBag,goods) => shoppingBag.reduce((totalPrice,bagItem) => { const { product,quantity} = bagItem; const productDetails = goods[product]; // Check if the item in the `shoppingBag` exists in `goods` if (productDetails) { const { price,discount } = productDetails; totalPrice += (quantity * getDiscountedPrice(price,discount)); } return totalPrice; },0); console.log('Total amount pending: ',calculateTotalPrice(shoppingBag,goods)); 、top 属性以显示箭头按钮：https://codepen.io/tilwinjoy/pen/WNjjoQr

我强烈建议使用 CSS 变量而不是硬编码的像素值。

left

// Slick slider init

$('.slider').slick({
  arrows: true,dots: false,infinite: true,speed: 500,slidesToShow: 1,centerMode: false,variableWidth: true,draggable: true
});

* {
  outline: none;
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  background-color: #fff;
}

.slider {
  display: flex;
}

.slick-track {
  will-change: transform;
}

.slick-list {
  overflow: hidden;
  will-change: transform;
}

.slick-slide {
  padding: 10px;
  margin: 20px;
  filter: drop-shadow(0px 0px 10px rgba(0,0.1));
}

.slick-slide img {
  height: 100vh;
  max-height: 80vh;
  width: 400px;
  margin: 0 auto;
  object-fit: cover;
}

[type="button"] {
  position: fixed;
  top: 102%;
  left: 20px;
  z-index: 10;
  width: 70px;
  height: 70px;
  overflow: hidden;
  border: 0;
  text-indent: -9999px;
  background-color: black;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  opacity: 0.9;
  transform: translateY(-50%);
  transition: all 0.25s ease;
}

.slick-next {
  left: 82px;
  position: absolute;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjx0aXRsZT5jaGV2cm9uLXJpZ2h0PC90aXRsZT48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMTUuNzA2IDExLjI5NGwtNi02Yy0wLjM4Ny0wLjM4Ny0xLjAyNS0wLjM4Ny0xLjQxMyAwcy0wLjM4NyAxLjAyNSAwIDEuNDEzbDUuMjk0IDUuMjk0LTUuMjk0IDUuMjk0Yy0wLjM4NyAwLjM4Ny0wLjM4NyAxLjAyNSAwIDEuNDEzIDAuMTk0IDAuMTk0IDAuNDUgMC4yOTQgMC43MDYgMC4yOTRzMC41MTMtMC4xIDAuNzA2LTAuMjk0bDYtNmMwLjM5NC0wLjM4NyAwLjM5NC0xLjAyNSAwLTEuNDEzeiI+PC9wYXRoPjwvc3ZnPg==);
}

.slick-prev {
  left: 10px;
  position: absolute;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjx0aXRsZT5jaGV2cm9uLWxlZnQ8L3RpdGxlPjxwYXRoIGZpbGw9IiNmZmZmZmYiIGQ9Ik0xMC40MTMgMTJsNS4yOTQtNS4yOTRjMC4zODctMC4zODcgMC4zODctMS4wMjUgMC0xLjQxM3MtMS4wMjUtMC4zODctMS40MTMgMGwtNiA2Yy0wLjM4NyAwLjM4Ny0wLjM4NyAxLjAyNSAwIDEuNDEzbDYgNmMwLjE5NCAwLjE5NCAwLjQ1IDAuMjk0IDAuNzA2IDAuMjk0czAuNTEzLTAuMSAwLjcwNi0wLjI5NGMwLjM4Ny0wLjM4NyAwLjM4Ny0xLjAyNSAwLTEuNDEzbC01LjI5NC01LjI5NHoiPjwvcGF0aD48L3N2Zz4=);
}