진행 막대가있는 슬라이더 만들기

Question

도움이 필요합니다. 이 사이트처럼 진행 막대가있는 슬라이더를 만들고 싶습니다. http://www.kaeuferportal.de/dienstleistungen/altersvorsorge/formular/auswahl/

코드를 정렬 할 시스템을 찾을 수 없습니다. 도와주세요.

감사

Answer 1

$(document).ready(function(){ 
 

 
\t var totalSteps = 30; 
 
\t var barWidth = $('.barWrap').width(); 
 
\t var prog = barWidth/totalSteps; 
 
\t var currentValue = 1; 
 
    var maxValue = 30; 
 

 
\t // console.log(perc); 
 

 
\t $('#bar').css('width', prog); 
 

 
\t $('#nextNav').click(function(){ 
 
    \t currentValue++; 
 
    if (currentValue > maxValue) 
 
    \t currentValue = maxValue; 
 
    
 
\t \t $('#bar').css('width', prog * currentValue); 
 
\t \t $("#stepNum").text(currentValue); 
 
\t }); 
 

 
\t $('#backNav').click(function(){ 
 
    \t currentValue--; 
 
    if (currentValue < 1) 
 
    \t currentValue = 1; 
 
    
 
\t \t $('#bar').css('width', prog * currentValue); 
 
\t \t $("#stepNum").text(currentValue); 
 
\t }); 
 
});

.progress { 
 
    width: 100%; 
 
    height: 50px; 
 
    color: #9F6000; 
 
    background-color: #FEEFB3; 
 
    border-bottom: 1px solid #9F6000; 
 
    overflow: hidden; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
.progress h3, .progress h4 { 
 
    margin: 0; 
 
    color: #9F6000; 
 
} 
 

 
.progress h3 { 
 
    padding-top: 5px; 
 
} 
 

 
.progress .step { 
 
    width: 20%; 
 
    float: left; 
 
    text-align: center; 
 
} 
 

 
.progress .progBar { 
 
    width: 80%; 
 
    float: left; 
 
    text-align: center; 
 
    height: 30px; 
 
    padding-top: 10px; 
 
} 
 

 
.progress .progBar .barWrap { 
 
    border: 1px solid #9F6000; 
 
    height: 100%; 
 
    border-radius: 50px; 
 
    overflow: hidden; 
 
} 
 

 
.progress .progBar .barWrap .bar { 
 
    height: 100%; 
 
    background-color: #9F6000; 
 
} 
 

 
.navBtns { 
 
    position: fixed; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 35px; 
 
    overflow: hidden; 
 
} 
 

 
.navBtns .backNav, .navBtns .nextNav { 
 
    width: 50%; 
 
    float: left; 
 
    text-align: center; 
 
    color: #00529B; 
 
    background-color: #BDE5F8; 
 
    height: 100%; 
 
    border-top: 1px solid #00529B; 
 
    font-weight: bold; 
 
    padding-top: 8px; 
 
    -moz-transition: all, 0.4s; 
 
    -o-transition: all, 0.4s; 
 
    -webkit-transition: all, 0.4s; 
 
    transition: all, 0.4s; 
 
} 
 

 
.navBtns .backNav:hover, .navBtns .nextNav:hover { 
 
    cursor: pointer; 
 
    background-color: #1175a5; 
 
    -moz-transition: all, 0.4s; 
 
    -o-transition: all, 0.4s; 
 
    -webkit-transition: all, 0.4s; 
 
    transition: all, 0.4s; 
 
    color: white; 
 
} 
 

 
.navBtns .nextNav { 
 
    color: #4F8A10; 
 
    background-color: #DFF2BF; 
 
    border-top: 1px solid #4F8A10; 
 
} 
 

 
.navBtns .nextNav:hover { 
 
    cursor: pointer; 
 
    background-color: #68941e; 
 
    -moz-transition: all, 0.4s; 
 
    -o-transition: all, 0.4s; 
 
    -webkit-transition: all, 0.4s; 
 
    transition: all, 0.4s; 
 
    color: white; 
 
} 
 

 
.mainContent { 
 
    max-width: 1000px; 
 
    padding: 15px; 
 
    position: absolute; 
 
    border: 2px solid #019FE9; 
 
    margin: 0 auto; 
 
    top: 50%; 
 
    left: 0; 
 
    right: 0; 
 
    -moz-transform: translateY(-50%); 
 
    -ms-transform: translateY(-50%); 
 
    -webkit-transform: translateY(-50%); 
 
    transform: translateY(-50%); 
 
} 
 

 
.mainContent h4 { 
 
    margin-top: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="progress"> 
 
\t <div class="step"> 
 
\t \t <h3>Total Slide</h3> 
 
\t \t <h4><span id="stepNum" class="stepNum">1</span> of 30</h4> 
 
\t </div> 
 
\t <div class="progBar"> 
 
\t \t <div class="barWrap"> 
 
\t \t \t <div id="bar" class="bar"></div> 
 
\t \t </div> 
 
\t </div> 
 
</div> 
 

 
<div class="mainContent"> 
 
SLIDER HERE ., FORM OR Any Thing Which You want .. 
 
</div> 
 

 
<div class="navBtns"> 
 
\t <div id="backNav" class="backNav">BACK</div> 
 
\t <div id="nextNav" class="nextNav">NEXT</div> 
 
</div>