尝试编写简单的轮播 [英] Trying to Code a Simple Carousel
问题描述
我正在尝试构建一个简单的轮播，我知道那里有很多，但是我更喜欢尝试解决这个问题.
I am trying to build a simple carousel, I know there are many out there, but I prefer to try and figure this out.
这是我的轮播代码
<div class="amnavigation">
<div class="previous"><</div>
<ul>
<li>icon</li>
<li>icon</li>
<li>icon</li>
<li>icon</li>
<li>icon</li>
<li>icon</li>
<li>icon</li>
<li>icon</li>
<li>icon</li>
<li>icon</li>
<li>icon</li>
<li>icon</li>
<li>icon</li>
<li>icon</li>
<li>icon</li>
<li>icon</li>
<li>icon</li>
<li>icon</li>
<li>icon</li>
<li>icon</li>
</ul>
<div class="next">></div>
</div>
和CSS
.amnavigation {
height: 140px;
overflow: hidden;
display: flex;
height: 140px;
overflow: hidden;
display: flex;
max-width: 1000px;
margin: auto; }
.amnavigation ul li {
width: 140px;
height: 140px;
background: #999;
display: inline-block;
margin: 5px; }
我什至不知道从哪里开始以及使用什么功能.
I am not even sure where to begin with and what function to use.
我将内部ul放置在父容器中，然后视其向左或向右移动该容器140px(或其他值)吗?
would I position the inner ul in the parent container, then move that container by 140px (or whatever) left or right depending?
这是一个小提琴
https://jsfiddle.net/L1v2uyxd/
here is a fiddle
https://jsfiddle.net/L1v2uyxd/
自从尝试学习以来，任何建议和耐心都倍受赞赏.
ANY advice is much appreciated as is patience since am trying to learn.
推荐答案
在开始之前，需要考虑以下几点:
Here's a few things to consider, before you start:
-
告诉浏览器将这些项目设置为无序列表样式并没有必要覆盖这些显示规则，这没有任何意义.使用
<div>isions和<span>s.甚至是自定义元素(没有默认样式！)
There is no point in telling the browser to style those items as an unordered list only to have to override those display rules. Use
<div>isions and<span>s. Or even custom elements (no default styling!)
确定旋转木马是合适的滑块还是淡入/淡出项目.因为 fader 非常简单直接(您只需为opacity设置动画)，所以我将假定它是 slider .
Decide if your carousel will be a proper slider or just fade items in/out. Because the fader is rather simple and straight forward (you just animate opacity), I'm going to assume it's a slider.
在更大的屏幕上，您想确定旋转木马是否装箱或全宽.我个人觉得全宽更自然，但有些人喜欢盒装.我在这里吃饱了.
On larger screens you want to decide if your carousel is boxed or goes full width. I personally find the full width more natural but some prefer it boxed. I made it full here.
确定是否要使用有限或无限滑块.我将假定它是一个js.
Decide if you want finite or infinite slider. I'm going to assume it's a looper. If you don't want that, just remove the js that appends/prepends the items on slide.
确定轨道是否具有可变高度.这很重要，因为您可能希望将其包装在一个额外的高度占位符中，以便可以分离动画.当做一些像滑块一样复杂的事情时，您要使动画尽可能保持整洁干净.稍后它们变得足够复杂.
Decide if the track will have variable height. This is important because you might want to wrap it in an extra height placeholder, so you can separate the animations. When doing something as complex as a slider, you want to keep things as tidy and clean as possible regarding animations. They get complex enough later on.
现在，考虑到以上所述，请从CSS开始进行此操作.我已经分步进行了布局(基本设置，滑块布局，动画). js是在动画步骤制作的.关键不是要为您创建一个滑块，而是要逐步完成该过程，以便您举个例子.
Now, given the above, go through this, starting with CSS. I've layed it out in steps (basic setup, slider layout, animations). The js was made at animations step. The point was not to create a slider for you, but to walk you through the process so you have an example.
/*
* go to CSS first, I'll send you back here when when it's time
*/
$(window).on('load', function(){
var slides = $('slider slide');
slides.each(function(){
// add 'before' and 'after' classes to all and `active` to first
$(this).addClass(
$(this).index() ? (
$(this).index() > (slides.length / 2) ?'before':'after'
) : 'active'
);
});
// place all `.before` slides before `.active` in DOM
$(slides.get().reverse()).each(function(){
if ($(this).is('.before')) {
$(this).prependTo($(this).parent());
}
});
})
function goNext() {
active = $('slider .active');
active.next().addClass('active').removeClass('after');
active.addClass('before').removeClass('active');
$('slider slide').first().removeClass('before').appendTo($('slider')).addClass('after')
}
function goPrev() {
active = $('slider .active');
active.prev().addClass('active').removeClass('before');
active.addClass('after').removeClass('active');
$('slider slide').last().removeClass('after').prependTo($('slider')).addClass('before')
}
body {
margin: 0;
text-align: center;
overflow-x: hidden;
}
[flex] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
* {
box-sizing: border-box;
}
.content {
width: 80vw;
border: 1px solid #aaa;
text-align: initial;
margin: 0 auto;
min-height: 100vh;
}
.header {
min-height: 4rem;
text-align: center;
}
.rest-of-page {
padding: 1rem;
}
/* the above is just setup - ignore it
* here comes the juice.
* I used custom html elements so nothing would be default
* this way I needed to put in all required css attributes
* not relying on default styles by browser
*/
slider-container {
border: solid red;
border-width: 1px 0;
display: block;
width: 100vw;
/* left margin equal with half the difference
* between .content width and and viewport width:
*/
left: calc((100% - 100vw) / 2);
position: relative;
overflow: hidden;
min-height: 300px;
text-align: center;
}
slide[flex] {
position: absolute;
top: 1rem;
width: 80vw;
margin: 0 10vw;
height: calc(100% - 4rem);
background-color: #777;
color: white;
/* making sure slides don't render before everything loads */
display: none;
transition: transform .42s cubic-bezier(.4,0,.2,1);
}
slider-container .navigation {
position: absolute;
bottom: 0;
display: flex;
width: 100%;
justify-content: center;
}
slider-container .navigation > * {
width: 2rem;
height: 2rem;
border: 1px solid #242424;
margin: .5rem .25rem;
cursor: pointer;
}
/* all the layout is set so far - all items in place
* now we want to handle slider positions and animations
* disable the code below to see what we got so far
* this is where javascript steps in
*/
slider .active,
slider .before,
slider .after {
display: flex;
}
.before {
transform: translateX(-100vw);
}
.after {
transform: translateX(100vw);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div class="header" flex>Header here</div>
<slider-container>
<slider>
<slide flex>icon 1</slide>
<slide flex>icon 2</slide>
<slide flex>icon 3</slide>
<slide flex>icon 4</slide>
<slide flex>icon 5</slide>
<slide flex>icon 6</slide>
<slide flex>icon 7</slide>
<slide flex>icon 8</slide>
<slide flex>icon 9</slide>
<slide flex>icon 10</slide>
<slide flex>icon 11</slide>
<slide flex>icon 12</slide>
<slide flex>icon 13</slide>
<slide flex>icon 14</slide>
<slide flex>icon 15</slide>
</slider>
<div class="navigation">
<div class="previous" flex onclick="javascript:goPrev()"><</div>
<div class="next" flex onclick="javascript:goNext()">></div>
</div>
</slider-container>
<div class="rest-of-page">Content here</div>
</div>
此后，您还需要一些其他东西:
After this, you need a few more things:
- 自适应高度
- 点控件
- 去滑行
- 触摸事件和行为
- 响应速度更快(适当)
- 取消注册事件/行为(您可能希望删除移动设备上的所有事件/行为，并只在另一张幻灯片下面显示所有幻灯片)-如果您希望能够重新初始化，则取消注册很重要.
- 具有多个活动幻灯片
- 实施步骤(一次滑动多个项目)
- 启用滑动(和粘性)
- 缩放到全屏
- 在屏幕上比幻灯片小的设备上的单个幻灯片中平移以进行全尺寸缩放(电子商务产品滑块有时需要使用此功能)
- adaptive height
- dot controls
- go to slide
- touch events and behavior
- more responsiveness (proper)
- de-registering events/behavior (you might want to remove all events/behavior on mobile and just display all slides one below the other) - de-register is important if you want to be able to re-init.
- have more than one active slide
- implement step (slide more than one item at a time)
- enable swipe (and stickyness)
- zoom to full screen
- zoom in full size with panning inside a single slide on device that have smaller screen than your slides (it's a feature sometimes required for e-commerce product sliders)
我不是说:喜欢我.您应该建立自己的.但是我列出了我将如何做，希望它会有所帮助.我想这就是你问的原因.
I'm not saying: do like me. You should build yours. But I laid out how I'd do it, with the hope it might help. I assume this is why you asked.
这篇关于尝试编写简单的轮播的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
