问题描述
我正在尝试使用 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=);
}