I've created a manual slider, but i want to make the sliders autoplay. I use the data position to make each slide come to the front when you press the slider / buttons. How can i do that without modify all the js? Or if you can help me with a same slider, but just to be automatic? Any solution is welcome.
jQuery(document).ready(function () {
function detect_active() {
// get active
var get_active = $("#dp-slider .dp_item:first-child").data("class");
$("#dp-dots li").removeClass("active");
$("#dp-dots li[data-class=" + get_active + "]").addClass("active");
}
$("#dp-dots li").click(function () {
$("#dp-dots li").removeClass("active");
$(this).addClass("active");
var get_slide = $(this).attr('data-class');
$("#dp-slider .dp_item[data-class=" + get_slide + "]").hide().prependTo("#dp-slider").fadeIn();
$.each($('#slider .dp_item'), function (index, dp_item) {
$(dp_item).attr('data-position', index + 1);
});
});
$("body").on("click", "#dp-slider .dp_item:not(:first-child)", function () {
var get_slide = $(this).attr('data-class');
$("#dp-slider .dp_item[data-class=" + get_slide + "]").hide().prependTo("#dp-slider").fadeIn();
$.each($('#slider .dp_item'), function (index, dp_item) {
$(dp_item).attr('data-position', index + 1);
});
detect_active();
});
$("#dp-dots .first,#dp-slider .item-1").click(function () {
$(".div-1").addClass('is-active');
$(".item-1 .dp-content").addClass('opacity');
$(".item-1 .dp-content img").addClass('fade-up');
$(".item-2 .dp-content").removeClass('opacity');
$(".item-2 .dp-content img").removeClass('fade-up');
$(".item-3 .dp-content").removeClass('opacity');
$(".item-3 .dp-content img").removeClass('fade-up');
$(".div-2").removeClass('is-active');
$(".div-3").removeClass('is-active');
});
$("#dp-dots .second, .item-2").click(function () {
$(".div-1").removeClass('is-active');
$(".item-1 .dp-content").removeClass('opacity');
$(".item-1 .dp-content img").removeClass('fade-up');
$(".item-2 .dp-content").addClass('opacity');
$(".item-2 .dp-content img").addClass('fade-up');
$(".item-3 .dp-content").removeClass('opacity');
$(".item-3 .dp-content img").removeClass('fade-up');
$(".div-3").removeClass('is-active');
$(".div-2").addClass('is-active');
});
$("#dp-dots .third, .item-3").click(function () {
$(".div-1").removeClass('is-active');
$(".item-1 .dp-content").removeClass('opacity');
$(".item-1 .dp-content img").removeClass('fade-up');
$(".item-2 .dp-content").removeClass('opacity');
$(".item-2 .dp-content img").removeClass('fade-up');
$(".item-3 .dp-content").addClass('opacity');
$(".item-3 .dp-content img").addClass('fade-up');
$(".div-2").removeClass('is-active');
$(".div-3").addClass('is-active');
});
});#home .content-slider {
height: 600px;
display: flex;
justify-content: flex-end;
position: relative;
align-items: center;
margin-top: -100px;
}
#home .text {
margin-right: 50px;
margin-top: -150px;
}
#home .div-1, #home .div-2, #home .div-3 {
opacity: 0;
left: -1000px;
position: absolute;
width: 320px;
transition: 1s ease-in-out;
}
#home .is-active {
opacity: 1;
left: 160px;
}
#home .div-1, #home .div-2, #home .div-3 {
text-align: right;
}
#home .div-1 h1, #home .div-2 h1, #home .div-3 h1 {
font-family: Raleway-black;
color: #000;
text-transform: uppercase;
}
#home .div-1 p, #home .div-2 p, #home .div-3 p {
font-family: Raleway-semi-bold;
color: #333333;
}
#home .extra-bold {
font-family: Raleway-extra-bold;
}
#home #slider {
margin-right: 200px;
margin-top: -150px;
}
#home .dp-wrap {
margin: 0 auto;
position: relative;
height: 100%;
width: 750px;
}
#home #dp-slider {
width: 100%;
height: 100% !important;
}
#home #slider .dp_item {
display: block;
position: absolute;
color: #FFF;
border-radius: 10px;
transition: transform 1.2s;
}
#home #slider .dp-content {
transition: 0.5s;
opacity: 0;
}
#home #slider .item-1 {
background-color: #cf132a;
}
#home .opacity {
opacity: 1 !important;
}
#home #slider .item-1 img, #home #slider .item-2 img, #home #slider .item-3 img {
width: 300px;
filter: drop-shadow(0px 20px 10px rgba(0, 0, 0, 0.3));
margin-left: 50px;
top: 50px;
position: relative;
z-index: 1;
transition: 1s ease-in-out;
}
#home .fade-up {
top: 5px !important;
}
#home #slider .item-1 .absolute, #home #slider .item-2 .absolute, #home #slider .item-3 .absolute {
font-family: Raleway-black;
color: #a2a2a2;
opacity: 0.33;
position: absolute;
letter-spacing: 15px;
font-size: 1.8rem;
}
#home #slider .item-1 .line-1 {
bottom: -60px;
right: 30px;
}
#home #slider .item-1 .line-2 {
bottom: -100px;
right: -10px;
}
#home #slider .item-2 .line-1 {
bottom: -60px;
right: 20px;
}
#home #slider .item-2 .line-2 {
bottom: -100px;
right: 0;
}
#home #slider .item-3 .line-1 {
bottom: -60px;
right: 50px;
}
#home #slider .item-3 .line-2 {
bottom: -100px;
right: 0;
}
#home #slider .item-2 {
background-color: #e3e3e3;
}
#home #slider .item-3 {
background-color: #ffffff;
}
#home #dp-slider .dp_item:first-child {
z-index: 10 !important;
transform: rotateY(0deg) translateX(0px) !important;
}
#home #slider .dp_item[data-position="2"] {
z-index: 9;
transform: rotateY(0deg) translateX(10%) translateY(-15%) scale(0.9);
}
#home .transform {
transform: rotateY(0deg) translateX(10%) translateY(-15%) scale(0.9) !important;
}
#home #slider .dp_item[data-position="3"] {
z-index: 8;
transform: rotateY(0deg) translateX(20%) translateY(-25%) scale(0.8);
}
#home #dp-dots {
display: flex;
position: absolute;
top: -20px;
z-index: 12;
right: 30px;
cursor: default;
padding: 0;
}
#home #dp-dots li {
list-style: none;
width: 9px;
background: #fff;
border-radius: 10px;
margin: 0 3px;
filter: drop-shadow(0px 2px 1px rgba(0, 0, 0, 0.6));
cursor: pointer;
}
#home #dp-dots .first {
height: 55px;
}
#home #dp-dots .second {
height: 45px;
}
#home #dp-dots .third {
height: 35px;
}
#home #dp-dots li.active {
background: #cf132a;
}
#home #slider .dp_item {
box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.2);
width: 750px;
height: 280px;
}
#home #dp-slider .dp_item:hover:not(:first-child) {
cursor: pointer;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script><div id="home"><div class="content-slider"><div class="text"><div class="div div-1 is-active" data-class="1" data-position="1"><h1>The New Hydra.VOX</h1><p>With state-of-the-art tech the VOX is the newest generation of Audiobyte D/A Converters, the
result of years of research.</p></div><div class="div div-2" data-class="2" data-position="2"><h1>The New Hydra.HUB</h1><p>The next step towards the ultimate Audio Stack – the hub packs enhanced audio transport
capability with a set of digital tools for even the most demanding user.</p></div><div class="div div-3" data-class="3" data-position="3"><h1>The Hydra.ZAP Power Supply</h1><p>The ZAP is the dedicated, low-noise ultra-capacitor based power supply for the VOX HUB stack.
Attain supreme control over your digital equipment.</p></div></div><div id="slider"><div class="dp-wrap"><div id="dp-slider"><div class="dp_item item-1" data-class="1" data-position="1"><div class="dp-content opacity"><img class="fade-up" src="http://www.pngmart.com/files/6/Amplifier-PNG-File.png" alt=""><h1 class="absolute line-1">SUPREME IMMERSION</h1><h1 class="absolute line-2">CONTEMPORARY DESIGN</h1></div></div><div class="dp_item item-2" data-class="2" data-position="2"><div class="dp-content"><img class="fade-up" src="http://www.pngmart.com/files/6/Amplifier-PNG-File.png" alt=""><h1 class="absolute line-1">VERSATILITY</h1><h1 class="absolute line-2">DIGITAL MASTERY</h1></div></div><div class="dp_item item-3" data-class="3" data-position="3"><div class="dp-content"><img class="fade-up" src="http://www.pngmart.com/files/6/Amplifier-PNG-File.png" alt=""><h1 class="absolute line-1">HIGH PERFORMANCE</h1><h1 class="absolute line-2">NO COMPROMISE</h1></div></div></div><ul id="dp-dots"><li data-class="1" class="active first"></li><li data-class="2" class="second"></li><li data-class="3" class="third"></li></ul></div></div></div></div>