Vertically scroll-able lists/contents in ion-slidebox

ionic-v1
21 
<ion-nav-buttons side="left">
    <button class="button button-icon button-clear ion-navicon" ng-click="showMenu()">
    </button>
</ion-nav-buttons>
<ion-nav-buttons side="right">

    <select class="ion-input-select " ng-model="location" 
            ng-options="loc.name for loc in options" ng-change="change(location)" ></select>

</ion-nav-buttons>

<ion-content > 
    <ion-refresher on-refresh="doRefresh()"
                 pulling-text="Pull to refresh..."
                 refreshing-text="Refreshing!"
                 refreshing-icon="ion-loading-c">
                 
  </ion-refresher>
 
    <ion-slide-box 
        on-slide-changed="slideChanged($index)" 
        does-continue="true" scroll="true" 
        show-pager='true'
        slide-interval="3000"
        auto-play="true">

        
        <ion-slide  class="item-icon-left item-icon-right" ng-repeat="slide in slides" >
            
            <i class="icon ion-chevron-left" ng-click="previous()"   ></i>
         
            <div  id="logo" >
                <a href="#/tab/offers/{{slide.id}}" >
                <img class="full-image" ng-src="{{slide.image}}" >
                </a> 
            </div>
            <i class="icon ion-chevron-right" ng-click="next()" ></i>
            
        </ion-slide>
        
       
        
    </ion-slide-box>

    <div class="list ">
        <a ng-repeat="list in lists" class="item item-avatar-left item-icon-right" href="#/tab/offers/{{list.id}}">
            <img  ng-src="{{list.image}}">
            <div class="row">
                <div class="col-66">
                    <h4>{{list.offer}}</h4>
                    <h6>{{list.company}}|{{list.category}}</h6>
                </div>
                <span class=" item-note">
                    <h6>Expires:{{list.expires}}</h6> 
                    <h6>Distance:{{list.distance}}</h6>
                    <i class="icon ion-chevron-right"></i>
                </span>
            </div>
        </a>
    </div>  
</ion-content>
22

Have you seen this demo?

23

but those next and previous buttons are in nav-bar i need it on slidebox

24

like this pattern i need in ma code actually i added arrows but those arrows moving along with image what i need to do tel me??

25

Try this.

26

it works thanks but slide-pager not updating corectly ?? if i add dynamically on change my location it adds extra slides

27

any idea if i change the dropdown list i need to fill fresh new slides for same page again if i change the list must change all sildes freshlly here i did that all those thingd but i got an bug in tat slide-pager dots shows more than exact slides if i have 2 slides i got 4 dots wat i need to do??

28

You need to update the slide-box as you remove/add slides.

29

try this one change the selection randomly u will know

30

see this codepen how it will add dots

31

@mhartington In my case, there are 2 slides and each slide has bar header buttons. So where should I place bar header, if I place ion-content inside slide?