UPDATE: I have made modifications to the code and included a more detailed example to clarify my objective.
I successfully created a slider using jQuery. Each element is assigned the class .active, which reveals the hidden elements.
My current goal is to implement a swipe animation, allowing the images to transition from left to right.
The challenge lies in integrating this feature into my existing complex code.
For reference, here is an example of the desired outcome:
Below is the code snippet:
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/con... (message truncated)