Next and Previous Button

[lucasalmeida92]

Is there a way to create a next and a previous button to navigate in gallery modal ? How do I manipulate these events?

Thank you!

[nmckeown]

This is a start if you want to add custom buttons:

I have been able to add a button to slider html. You need to include the relative path to get this working. So for me, it's like the below:

// values for ion-gallery directive ionGalleryConfigProvider.setGalleryConfig({ action_label: 'Close', //template_gallery: 'gallery.html', //template_slider: 'slider.html', template_gallery: '../../assets/lib/ion-gallery/src/templates/tGallery.html', template_slider: '../../assets/lib/ion-gallery/src/templates/tSlider.html', toggle: false, row_size: 3, fixed_row_size: true });

Example below of adding a button to the end of the slider. I'm having problem getting the padding working on right hand side but it's a start:

{{::actionLabel}}

<ion-slide-box does-continue="true" 
               active-slide="selectedSlide" 
               show-pager="false" 
               class="listContainer" 
               on-slide-changed="slideChanged($index)">
  <ion-slide ng-repeat="single in slides track by $index">
    
      <ion-scroll direction="xy"
                locking="false"
                zooming="{{ionZoomEvents}}"
                min-zoom="1"
                scrollbar-x="false"
                scrollbar-y="false"
                ion-slide-action
                delegate-handle="slide-{{$index}}"
                overflow-scroll="false"
                >
        <div class="item item-image gallery-slide-view">
          <img ng-src="{{single.src}}">
        </div>

        <div ng-if="single.sub && single.sub.length > 0" 
            class="image-subtitle" 
            ng-show="!hideAll">
            <span ng-bind-html='single.sub'></span>
        </div>

        <!-- select picture --> 
        <button class="button button-block button-positive select-button" 
                ng-click="">
                Select 
        </button>

      </ion-scroll>

    </ion-slide>
</ion-slide-box>