jmpress stop step into next slide on scroll

I've a site using jmpress.js, while scrolling on page it automatically moved to next slide.

I want to stop stepped into next slide instead it should scroll down the page.

Reload content of slide/step for jmpress

I would like to reload the content of specific slides in my jmpress presentation. I have made a continuous automated presentation and I need to refresh the data on some pages.

Any help is appreciated!

Coordinates and rotation of elements not loaded by jmpress when triggered using angular $scope.$watch

Use Case

jmpress requires that the DOM be constructed before loading. Using AngularJS, the DOM can be constructed with templates and jmpressinitialized with a directive watching the DOM.

When the data is loaded during DOM loading, i.e. hard coded data and jmpress is triggered on the $(document).ready() event, the desired effect is observed. See jsfiddle.

However, when the data is loaded over an AJAX request and jmpress is triggered over a watch, the coordinates and rotation attributes are ignored by jmpress.

Problem

I suspect that the watch fires before the template is constructed, so jmpress sees that the coordinates and rotations in the DOM are blank.

Question

• Is there a way to get jmpress to use the coordinates and rotations from the DOM created with the angular template?
• Is it just better to add the coordinates and rotations as attributes in the link function rather than using the template?

Code

A jsFiddle using AJAX request is created.

Template

<div ng-app="app" ng-controller="randomData" ui-impress>
    <div ng-repeat="item in data"
         class="step"
         data-duration="2000"
         data-x="{{ item.coordinates.x }}"
         data-y="{{ item.coordinates.y }}"
         data-z="{{ item.coordinates.z }}"
         data-rotate-x="{{ item.rotate.x }}"
         data-rotate-y="{{ item.rotate.y }}"
         data-rotate-z="{{ item.rotate.z }}"
         data-scale="{{ item.scale }}"
    >
        {{ item.message }}
    </div>
</div>

CSS

.step {
    opacity: 0.1;
    width: 20em;
    height: 3em;
}

.step.active {
    -webkit-transition: opacity 1s;
    -moz-transition:    opacity 1s;
    -ms-transition:     opacity 1s;
    -o-transition:      opacity 1s;
    transition:         opacity 1s;

    opacity: 1;
}

Directive

var app = angular.module("app", []);

app.directive('uiImpress', function() {
    return {
        restrict: 'A',
        scope: false,
        link: function($scope, $element) {            
            var init = $scope.$watch('data', function(data) {
                if (data) {
                    $($element).children('.step').each(function(index, step) {
                        $($element).jmpress('init', step);
                    });

                    $($element).jmpress();
                    init();
                };
            });
        }
    };
});

Controller

Basically, just a random data generator.

function randomData($scope, $http) {
    $scope.data;

    var slides = 10;

    var config = {
        coordinates: [ -1000, 1000 ],
        rotate: [ -180, 180 ],
        scale: [ 0.1, 10 ]
    };

    var randomDataSource = "http://api.icndb.com/jokes/random/" + slides;

    function getRandomInt (min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    function generateData(messages) {
        return _.range(slides).map(function(value, index) {
            return {
                message: messages[index],
                coordinates : {
                    x: getRandomInt.apply(null, config.coordinates),
                    y: getRandomInt.apply(null, config.coordinates),
                    z: getRandomInt.apply(null, config.coordinates)
                },
                rotate: {
                    x: getRandomInt.apply(null, config.rotate),
                    y: getRandomInt.apply(null, config.rotate),
                    z: getRandomInt.apply(null, config.rotate)
                },
                scale: getRandomInt.apply(null, config.scale)
            };
        });
    }

    $http.get(randomDataSource).then(function(response) {
        var messages = response.data.value.map(function(item) {
            return item.joke;
        });
        $scope.data = generateData(messages);
    })
};

Slideshow should play on a click event

I have used slideshow with jmpress.js

Where I have used a jquery which autoplay by setting it true or false but I want it to start by clicking a link on a first slide.

<script type="text/javascript">
    $(function() {

        var jmpressOpts = {
            animation       : { transitionDuration : '1.8s' }
        };

        $( '#jms-slideshow' ).jmslideshow( $.extend( true, { jmpressOpts : jmpressOpts }, {
            autoplay    : true,
            bgColorSpeed: '1.8s',
            arrows      : false
        }));

    });
</script>

Does any one know how to achieve that?