Как сменить активную сцену, когда я нажимаю следующую кнопку

Question

Я пытаюсь создать слайдер с шагом, и я не могу найти хорошее решение с этим, и я попытался изменить многие слайдеры, такие как карусель совы и слайдер, но это не так, т работы.

jQuery(".step1").click(function() { 
 
     jQuery('.steps .stp .active').removeClass('active'); 
 
     jQuery('.hot-section-right .active').removeClass('active'); 
 
     jQuery('.step1 .stepp').addClass('active'); 
 
     jQuery('.step-one').addClass('active'); 
 
    }); 
 
    jQuery(".step2").click(function() { 
 
     jQuery('.steps .stp .active').removeClass('active'); 
 
     jQuery('.hot-section-right .active').removeClass('active'); 
 
     jQuery('.step2 .stepp').addClass('active'); 
 
     jQuery('.step-two').addClass('active'); 
 
    }); 
 
    jQuery(".step3").click(function() { 
 
     jQuery('.steps .stp .active').removeClass('active'); 
 
     jQuery('.hot-section-right .active').removeClass('active'); 
 
     jQuery('.step3 .stepp').addClass('active'); 
 
     jQuery('.step-three').addClass('active'); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="steps"> 
 
    <div class="step1 stp"> <span class="stepp active">STEP 1</span></div> 
 
    <div class="step2 stp"> <span class="stepp">STEP 2</span></div> 
 
    <div class="step3 stp"> <span class="stepp">STEP 3</span></div> 
 
</div> 
 
<div class="hot-section-right"> 
 
    <div class="step-one active"><img src="img/xstep-1.png"></div> 
 
    <div class="step-two"><img src="img/xstep-2.png"></div> 
 
    <div class="step-three"><img src="img/xstep-2.png"></div> 
 
</div>

Answer 1

Я сделал код стартера для вас. Я думаю, из этого вы могли бы стилизовать его и заставить его выглядеть лучше. Я также играл немного с кодом и создал автозапуск function.I надеется, что это поможет вам:

$(document).on('click', '.stepp', function() { 
 
    $('.active_btn').removeClass('active_btn'); 
 
    $(this).addClass('active_btn'); 
 
    var id = $(this).attr('id'); 
 
    id = id.replace('step', ''); 
 
    $('.active_img').removeClass('active_img'); 
 
    $('#img' + id).addClass('active_img'); 
 
    currentSlide = id - 1; 
 
}); 
 

 
$(document).on('click', '.img', function() { 
 
    $('.active_img').removeClass('active_img'); 
 
    $(this).addClass('active_img'); 
 
    var id = $(this).attr('id'); 
 
    id = id.replace('img', ''); 
 
    $('.active_btn').removeClass('active_btn'); 
 
    $('#step' + id).addClass('active_btn'); 
 
    currentSlide = id - 1; 
 
}); 
 

 
var currentSlide = 0; //start index 
 
var totalElements = $(".img").length; //total number of slides 
 

 

 
function autoplay() { 
 
    $(".img").eq(currentSlide).click(); 
 
    currentSlide++; 
 
    if (currentSlide == totalElements) { 
 
     currentSlide = 0; //resetting the index when the end is reached 
 
    } 
 
} 
 

 
//call autoplay using setInterval every 1s 
 
setInterval(autoplay, 1000);

body{ 
 
    background: #F4F4F5; 
 
} 
 
.steps{ 
 
    margin-bottom: 10px; 
 
    border: 1px solid #adadad; 
 
    border-radius: 20px; 
 
    max-width: 300px; 
 
    width: 100%; 
 
    text-align: center; 
 
    padding: 5px 5px; 
 
    box-sizing: border-box; 
 
} 
 
.img{ 
 
    opacity: 0.6; 
 
    -webkit-transition: all 350ms; 
 
    -moz-transition: all 350ms; 
 
    -o-transition: all 350ms; 
 
    transition: all 350ms; 
 
    max-width: 100px; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 
.img img{ 
 
    cursor: pointer; 
 
    max-width: 100%; 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
.stp{ 
 
    display: inline-block; 
 
    cursor: pointer; 
 
} 
 
.stepp{ 
 
    -webkit-transition: all 350ms; 
 
    -moz-transition: all 350ms; 
 
    -o-transition: all 350ms; 
 
    transition: all 350ms; 
 
    padding: 5px 10px; 
 
    border-radius: 20px; 
 
    display: block; 
 
} 
 
.active_btn{ 
 
    background: #fff; 
 
    box-shadow: 2px 2px 10px #000; 
 
} 
 
.active_img{ 
 
    opacity: 1; 
 
    max-width: 140px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="steps"> 
 
    <div class="stp"> <span id='step1' class="stepp active_btn">STEP 1</span></div> 
 
    <div class="stp"> <span id='step2' class="stepp">STEP 2</span></div> 
 
    <div class="stp"> <span id='step3' class="stepp">STEP 3</span></div> 
 
</div> 
 
<div class="hot-section-right"> 
 
    <div id='img1' class="img active_img"><img src="http://cdn.craftsy.com/upload/1816128/project/119986/list_1891_119986_PaulsLandscapes_6.jpg"></div> 
 
    <div id='img2' class="img"><img src="http://cdn.craftsy.com/upload/1816128/project/119986/list_1891_119986_PaulsLandscapes_6.jpg"></div> 
 
    <div id='img3' class="img"><img src="http://cdn.craftsy.com/upload/1816128/project/119986/list_1891_119986_PaulsLandscapes_6.jpg"></div> 
 
</div>