<aura:component controller="TestStagesController" implements="force:hasRecordId,force:lightningQuickAction,force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,forceCommunity:availableForAllPageTypes" access="global" >
    <aura:dependency resource="markup://force:showToast" type="EVENT" />
    <aura:handler event="force:showToast" action="{!c.doInit}" />
    <aura:handler event="force:refreshView" action="{!c.doInit}" />
    <aura:attribute name="opportunity" type="Opportunity"/>
    <aura:attribute name="opportunityRec" type="Object"/>
    <aura:attribute name="selectedPricebookId" type="String"/>
    <aura:attribute name="pName" type="String"/>
    <aura:attribute name="checkProfile" type="boolean" default="true"/>
    <aura:attribute name="recordId" type="string"/>
    <aura:attribute name="showOppCmps" type="boolean" default="false"/>
    <aura:attribute name="oppRec" type="object"/>
    <aura:attribute name="stageName" type="string"/>
    <!-- for mobile community users -->
    <aura:attribute name="nextStageName" type="string" default=""/>
    <aura:attribute name="prevStageName" type="string" default=""/>
    <!-- for mobile community users end -->
    <aura:attribute name="stageIcon" type="string"/>
    <aura:attribute name="iconClass" type="string"/>
    <aura:attribute name="firstStageName" type="string"/>
    <aura:attribute name="lastStageName" type="string"/>
    <aura:attribute name="oppStages" type="list"/>
    <aura:attribute name="record" type="Object"/>
    <aura:attribute name="recordError" type="String"/>
    <aura:attribute name="contactId" type="string"/>
    <aura:attribute name="accountId" type="string"/>
    <aura:attribute name="recodName" type="string"/>
    <aura:attribute name="reason" type="string"/>
    <aura:attribute name="recordType" type="string" default=""/>
    <aura:attribute name="sendToLabel" type="string" default="Send To OPS"/>
    <aura:attribute name="aname" type="string"/>
    <aura:attribute name="isSuccess" type="boolean" default="false"/>
    <aura:attribute name="resetStage" type="boolean" default="false"/>
    <aura:attribute name="missedFlag" type="boolean" default="false"/>
    <aura:attribute name="breakLoop" type="boolean" default="false"/>
    <aura:attribute name="loopId" type="Integer" default="0"/>
    <aura:attribute name="startTime" type="Integer" default="0"/>
    <aura:attribute name="endTime" type="Integer" default="0"/>
    <aura:attribute name="isDisplayDetail" type="boolean" default="false"/>
    <aura:attribute name="isDisplayBox" type="boolean" default="false"/>
    <aura:attribute name="isDisplayHeader" type="boolean" default="true"/>
    <aura:attribute name="valueChanged" type="Integer" default="0"/>
    
    
    <!-- SeperateBlock -->
    
    
    <!--<aura:attribute name="oppStages" type="list"/>-->
    <!--<aura:attribute name="stageName" type="String"/>-->
    <aura:attribute name="tempstageName" type="String"/>
    <aura:attribute name="oppStagesProb" type="Map"/>
    <!--<aura:attribute name="oppRec" type="object"/>-->
    <aura:attribute name="problty" type="Integer" />
    <aura:attribute name="customers" type="List" />
    <!--<aura:attribute name="showOppCmps" type="boolean" default="false"/>-->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:if isTrue="{!$Browser.formFactor == 'DESKTOP'}">
         <!--<lightning:icon iconName="utility:desktop" size="x-small" alternativeText="Indicates approval"/> -->
        <!--<div id="stages" style="pointer-events: auto;">--><!--width:460px;-->
     <aura:if isTrue="{!v.showOppCmps}">  
    <article class="slds-card">
    <div class="slds-grid slds-path slds-is-expanded">
    <div class="slds-grid slds-path__track">
    <div class="slds-grid slds-path__scroller-container">
    <div class="slds-path__scroller" role="application">
    <div class="slds-path__scroller_inner">
    <ul class="slds-region_small slds-path__nav" role="listbox" aria-orientation="horizontal" ><!--style="width:240px;"-->        
    <aura:iteration items="{!v.customers}" var="cus" indexVar="key">
    	<aura:if isTrue="{!and(cus.value!=v.stageName,lessthan(cus.key,v.problty))}"> 
   
            <li onclick="{!c.handleStage}" data-variablename="{!cus.value}" aura:id="{!cus.value}" class="{!cus.value + ' slds-path__item slds-is-complete'}" role="presentation" id="{!cus.value}">
            <a data-variablename="{!cus.value}" aria-selected="true" class="slds-path__link" href="javascript:void(0);" id="{!cus.value}" role="option" tabindex="0">   
            <span class="slds-path__stage">
            <lightning:icon iconName="utility:check" size="x-small" variant="inverse" />
            <!--<span class="slds-assistive-text">Current Stage:</span>-->
            </span>
            <span class="slds-path__title">{!cus.value}</span>
                
            </a>
            </li>
    	</aura:if>
  <!--  </aura:iteration>
    <aura:iteration items="{!v.customers}" var="cus" indexVar="key">  -->
    
    	<aura:if isTrue="{!and(cus.value==v.stageName,cus.key==v.problty)}"> 
    
            <li onclick="{!c.handleStage}" data-variablename="{!cus.value}" aura:id="{!cus.value}" class="{!cus.value + ' slds-path__item slds-is-current slds-is-active'}" role="presentation" id="{!cus.value}">
            <a data-variablename="{!cus.value}" aria-selected="true" class="slds-path__link" href="javascript:void(0);" id="{!cus.value}" role="option" tabindex="0">
            <span class="slds-path__stage">
            <lightning:icon iconName="utility:check" size="x-small" variant="inverse"/>
            <!--<span class="slds-assistive-text">Current Stage:</span>-->
            </span>
            <span class="slds-path__title">{!cus.value}</span>
            </a>
            </li>
    	</aura:if>
      	<aura:if isTrue="{!and(cus.value!=v.stageName,greaterthan(cus.key,v.problty))}"> 
    
            <li onclick="{!c.handleStage}" data-variablename="{!cus.value}" aura:id="{!cus.value}" class="{!cus.value + ' slds-path__item  slds-is-incomplete'}" role="presentation" id="{!cus.value}">
            <a data-variablename="{!cus.value}" aria-selected="true" class="slds-path__link" href="javascript:void(0);" id="{!cus.value}" role="option" tabindex="0">
            <span class="slds-path__stage">
            <lightning:icon iconName="utility:check" size="x-small" variant="inverse"/>
            <!--<span class="slds-assistive-text">Current Stage:</span>-->
            </span>
            <span class="slds-path__title">{!cus.value}</span>
            </a>
            </li>            
    	</aura:if>
        
    </aura:iteration>        
    </ul>
    </div>
    </div>
    </div>    
    </div>
    </div>
    </article>
          </aura:if>
    <!--</div>-->
        
    </aura:if>
 <lightning:spinner aura:id="mySpinner" variant="brand" size="large" class="slds-hide" />
    
    <!--aura:handler name="change" value="{!v.valueChanged}" action="{!c.valueChangeHappened}"/-->
    <aura:attribute name="isOpen" type="boolean" default="false"/>
    <aura:handler name="setValue" event="c:setValueChangeEvent" action="{!c.setValueChange}"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />       
