Я знаю, что приложу к этому некоторые усилия, но понятия не имею... Я пытаюсь сделать слайдер, подобный тому, что находится в разделе магазина на веб-сайте Apple.
Ползунок должен быть выровнен по левой стороне сетки при загрузке страницы, а затем он должен быть на всю ширину, когда пользователь прокручивает его. Я не могу найти никакого решения. Может ли кто-нибудь указать мне правильное направление?
в этом codepen есть простое решение:
https://codepen.io/ezadoo/pen/VwWEZBZ
var swiper = new Swiper(".snapslider-overflow", {
cssMode: true,
speed: 1000,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},
//wrapperClass: "snapslider-scroll",
//slideClass: "snapslider-card",
slidesPerView: "auto",
mousewheel: true,
keyboard: true,
});
@import url("https://fonts.googleapis.com/css?family=IBM+Plex+Sans:100,200,300,400,500,600,700&display=swap");
$mobile-break: 668px;
$desktop-break: 1024px;
:root {
--feat-leftpadding: 5rem;
@media only screen and (min-width: $desktop-break) {
//--feat-leftpadding: 6.5rem;
}
}
body {
margin: 0;
padding: 0;
background-color: #f5f5f7;
}
.ezd-feature-headline {
padding-left: var(--feat-leftpadding);
max-width: 30rem;
font-family: "IBM Plex Sans", sans-serif;
line-height: 1.15em;
letter-spacing: -0.03em;
font-size: 1.25rem;
@media only screen and (min-width: $desktop-break) {
font-size: 1.75rem;
max-width: 45rem;
}
.headline-primary {
color: rgba(0, 0, 0, 1);
}
.headline-secondary {
color: rgba(128, 128, 128, 1);
}
&.has-big {
font-size: 2rem;
@media only screen and (min-width: $desktop-break) {
font-size: 3rem;
}
}
}
.snapslider-card {
font-size: 1.25rem;
display: block;
// background-color: red;
width: 14.5em;
height: 18.5em;
//border: 1px solid black;
padding-top: 0.5em;
padding-bottom: 0.5em;
padding-right: 0.75em;
//float: left;
flex-grow: 0;
flex-shrink: 0;
scroll-snap-align: start;
@media only screen and (min-width: $desktop-break) {
font-size: 1.75rem;
}
&:nth-child(even) {
// background-color: blue;
}
&:first-child {
padding-left: var(--feat-leftpadding);
}
&:last-child {
//padding-right: 0;
}
//box-sizing: border-box;
.card-content {
border-radius: 0.75em;
background: #ffffff;
width: 100%;
height: 100%;
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}
}
.ezd-snapslider {
margin-bottom: 2rem;
position: relative;
&::-webkit-scrollbar {
//display: none;
}
.snapslider-overflow {
//padding-left: 6rem;
//width: calc(100% - 6rem);
//overflow: visible;
&::-webkit-scrollbar {
//display: none;
}
}
.snapslider-scroll {
display: flex;
flex-wrap: nowrap;
height: auto;
width: auto;
//padding-left: 6rem;
//overflow: visible;
overflow-x: scroll;
scroll-snap-type: x mandatory;
//scroll-padding: 0 var(--feat-leftpadding);
scroll-padding: 0 5rem;
-ms-overflow-style: none;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
}
<script src = "https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
<div class = "ezd-content">
<h2 class = "ezd-feature-headline has-big">
<span class = "headline-primary">Slider.</span>
<span class = "headline-secondary">This is for demonstration purposes, to show the need of scroll-padding.</span>
</h2>
<h3 class = "ezd-feature-headline">
<span class = "headline-primary">Another Line.</span>
<span class = "headline-secondary">Simply here for more text.</span>
</h3>
<div class = "ezd-snapslider">
<div class = "snapslider-wrapper">
<div class = "snapslider-overflow">
<div class = "snapslider-scroll swiper-wrapper">
<div class = "snapslider-card swiper-slide">
<div class = "card-content"></div>
</div>
<div class = "snapslider-card swiper-slide">
<div class = "card-content"></div>
</div>
<div class = "snapslider-card swiper-slide">
<div class = "card-content"></div>
</div>
<div class = "snapslider-card swiper-slide">
<div class = "card-content"></div>
</div>
<div class = "snapslider-card swiper-slide">
<div class = "card-content"></div>
</div>
<div class = "snapslider-card swiper-slide">
<div class = "card-content"></div>
</div>
<div class = "snapslider-card swiper-slide">
<div class = "card-content"></div>
</div>
</div>
<div class = "swiper-button-next"></div>
<div class = "swiper-button-prev"></div>
</div>
</div>
</div>
</div>
Дает ли это вам представление о том, как запустить codepen.io/giuseppebianchi/pen/MwoMBa?