[英]Slider without buttons - pre/next li triggers the slide
I'm trying to get a carousel with previous/next actions triggered by the actual prev/next slide. 我正在尝试通过实际的上一张/下一张幻灯片触发带有上一个/下一个动作的轮播。
I could get it to work, but I'd like the slides to move with animated transition. 我可以使用它,但是我希望幻灯片随着动画过渡而移动。 All I could figure out was a fadeIn/FadeOut effect, which doesn't quite cut it. 我所能想到的只是一个淡入/淡出效果,并不能完全消除它。
Is there somethig you could suggest me as to smoothly move the .prev/.next > .main after I click .prev/.next? 您是否可以建议我单击.prev / .next后平稳地移动.prev / .next> .main?
HTML: HTML:
<div class="view">
<ul>
<li class="prev" data-id="1">first
</li><!--
--><li class="main" data-id="2">second
</li><!--
--><li class="next" data-id="3">third
</li><!--
--><li data-id="4">fourth
</li><!--
--><li data-id="5">fifth
</li>
</ul>
</div>
CSS: CSS:
.view {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
}
.view ul {
list-style-type: none;
display: block;
height: 100%;
width: auto;
margin: 0;
padding: 0;
white-space: nowrap;
}
.view ul li {
display: inline-block;
width: 80%;
height: 80%;
margin: 5% 10%;
padding: 0;
background: white;
border: 2px solid #ccc;
}
.view ul li:hover {
border-color: #75B5FF;
}
.view ul li.main {
top: -5%;
}
.view ul li.prev {
height: 75%;
margin-right: -5%;
margin-left: -75%;
top: 5%;
}
.view ul li.next {
height: 75%;
margin-left: -5%;
}
jQuery: jQuery的:
$('body').on('click', 'li.prev', function() {
$("body").find( "li" ).eq( 2 ).removeClass("next")
$(this).next().removeClass().addClass("next");
$(this).removeClass().addClass("main");
$(this).prev().removeClass().addClass("prev");
var $this = $(this),
callback = function() {
$this.siblings(':last()').insertBefore($this).addClass("prev");
};
$this.fadeIn(100, callback).fadeIn(100);
});
$('body').on('click', 'li.next', function() {
$("body").find( "li" ).eq( 1 ).removeClass("prev")
$(this).prev().removeClass().addClass("prev");
$(this).removeClass().addClass("main");
$(this).next().removeClass().addClass("next");
var $this = $(this),
callback = function() {
$this.siblings(':first()').insertAfter($this.siblings(':last()'));
};
$this.fadeOut(100, callback).fadeIn(100);
});
Here it is in extenso : 这里是扩展 :
https://jsfiddle.net/mptjsybq/ https://jsfiddle.net/mptjsybq/
-- -
Also, is there a way to give more margin-top to the .prev/.next li's? 另外,是否有办法为.prev / .next li提供更多的页边空白? I'm trying, but it must be some kind of alignment that orders all the li's up to the highest one. 我正在尝试,但是必须以某种对齐方式将所有li排列到最高位置。 I want the .main li to be positioned higher than the .prev/.next ones. 我希望.main li的位置高于.prev / .next的位置。
Using CSS transitions, this effect is easily possible. 使用CSS过渡,这种效果很容易实现。
The key is this line of code: 关键是以下代码行:
.view ul li {
/* ... */
transition: all 0.5s ease;
}
Of course, if you wanted to be extra nice to the browser, you could always do this instead: 当然,如果您希望对浏览器更加友善,则可以始终这样做:
.view ul li {
/* ... */
transition: margin-left 0.5s ease, margin-right 0.5s ease;
}
This way the browser only has to calculate for margin-left
and margin-right
, instead of all the properties. 这样,浏览器只需要计算margin-left
和margin-right
,而不是所有属性。
Don't forget to remove the fadeIn
and fadeOut
from your jQuery! 不要忘记从jQuery中删除fadeIn
和fadeOut
!
Here is the demo at JSFiddle: https://jsfiddle.net/239pcojn/2/ 这是JSFiddle上的演示: https ://jsfiddle.net/239pcojn/2/
CSS3 Transitions are an amazing spec which allows you to do all kinds of animations without JavaScript. CSS3 Transitions是一个了不起的规范,它使您无需JavaScript即可制作各种动画。 You can look into the docs here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions 您可以在此处查看文档: https : //developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
What you are asking is complicated to make, because there is a lot of things to consider. 您要问的是复杂的,因为有很多事情要考虑。
Another option is to build the functionality you are looking for on top of an existing slider. 另一个选择是在现有滑块之上构建您要寻找的功能。 Like this: http://jsfiddle.net/mmyp7n3j/2/ 像这样: http : //jsfiddle.net/mmyp7n3j/2/
HTML: HTML:
<div id="container" style="width: 100%;overflow: hidden;">
<div style="position:relative;width: 50%;margin: 0 auto;">
<div id="slider" style="width: 100%;overflow: visible !important;">
<img src="http://webbies.dk/assets/files/SudoSlider/package/images/01.jpg" alt="img" />
<img src="http://webbies.dk/assets/files/SudoSlider/package/images/02.jpg" alt="img" />
<img src="http://webbies.dk/assets/files/SudoSlider/package/images/03.jpg" alt="img" />
<img src="http://webbies.dk/assets/files/SudoSlider/package/images/04.jpg" alt="img" />
<img src="http://webbies.dk/assets/files/SudoSlider/package/images/05.jpg" alt="img" />
</div>
</div>
</div>
JavaScript: JavaScript的:
$(document).ready(function(){
var sudoSlider = $("#slider").sudoSlider({
continuous:true,
prevNext: false,
initCallback: function () {
this.css("overflow", "visible");
}
});
$("body").on("click", ".slide", function (e) {
var slide = Number($(e.target).attr("data-slide"));
sudoSlider.goToSlide(slide);
});
});
(Disclaimer, I am the guy behind the plugin used). (免责声明,我是所使用的插件背后的家伙)。
You can find more documentation on the plugin website: http://webbies.dk/SudoSlider/ 您可以在插件网站上找到更多文档: http : //webbies.dk/SudoSlider/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.