-1
基本的なjQueryのみのスライダーで、矢印クリックでスライド間をフェードすることになっています。jQuery-onlyスライダーはスライドしません。
私はプラグインなしで同様の方法を使用する前に同様のものを作ったので、なぜこれがうまくいかないのか分からないようです。
JSFiddle：https://jsfiddle.net/b988tfna/1/。
また、JSFiddleのメインスライダーの下に、このスライダーのボタン/ドットを整列させたり、適切にサイズを変更したりするための覚え書きのコードがあります。高さと幅は同じに設定されていますが、ワイドよりも背が高く、余白は左右です。自動では中央で整列されません。
これらの問題を1つの投稿にまとめるのではなく、何も解決せずに何時間も解決しようとしています。
ありがとうございました。
HTML：
<div class="sliderArrow">
<a href="#" id="prevArrow"><img src="img/prevArrow.png" style="height:85%; width:85%"></a>
</div>
<div id="slider">
<div class="slide activeSlide">
<div class="slideContent">
<h1>Creating Digital Success Stories.</h1>
<h4>Intro | Innovation | Results</h4>
<p>Mauris sed ipsum nisi, Aliquam eget sagittis erat. Nam ut auctor erat. Maecenas sollicitudin dignissim urna, eu elementum ante varius at. Mauris porttitorultrices mauris, eget pretium lorem blandit in. Nulla sollicitudin viverra ante sed venenatis.</p>
<a href="#contactUs" id="enquireButton" class="button" alt="Enquire Now Button" style="position:absolute; margin-top:20px">Enquire Now</a>
</div>
</div>
<div class="slide">
<div class="slideContent">
<h1>Slide 2.</h1>
<h4>Intro | Innovation | Results</h4>
<p style="font-family:'Effra-Light'">Mauris sed ipsum nisi, Aliquam eget sagittis erat. Nam ut auctor erat. Maecenas sollicitudin dignissim urna, eu elementum ante varius at. Mauris porttitorultrices mauris, eget pretium lorem blandit in. Nulla sollicitudin viverra ante sed venenatis.</p>
<a href="#contactUs" id="enquireButton" class="button" alt="Enquire Now Button" style="position:absolute; margin-top:20px">Enquire Now</a>
</div>
</div>
<div class="slide">
<div class="slideContent">
<h1>Slide 3.</h1>
<h4>Intro | Innovation | Results</h4>
<p style="font-family:'Effra-Light'">Mauris sed ipsum nisi, Aliquam eget sagittis erat. Nam ut auctor erat. Maecenas sollicitudin dignissim urna, eu elementum ante varius at. Mauris porttitorultrices mauris, eget pretium lorem blandit in. Nulla sollicitudin viverra ante sed venenatis.</p>
<a href="#contactUs" class="button" alt="Enquire Now Button" style="position:absolute; margin-top:20px">Enquire Now</a>
</div>
</div>
<div class="slide">
<div class="slideContent">
<h1>Slide 4.</h1>
<h4>Intro | Innovation | Results</h4>
<p style="font-family:'Effra-Light'">Mauris sed ipsum nisi, Aliquam eget sagittis erat. Nam ut auctor erat. Maecenas sollicitudin dignissim urna, eu elementum ante varius at. Mauris porttitorultrices mauris, eget pretium lorem blandit in. Nulla sollicitudin viverra ante sed venenatis.</p>
<a href="#contactUs" id="enquireButton" class="button" alt="Enquire Now Button" style="position:absolute; margin-top:20px">Enquire Now</a>
</div>
</div>
</div>
<div class="sliderArrow">
<a href="#" id="nextArrow"><img src="img/nextArrow.png" style="height:85%; width:85%"></a>
</div>
CSS：
#slider
{
margin-left:auto;
margin-right:auto;
width:100%;
height:100vh;
color:#fff;
z-index:2;
padding:100px 0;
}
.slide
{
display:none;
width:100%;
}
.activeSlide
{
display:block;
}
.sliderArrow
{
position:relative;
height:auto;
top:50%;
margin:-200px 10% 0 10%;
z-index:99;
}
.slideContent
{
width:65%;
margin-left:auto;
margin-right:auto;
}
JS：
$(document).ready(function() {
$('#nextArrow').click(function() {
var currentSlide = $('.activeSlide');
var nextSlide = currentSlide.next();
if (nextSlide.length == 0) {
nextSlide = $('.slide').first();
};
currentSlide.fadeOut(1000).removeClass('activeSlide');
nextSlide.fadeIn(1000).addClass('activeSlide');
});
$('#prevArrow').click(function() {
var currentSlide = $('.activeSlide');
var prevSlide = currentSlide.prev();
if (prevSlide.length == 0) {
prevSlide = $('.slide').last();
};
currentSlide.fadeOut(1000).removeClass('activeSlide');
prevSlide.fadeIn(1000).addClass('activeSlide');
});
};