0
更新：コードを更新し、達成したいことを明確にするための良い例を追加しました。jQuery CSS - Sliderアニメーション
jQueryを使用してスライダーを構築しました。 私は各要素に、隠し要素を表示するクラス.activeを与えます。
スワイプアニメーションが必要なので、画像は左から右に表示されます。
問題は、すでに複雑なコードがあり、その達成方法がわかりません。ここで
は私が達成したいものの例である：ここではhttps://bootsnipp.com/snippets/Padax
は、あなたがこのような何かを行うことができ、コード
https://codepen.io/Insane415/pen/NggLxe
<div class="slider">
<div class="row">
<div class="col-md-4">
<div class="image-holder">
<img src="http://via.placeholder.com/350x150" style="display:none;" class="active">
<img src="http://via.placeholder.com/350x150" style="display:none;">
<img src="http://via.placeholder.com/350x150" style="display:none;">
<img src="http://via.placeholder.com/350x150" style="display:none;">
</div>
<div class="bullet-points">
<a href="_self" class="active-bullet">•</a>
<a href="_self">•</a>
<a href="_self">•</a>
<a href="_self">•</a>
</div>
</div>
<div class="col-md-2">
<div class="thumbnails">
<img src="http://via.placeholder.com/350x150" class="active-thumbnail">
<img src="http://via.placeholder.com/350x150">
<img src="http://via.placeholder.com/350x150">
<img src="http://via.placeholder.com/350x150">
</div>
</div>
<div class="col-md-6 center-me" style="height:100%;">
<div class="text-holder">
<div class="text active">
<p>Lorem Ipsum</p>
<h2>Giant Heading 1</h2>
<p>Just some more text</p>
<a href="/de/tariffinder" class="button">zur Preisübersicht</a>
</div>
<div class="text">
<p>Lorem Ipsum</p>
<h2>Giant Heading 2</h2>
<p>Some more text</p>
<a href="/de/tariffinder" class="button">zur Preisübersicht</a>
</div>
<div class="text">
<p>Lorem Ipsum</p>
<h2>Giant Heading 3</h2>
<p>Some more text</p>
<a href="/de/tariffinder" class="button">zur Preisübersicht</a>
</div>
<div class="text">
<p>Lorem Ipsum</p>
<h2>Giant Heading 4</h2>
<p>Some more text</p>
<a href="/de/tariffinder" class="button">zur Preisübersicht</a>
</div>
</div>
</div>
</div>
.text-holder .text p{margin: 0!important;}
.slider{
padding: 15px;
margin-top: 50px;
background: url('/images/content/slider/Banner_Hintergrund_telbes-01.jpg');
background-repeat: no-repeat!important;
background-size: cover!important;
display: inline-block;
width: 100%;
border: 1px solid #ddd;
}
.slider .bullet-points a{
color: #ccc;
}
.thumbnails{
height: 195.11px;
margin-left: -25px;
}
.thumbnails img{
display:block;
max-height: 31.65%;
margin-bottom: 5px;
}
.thumbnails img:hover{
cursor: pointer;
}
.text-holder{
margin-left: 0px;
height: 100%;
}
.text-holder .text{
display: none;
}
/*display active image*/
.active{
display: block!important;
}
/*hide thumbnail when image is active*/
.active-thumbnail{
display: none!important;
}
.bullet-points{
display: block;
text-align: center;
margin-top: 15px;
}
.bullet-points a{
font-size: 40px;
text-decoration: none;
color: #ccc;
}
.active-bullet{
color: #E22C26!important;
}
/*.image-holder{
max-width: 350px!important;
}
.image-holder img{
max-width: 350px!important;
}*/
.image-holder img{
/* text-align: center!important; */
margin: 0 auto;
}
.bullet-points a:hover{
color: #E22C26!important;
}
.center-me{
margin-top: 4%;
}
.text-holder a{
margin-top: 15px;
padding: 10px 20px 10px 20px;
}
.text-holder a:hover{
padding:10px 20px 10px 20px;
}
.text-holder{
font-size: 130%;
color: inherit;
}
.text-holder h2{
font-size: 200%;
}
$(document).ready(function() {
var images = [$(".image-holder img:first-child"), $(".image-holder img:nth-of-type(2)"), $(".image-holder img:nth-of-type(3)"), $(".image-holder img:last-child")];
var thumbnails = [$(".thumbnails img:first-child"), $(".thumbnails img:nth-of-type(2)"), $(".thumbnails img:nth-of-type(3)"), $(".thumbnails img:last-child")];
var text = [$(".text-holder .text:first-child"), $(".text-holder .text:nth-of-type(2)"), $(".text-holder .text:nth-of-type(3)"), $(".text-holder .text:last-child")];
var backgrounds = ["url('/images/content/slider/Banner_Hintergrund_telbes-01.jpg')", "url('/images/content/slider/Banner_Hintergrund_telbes-02.jpg')", "url('/images/content/slider/Banner_Hintergrund_telbes-03.jpg')", "url('/images/content/slider/Banner_Hintergrund_telbes-04.jpg')"];
var bullets = [$(".bullet-points a:first-child"), $(".bullet-points a:nth-of-type(2)"), $(".bullet-points a:nth-of-type(3)"), $(".bullet-points a:last-child")];
var i = 1;
var currentSlide = 1;
var time = 3000;
var sliderTimer = setInterval(slider, time);
// slider navigation
$('.bullet-points a, .thumbnails img').click(function(e) {
e.preventDefault();
var pos = $(this).index();
clearInterval(sliderTimer); // stop auto slideshow
sliderTimer = false;
slider(pos);
});
function slider(pos) {
currentSlide = i;
if (typeof(pos) !== 'undefined') {
i = pos;
images[currentSlide - 1].removeClass("active").addClass('transition');
text[currentSlide - 1].removeClass("active");
thumbnails[currentSlide - 1].removeClass("active-thumbnail");
bullets[currentSlide - 1].removeClass("active-bullet");
}
if (i != 0) {
images[i - 1].removeClass("active").addClass('transition');
text[i - 1].removeClass("active");
thumbnails[i - 1].removeClass("active-thumbnail");
bullets[i - 1].removeClass("active-bullet");
}
if (i == images.length) { i = 0 }
images[i].addClass("active");
setTimeout(function() {
$(".image-holder img").removeClass('transition');
},1000);
text[i].addClass("active");
thumbnails[i].addClass("active-thumbnail");
bullets[i].addClass("active-bullet");
i++;
if (!sliderTimer) {
sliderTimer = setInterval(slider, time); // start auto slideshow
}
}
});
は、なぜあなたは、このためだけCSS3を使用したくありませんか？ – StuiterSlurf