次のボタンをクリックしてアクティブステージを変更する方法

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

私はあなたのためのスターターコードを作りました。これからあなたはそれをスタイルして見栄えを良くすることができると思います。

$(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>