練習用にjQueryを使用して独自のスライドプラグインを作成しています。問題は、理由はわかりませんが、何らかの理由で三項演算子が機能しないことです。スライダーは、ユーザーがprev
コードから条件として登録したボタンをクリックしたときにのみ応答します。
ユーザーがnext
ボタンを押すと右側に移動するはずだと思っていましたが、next
ボタンが完全に壊れています。
この問題を解決するために、2つの異なるトリガーボタンを作成し、複数のifステートメントを使用することもできますが、三項演算子を使用して1行にマージし、コードを可能な限り最小化します。
この問題をどのように解決しますか?
コードブロック:
(function($) {
$.fn.sliderModule = function(options) {
const defaults = {
myGallery: $(this)
};
var settings = $.extend({
myItems: null,
trigger: null,
current: null
}, defaults, options);
$(settings.trigger).on('click', function() {
if (!(defaults.myGallery.is(':animated'))) {
var movement = settings.trigger.hasClass('prev') ? -1 : 1
defaults.myGallery.animate({left: "+=" + (100 / settings.current) * movement + '%'}); // It doesn't respond the `next` button.
};
});
};
})(jQuery);
$(function() {
$('#slide-list').sliderModule({
myItems: '#img-slider',
trigger: $('#buttons').find('#button'),
current: 4
});
})
li {
list-style-type: none;
}
#slide-container {
position: relative !important;
width: 1170px;
margin: 0 auto;
overflow: hidden;
height: auto;
}
#slide-list {
margin: 0 auto;
position: relative;
display: flex;
width: 1170px;
}
#buttons {
width: 1170px;
margin: 0 auto;
display: flex;
justify-content: center;
}
#buttons li {
margin: 0 20px;
}
.slide-l-quarter {
flex-shrink: 0;
position: relative;
white-space: nowrap;
width: calc(100% / 4);
}
.slide-l-quarter img {
width: 100%;
height: auto;
}
<div id="slide-container">
<ul id="slide-list">
<li class="slide-l-quarter" id="image-slider">
<img src="https://i.imgur.com/PVsHlX9.jpg" alt="">
</li>
<li class="slide-l-quarter" id="image-slider">
<img src="https://i.imgur.com/WfWhNnU.jpg" alt="">
</li>
<li class="slide-l-quarter" id="image-slider">
<img src="https://i.imgur.com/eqHdnNs.jpg" alt="">
</li>
<li class="slide-l-quarter" id="image-slider">
<img src="https://i.imgur.com/0jziABY.jpg" alt="">
</li>
</ul>
</div>
<ul id="buttons">
<li id="button" class="prev">Prev</li>
<li id="button" class="next">Next</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
三項演算子の使用に問題はありません。しかし、あなたは途中でいくつかの間違いを犯しました。
これをHTMLに含めることはできません。
<li id="button" class="prev">Prev</li>
<li id="button" class="next">Next</li>
同じセレクターを持つために複数の要素が必要な場合は、代わりにクラスを使用してください。
<li class="button prev">Prev</li>
<li class="button next">Next</li>
settings.trigger
両方のボタンを選択しますこれを行うとき:
settings.trigger.hasClass('prev')
両方のボタンを参照しています。ユーザーがクリックしたものだけが必要です。
$(this).hasClass('prev')
(function($) {
$.fn.sliderModule = function(options) {
const defaults = {
myGallery: $(this)
};
var settings = $.extend({
myItems: null,
trigger: null,
current: null
}, defaults, options);
$(settings.trigger).on('click', function() {
if (!(defaults.myGallery.is(':animated'))) {
var movement = $(this).hasClass('prev') ? -1 : 1;
defaults.myGallery.animate({left: "+=" + (100 / settings.current) * movement + '%'});
};
});
};
})(jQuery);
$(function() {
$('#slide-list').sliderModule({
myItems: '#img-slider',
trigger: $('#buttons').find('.button'),
current: 4
});
})
li {
list-style-type: none;
}
#slide-container {
position: relative !important;
width: 1170px;
margin: 0 auto;
overflow: hidden;
height: auto;
}
#slide-list {
margin: 0 auto;
position: relative;
display: flex;
width: 1170px;
}
#buttons {
width: 1170px;
margin: 0 auto;
display: flex;
justify-content: center;
}
#buttons li {
margin: 0 20px;
}
.slide-l-quarter {
flex-shrink: 0;
position: relative;
white-space: nowrap;
width: calc(100% / 4);
}
.slide-l-quarter img {
width: 100%;
height: auto;
}
<div id="slide-container">
<ul id="slide-list">
<li class="slide-l-quarter" id="image-slider">
<img src="https://i.imgur.com/PVsHlX9.jpg" alt="">
</li>
<li class="slide-l-quarter" id="image-slider">
<img src="https://i.imgur.com/WfWhNnU.jpg" alt="">
</li>
<li class="slide-l-quarter" id="image-slider">
<img src="https://i.imgur.com/eqHdnNs.jpg" alt="">
</li>
<li class="slide-l-quarter" id="image-slider">
<img src="https://i.imgur.com/0jziABY.jpg" alt="">
</li>
</ul>
</div>
<ul id="buttons">
<li class="button prev">Prev</li>
<li class="button next">Next</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加