</aura:component>

({
handleStage: function(component,event,helper){
        var selectedItem = event.currentTarget;
        var yourValueOnclick= selectedItem.dataset.variablename;
        var tempArray=[];
        tempArray=component.get("v.oppStages");
        alert('****'+yourValueOnclick);
        component.set("v.firstStageName",tempArray[0]);
        alert(component.get("v.firstStageName"));
        component.set("v.lastStageName",tempArray[tempArray.length - 1]);
        alert(component.get("v.lastStageName"));
        var tempIndex = tempArray.indexOf(1);//response.getReturnValue().StageName
                alert("-----------------"+tempIndex);
                if( tempIndex != tempArray.length){
                    $A.util.removeClass(selectedItem, 'slds-is-complete');
                    $A.util.addClass(selectedItem, 'slds-is-current');
                    component.set("v.nextStageName",tempArray[tempIndex + 1]);
                } 
                if( tempIndex != 0){
                    $A.util.removeClass(selectedItem, 'slds-is-complete');
                    $A.util.addClass(selectedItem, 'slds-is-current');
                    component.set("v.prevStageName",tempArray[tempIndex - 1]);
                }
		
    },
})

When i click on any stage it should have 'slds-is-current'  styling and the present current stage should have white color in which stage name should get displayed.
Can I get the exact styling as standard path in salesforce using my code.Any help is greatly appreciated.