我有一个旋转木马,目前敏锐的滑块JS -开放的改变,如果我之后是更容易实现的另一种方法。
我想要一个自动播放/循环 (稍后可能会添加左/右箭头) 的渐变旋转木马,并为每张幻灯片提供一个标题,并带有编号分数分页,如“1 / 5”。
由于我的布局(参见CodePen),我认为最好使用data属性来实现,因为我想在carousel之外显示标题和分页。
我想的“逻辑”是:* 如果class = active,则获取'data-attribute',添加到. div. *
然后在类被添加到新幻灯片时进行更新。理论上,这有意义吗?
var slider = new KeenSlider("#my-keen-slider", {
loop: true,
defaultAnimation: {
duration: 500000
},
detailsChanged: (s) => {
s.slides.forEach((element, idx) => {
element.style.opacity = s.track.details.slides[idx].portion
})
},
renderMode: "custom"
})
html {
background: white;
font-size: 62.5%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-overflow-scrolling: touch;
-webkit-tap-highlight-color: white;
-webkit-text-size-adjust: 100%;
}
/**
* Base `body` styling.
*/
body {
background-color: transparent;
color: black;
font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;
font-size: 1.8rem;
font-weight: 500;
line-height: 1.5;
margin: 0;
padding: 0;
text-rendering: optimizeLegibility;
}
h1 {
font-size: 3.6rem;
font-weight: inherit;
line-height: 1;
margin: 0 0 24px;
padding: 0;
}
p {
margin: 0 0 24px;
padding: 0;
}
img {
border: 2px solid black;
height: auto;
max-height: 100%;
width: auto;
max-width: 100%;
}
.grid__item {
box-sizing: border-box;
padding: 24px 24px 0;
}
.gallery {
box-sizing: border-box;
}
.grid__item-footer {
display: flex;
margin-top: auto;
}
.grid__item-footer p {
display: flex;
align-items: center;
flex: 1 1 0%;
}
.grid__item-footer .align-right {
justify-content: flex-end;
}
@media only screen and (min-width: 1000px) {
.grid {
background-color: black;
display: grid;
grid-column-gap: 2px;
grid-template-columns: repeat(12, 1fr);
height: 100vh;
margin: 0 64px;
}
.grid__item {
background-color: white;
display: flex;
flex-direction: column;
grid-column: span 6;
height: 100vh;
}
.grid__item-main {
display: flex;
flex: 1 1 auto;
flex-direction: column;
margin-bottom: 24px;
overflow: hidden;
width: 100%;
}
.grid__item-main--gallery {
box-sizing: border-box;
align-items: center;
justify-items: center;
align-self: center;
justify-self: center;
text-align: center;
overflow: hidden;
}
.gallery {
box-sizing: border-box;
overflow: hidden;
position: relative;
}
.gallery__inner {
box-sizing: border-box;
height: 100%;
width: auto;
}
.grid__item-footer {
border-bottom: 2px solid black;
box-sizing: border-box;
height: 64px;
padding: 0 24px;
position: fixed;
bottom: -64px;
left: 0;
transform: rotate(-90deg);
transform-origin: top left;
width: 100vh;
}
.grid__item-footer p {
margin-bottom: 0;
}
.grid__item--gallery {
padding: 24px;
}
.grid__item--gallery .grid__item-main {
height: 100%;
margin-bottom: 0;
}
.grid__item--gallery .gallery {
height: 100%;
}
.grid__item--gallery .grid__item-footer {
left: auto;
right: 0;
transform: rotate(90deg);
transform-origin: top right;
}
img {
box-sizing: border-box;
height: auto;
max-height: 100%;
width: auto;
}
img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
aspect-ratio: unset;
}
}
/* Carousel CSS */
.fader {
height: 50vw;
position: relative;
overflow: hidden;
}
@media (min-width: 768px) {
.fader {
height: 300px;
}
}
.fader__slide {
width: 100%;
height: 100%;
position: absolute;
top: 0;
opacity: 0;
display: flex;
align-items: center;
align-self: center;
justify-content: center;
}
.fader img {
width: 100%;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit-transform: translateY(-50%) translateX(-50%);
}
<script src="https://cdn.jsdelivr.net/npm/keen-slider@latest/keen-slider.js"></script>
<div class="grid grid--alt aspect">
<div class="grid__item">
<div class="grid__item-main">
<h1 class="brand-name">Brand Name</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="grid__item-footer">
<p class="contrast"><span class="contrast__switch"></span>Contrast</p>
</div>
</div>
<div class="grid__item grid__item--gallery">
<div class="grid__item-main">
<div class="gallery">
<div id="my-keen-slider">
<div class="fader__slide keen-slider__slide" data-caption="product name 1" data-slide="1">
<img src="https://www.fillmurray.com/900/1200" data-caption="product name 1" data-slide="1" />
</div>
<div class="fader__slide keen-slider__slide">
<img src="https://www.fillmurray.com/g/900/1200" data-caption="product name 2" data-slide="2" />
</div>
</div>
<div class="grid__item-footer">
<p>Name of Project</p>
<p class="gallery-count align-right"><span class="current">1</span> / 2</p>
</div>
</div>
1条答案
按热度按时间dluptydi1#
你可以使用
document.querySelector
在html中搜索一个元素:https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors,然后在其他html元素中添加信息: