固定或聚焦响应滑块项目在中间并偏移滑块的最后和第一端 [英] Fixed or focus responsive slider item in the middle and offset the last and first end of the slider
本文介绍了固定或聚焦响应滑块项目在中间并偏移滑块的最后和第一端的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我一直想弄清楚如何在中间定位或修复滑块项目。类似于下面所示的设计。滑块设置在中间，屏幕边缘显示幻灯片。这可以使用`CSS`来完成，还是可以通过`javascript`来完成，以便它以编程方式调整而不是使用`CSS`。我已经完成了一项正在进行的工作，但却无法尝试实现所需的布局。我也计划让它响应，这样当我调整浏览器大小时，滑块始终集中在中间
滑块设计图片
我知道已经有现成的滑块在网上，但我正在从头开始为了让我学习。
我的尝试：
I've been trying to figure out how I can position or fixed the slider item in the middle. Something like the design shown below. Slider is set in the middle and the edge of the screen shows the slides. Can this be done using just `CSS` or is it possible to do it via `javascript` so that it adjusts programmatically instead of using `CSS`. I have already made a work in progress but having trouble trying to achieve the desired layout. I'm planning to make it responsive also so that when I resize the browser the slider is focused in the middle all the time
Image of Slider Design
I know there are already ready made sliders on the net but I'm building from scratch in order for me to learn.
What I have tried:
(function ($) {
'use strict';
var carousel = {
init : function() {
var carouselWidth = 0,
itemListContainer = $('.item-list').width(),
itemList = $('.carousel .item-list ul li');
// Set Container Width
$('.carousel .item-list ul').children().each(function() {
carouselWidth += $(this).outerWidth();
$('.carousel .item-list ul').width(carouselWidth + 1000);
});
// function dynamicItemWidth() {
// if ( $('body') <= 1024 ) {
// itemWidth = itemList.width( itemListContainer / 5 );
// }
// if ( $('body') <= 480 ) {
// itemWidth = itemList.width( itemListContainer / 2 );
// }
// if ( $('body') <= 320 ) {
// itemWidth = itemList.width( itemListContainer / 1 );
// }
// }
var itemWidth = itemList.width( itemListContainer / 5 ),
itemSize = itemWidth.width();
$('.carousel .item-list ul').prepend( $('.carousel .item-list ul li:last') );
$('.carousel .item-list ul').css('left', '-' + itemSize + 'px');
$('.btns .next').click(function(){
var move = $('.carousel .item-list ul li').outerWidth();
var leftIndent = parseInt($('.carousel .item-list ul').css('left')) - move;
function animate( repeat, speed ) {
$('.carousel .item-list ul:not(:animated)').animate({'left' : leftIndent}, speed,function(){
$('.carousel .item-list ul').append( $('.carousel .item-list ul li:first') );
$('.carousel .item-list ul').css({'left' : '-' + move + 'px'});
if ( repeat > 1 ) {
animate( ( repeat - 1 ), speed ); }
});
}
animate( 5, 100 );
});
$('.btns .prev').click(function() {
var move = $('.carousel .item-list ul li').outerWidth();
var leftIndent = parseInt($('.carousel .item-list ul').css('left')) + move;
function animate( repeat, speed ) {
$('.carousel .item-list ul:not(:animated)').animate({'left' : leftIndent}, speed,function(){
$('.carousel .item-list ul').prepend($('.carousel .item-list ul li:last'));
$('.carousel .item-list ul').css({'left' : '-' + move + 'px'});
if ( repeat > 1 ) {
animate( ( repeat - 1 ), speed );
}
});
}
animate( 5, 100 );
});
}
}
$(document).ready(function(){
carousel.init();
});
})(jQuery);
----- -------------------------------------------------- ---------------------
----------------------------------------------------------------------------
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* -- #Carousel -- */
.carousel {
position: relative;
}
.carousel .item-list {
overflow: hidden;
}
.carousel .item-list ul {
display: flex;
flex-wrap: wrap;
list-style: none;
margin-bottom: 10px;
position: relative;
overflow: hidden;
}
.carousel .btns {
width: 100%;
z-index: 10;
top: 50%;
}
.carousel .btns li {
display: inline-block;
cursor: pointer;
}
.carousel.-aim-partners {
position: relative;
}
.carousel.-aim-partners .item-list {
max-width: 1204px;
margin: 0 auto;
}
.carousel.-aim-partners .item-list ul li {
float: left;
width: 230px;
margin-right: 40px;
height: 110px;
margin-top: 10px;
margin-bottom: 10px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.carousel.-aim-partners .item-list ul li:nth-child(odd) {
background-color: teal;
}
.carousel.-aim-partners .item-list ul li:nth-child(even) {
background-color: #ccc;
}
.carousel.-aim-partners .btns {
width: 110%;
left: -70px;
}
.carousel.-aim-partners .btns li {
width: 35px;
height: 40px;
}
.carousel.-aim-partners .btns li.prev {
background: url("../images/carousel-icon-arrow.png") no-repeat 15px 0;
}
.carousel.-aim-partners .btns li.next {
background: url("../images/carousel-icon-arrow.png") no-repeat -20px 0;
}
<div class="wrapper">
<div class='carousel -aim-partners'>
<div class='item-list'>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
</ul>
</div>
<ul class="btns">
<li class="prev">
prev
</li>
<li class="next">
next
</li>
</ul>
</div>
</div>
推荐答案
）{
'use strict';
var carousel = {
init：function（）{
var carouselWidth = 0，
itemListContainer =
) { 'use strict'; var carousel = { init : function() { var carouselWidth = 0, itemListContainer =
（'。item-list'）。width（），
itemList =
('.item-list').width(), itemList =
（'。carousel .item-list ul li'）;
//设置容器宽度
('.carousel .item-list ul li'); // Set Container Width
这篇关于固定或聚焦响应滑块项目在中间并偏移滑块的最后和第一端的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
