0
現在、私が現在作成しているウェブサイト用に複数のスライダを作成中です。今私はそれを仕上げる途中で、解決できないような問題に遭遇したと信じています複数のスライダを作成し、それらを別々に機能させる
複数のスライダーがあるので、私はlengthを取得したり、要素（.slider）。 jquery lengthの値は、on-clickトリガー/イベントの条件の一部として使用されます。これは、下記のifの条件です。どのようにクリックして私の悪い英語のためのスライダを左に移動し、右
謝罪をするためにトリガーを..
$(window).on('load', function() {
\t var sliderWrapper = $('.slider-wrapper'),
\t sliderWrapperWidth = sliderWrapper.width(),
\t slider = $('.slider'),
\t slideItems = $('.slider .slide-items'),
\t position = 0;
//var itemLengths = [];
\t $('.slider-wrapper .slider').each(function() {
\t \t var items = $(this).find('.slide-items').length;
\t \t var sliderBox = $(this);
\t \t //itemLengths.push(items.length);
\t \t slideItems.outerWidth(sliderWrapperWidth/2);
\t \t sliderBox.width(slideItems.outerWidth() * items )
});
$('.slider-wrapper .slider .buttons .prev').on('click', function(e) {
event.stopPropagation();
if(position > 0) {
position--;
$('.slider-wrapper .slider').css({'right' : position*slideItems.width() });
}
});
$('.slider-wrapper .slider .buttons .next').on('click', function(e) {
event.stopPropagation();
\t if(position < totalSlides - 1) {
\t position++;
\t $('.slider-wrapper .slider').css({'right' : position*slideItems.width() });
\t }
})
})/* 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; }
* {
box-sizing: border-box; }
.container {
max-width: 1280px;
margin: 0 auto;
}
.container .slider-wrapper {
margin-bottom: 40px;
background-color: grey;
overflow: hidden;
}
.container .slider-wrapper .slider {
position: relative;
right: 0;
display: flex;
flex-wrap: wrap;
overflow: hidden;
}
.container .slider-wrapper .slider > div {
padding: 10px;
background-color: #e5d0d0;
}
.container .slider-wrapper .slider > div p {
color: purple;
}
.container .slider-wrapper .buttons {
display: flex;
justify-content: space-between;
background: beige;
padding: 10px 0;
}
.container .slider-wrapper .buttons div {
background-color: cyan;
}
/*# sourceMappingURL=style.css.map */<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
\t <title>Multiple Sliders</title>
\t <link rel="stylesheet" type="text/css" href="style.css">
\t <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
\t <script src="script.js"></script>
</head>
<body>
<div class="container">
<div class="slider-wrapper">
<div class="slider">
<div class="slide-items">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
</div>
<div class="slide-items">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
</div>
<div class="slide-items">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
</div>
</div>
<div class="buttons">
<div class="prev">
prev
</div>
<div class="next">
next
</div>
</div>
</div>
<div class="slider-wrapper">
<div class="slider">
<div class="slide-items">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
</div>
</div>
<div class="buttons">
<div class="prev">
prev
</div>
<div class="next">
next
</div>
</div>
</div>
<div class="slider-wrapper">
<div class="slider">
<div class="slide-items">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
</div>
<div class="slide-items">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
</div>
</div>
<div class="buttons">
<div class="prev">
prev
</div>
<div class="next">
next
</div>
</div>
</div>
<div class="slider-wrapper">
<div class="slider">
<div class="slide-items">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
</div>
</div>
<div class="buttons">
<div class="prev">
prev
</div>
<div class="next">
next
</div>
</div>
</div>
<div class="slider-wrapper">
<div class="slider">
<div class="slide-items">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
</div>
<div class="slide-items">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
</div>
</div>
<div class="buttons">
<div class="prev">
prev
</div>
<div class="next">
next
</div>
</div>
</div>
</div>
</body>
</html>
あなたのイベント内の '' $（この）を使用してので見てください。イベントをトリガした要素を選択します。 – WizardCoder
スライドを別々に動かすために '$（this） 'を使う方法をまだ分かっています。 – clestcruz