4
自分が動作しているウェブサイトのループを使って自分のカルーセルを構築しました。今、私の次の目的は、サイズ変更時に応答性と流動性を持たせることです。私はそれを適応させることに成功しましたが、私はちょうど、サイズを流動的に変更するのではなく、ブラウザの次元に基づいて具体的にサイズを変更する方法が気に入らないのです。ここで私が取り組んでいるコードのサンプルです。サイズ変更時にカルーセルスライダを反応させようとしています
私はアイテムのサイズを変更しようとしており、表示されているアイテムの数に基づいてスライドしています。 768pxのビューポートであれば、3つのアイテムが表示され、カルーセルは3、スライドショーは640pxまたは480pxと表示されます。これは、私はすでに準備がそこカルーセルを作ったがいることを知っている1
で1つの項目とスライドが表示されますが、私は試してみて、スクラッチ
(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);/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
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;
}
/* -- End Carousel -- */
/*# sourceMappingURL=style.css.map */<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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">
<i class="fa fa-angle-left" aria-hidden="true">prev</i>
</li>
<li class="next">
<i class="fa fa-angle-right" aria-hidden="true">next</i>
</li>
</ul>
</div>
</div>
準備が整ったカルーセルを使用する代わりに、最初からビルドすることを学ぶことができたので、お勧めします:) – clestcruz
私は一から物を作るのが好きですが、時には生産性を高める助けになります。既存のソリューションを統合することによって）。あなたはbtwを歓迎します。 – MegaColorBoy