Slides Duration Time

CMS & WordPress
1

Hello! I’m kind of new to this and after using a template, I’m stuck with the slider duration, got how to delay it, but can`t find the duration, tried different ways but not actually working.

Thanks a lot in advance.

HTML:

        <div class="section-main-slider">
            <div class="main-slider main-slider_mod-center slider-pro" id="main-slider" data-slider-width="100%" data-slider-arrows="true" data-slider-buttons="false">
                <div class="sp-slides">
                    <div class="sp-slide">
                        <img class="sp-image" src="images/db/politie2.png" alt="slider image" />                
                        <div class="sp-layer" data-position="center" data-width="80%" data-horizontal="0">
                            <div class="main-slider-title sp-layer" data-position="up" data-show-transition="down" data-hide-transition="up" data-show-duration="800" data-show-delay="300" data-hide-delay="600">
                                YouTube Official Channel <i class="verified">♪</i>
                            </div>
                            <p class="sp-layer main-slider-subtitle" data-position="down" data-show-transition="up" data-hide-transition="down" data-show-delay="600" data-hide-delay="400">
                                <span class="info-title">Subscribe</span><br/>
                                <a href="https://www.youtube.com/channel/UCBPW85vfPTIAxOHpY1gv9tQ" target="_blank" class="mb-0 lite ples-btn neb-yt"><i class="fab fa-youtube"></i></a>
                            </p>
                        </div>            
                    </div>

                    <div class="sp-slide">
                        <img class="sp-image" src="images/db/politie2.png" alt="slider image" />                
                        <div class="sp-layer" data-position="center" data-width="80%" data-horizontal="0">
                            <div class="main-slider-title sp-layer" data-position="up" data-show-transition="down" data-hide-transition="up" data-show-duration="800" data-show-delay="300" data-hide-delay="600">
                                Twitter <i class="verified fas fa-handshake"></i>
                            </div>
                            <p class="sp-layer main-slider-subtitle" data-position="down" data-show-transition="up" data-hide-transition="down" data-show-delay="600" data-hide-delay="400">
                                <span class="info-title">Follow</span><br/>
                                <a href="https://twitter.com/AresSouth" target="_blank" class="mb-0 lite ples-btn neb-twitch"><i class="fab fa-twitter"></i></a>
                            </p>
                        </div>            
                    </div>


                    <div class="sp-slide">
                        <img class="sp-image" src="images/db/politie2.png" alt="slider image" />                
                        <div class="sp-layer" data-position="center" data-width="80%" data-horizontal="0">
                            <div class="main-slider-title sp-layer" data-position="up" data-show-transition="down" data-hide-transition="up" data-show-duration="800" data-show-delay="300" data-hide-delay="600">
                                Instagram
                            </div>
                            <p class="sp-layer main-slider-subtitle" data-position="down" data-show-transition="up" data-hide-transition="down" data-show-delay="600" data-hide-delay="400">
                                <span class="info-title">Follow</span><br/> <!-- <i class="verified fas fa-check-circle"></i> -->
                                <a href="https://www.instagram.com/aressouthofficial/" target="_blank" class="mb-0 lite ples-btn neb-instagram"><i class="fab fa-instagram"></i></a>
                            </p>
                        </div>            
                    </div>

                    <div class="sp-slide">
                        <img class="sp-image" src="images/db/politie2.png" alt="slider image" />                
                        <div class="sp-layer" data-position="center" data-width="80%" data-horizontal="0">
                            <div class="main-slider-title sp-layer" data-position="up" data-show-transition="down" data-hide-transition="up" data-show-duration="800" data-show-delay="300" data-hide-delay="600">
                                Facebook
                            </div>
                            <p class="sp-layer main-slider-subtitle" data-position="down" data-show-transition="up" data-hide-transition="down" data-show-delay="600" data-hide-delay="400">
                                <span class="info-title">Follow</span><br/> <!-- <i class="verified fas fa-check-circle"></i> -->
                                <a href="https://www.facebook.com/AresSouthOfficial/" target="_blank" class="mb-0 lite ples-btn neb-facebook"><i class="fab fa-facebook"></i></a>
                            </p>
                        </div>            
                    </div>

                    <div class="sp-slide">

                        <img class="sp-image sp-layer" src="images/db/politie2.png" alt="UGRO" data-position="up" data-show-transition="down" data-hide-transition="up" data-show-duration="800" data-show-delay="800" data-hide-delay="600"/>                
                        <div class="sp-layer" data-position="center" data-width="80%" data-horizontal="0">
                            <div class="main-slider-title sp-layer" data-position="up" data-show-transition="down" data-hide-transition="up" data-show-duration="800" data-show-delay="300" data-hide-delay="600">
                                Discord
                            </div>
                            <p class="sp-layer main-slider-subtitle" data-position="down" data-show-transition="up" data-hide-transition="down" data-show-delay="600" data-hide-delay="400">
                                <span class="info-title">Ares South Official</span><br/>
                                <a class="mb-0 lite ples-btn neb-discord" href="https://discord.com/invite/5U88dzy" target="_blank"><i class="fab fa-discord"></i></a>
                            </p>
                        </div>            
                    </div>
                </div> 
            </div>
        </div>

CSS

.sp-layer { white-space:normal !important; text-align:center; }

.sp-layer.main-slider-title { font-size: 2.618em; letter-spacing:3px; font-weight: 700; font-family: "Montserrat", serif; text-transform: uppercase; line-height:1.1; top:auto !important; height:auto !important; }

.sp-layer.main-slider-subtitle { bottom:auto !important; height:auto !important; }

.sp-layer .info-title { font-size: 1.618em; letter-spacing:2px; text-transform:uppercase; bottom:auto !important; }

.sp-layer .btn { margin-top:7px; text-transform:uppercase; }

/* p.sp-layer { top:0 !important; padding-top:1em; } */

.sp-green { color: #FFF; background: #e1211e; background: rgba(67,178,88,.7); }

.sp-arrow { width:6px; }

.sp-arrow:before { -webkit-transform: skew(135deg,0deg); -ms-transform: skew(135deg,0deg); transform: skew(135deg,0deg); }

.sp-arrow:after { -webkit-transform: skew(-135deg,0deg); -ms-transform: skew(-135deg,0deg); transform: skew(-135deg,0deg); }


#particles-js { top: 0; width: 100%; height: 100%; background: #1a1a18; }

.page-wrap { position: relative; }

Java Script

(function(window, undefined) {
    var orientObj = { '0':'portrait' , '90':'landscape' , '-90':'landscape' };

    //oriontation change
    var onOrientationChange = function() { if ('orientation' in window) { dtUtils(document.getElementsByTagName('body')[0]).addClass(orientObj[window.orientation]); } };

    //animatii
    var animationLoop = function(){
        var again = true;
        if (!dtUtils.animationEngine.busy) {
            again = false;
            dtUtils.animationEngine.busy=true;
            for (var i=0; i < dtUtils.animationEngine.callbacks.length; i++) {
                if (dtUtils.animationEngine.callbacks[i]) {
                    dtUtils.animationEngine.callbacks[i].c.call( dtUtils.animationEngine.callbacks[i].s, new Date().getTime()-dtUtils.animationEngine.callbacks[i].t );
                    again = true;
                }
            }
            dtUtils.animationEngine.busy=false;
        }
        if (again) { requestAnimationFrame(animationLoop); }
    };

    var AnimationEngine = function(){
        this.callbacks = { length:0 };
        this.busy = false;
        this.addCallback = function(callback, scope) {
            if (!scope) { scope = window; }
            for (var i=0; i<=this.callbacks.length; ++i) { if(!this.callbacks[i]) { break; } }
            this.callbacks[i] = { c:callback, s:scope, t:new Date().getTime() };
            if (i==this.callbacks.length) { this.callbacks.length++; }
            animationLoop();
            return i;
        };
        this.removeCallback = function(id) {
            if (typeof id == 'number' && this.callbacks[id]) { this.callbacks[id]=null; }
            else if (typeof id == 'function') {
                for (var i=0; i<this.callbacks.length; i++) { if(this.callbacks[i] && this.callbacks[i].c==id) { this.callbacks[i]=null; } }
            }
            return false;
        };
        this.timeWarp = function(t,mode) {
            switch (mode) {
                case 'ease-in'     	: return Math.pow(t,3);
                case 'ease-out'    	: return 1-Math.pow(1-t,3);
                case 'ease-in-out' 	: return t-Math.sin(t*2*Math.PI)/(2*Math.PI);
                case 'ease-out-bounce'  : return t < 0.3636 ? 7.5625 * Math.pow(t,2) : ( t < 0.7272 ? 7.5625 * Math.pow(t-0.5454,2) + 0.75 : ( t < 0.9090 ? 7.5625 * Math.pow(t-0.8181,2) + 0.9375 : 7.5625 * Math.pow(t-0.9545,2) + 0.984375  ) );
                case 'elastic'	        : if (t===0 || t>=1) return t; var s = (0.45) / (2*Math.PI) * Math.asin (1); return Math.pow(2,-10 * t) * Math.sin( (t*1-s)*(2*Math.PI)/0.4 ) + 1;
            }
            return t;
        };
    };

    var Animate = function(opt){
        if (!opt.scope) { opt.scope = this; }
        var id = false, started=false, distanta = [], currentValue = [], s = [];

        this.reset = function() {
            distanta = []; currentValue = []; s = [];
            switch(typeof opt.start) {
                case 'number'   : distanta.push(Math.abs(opt.finish-opt.start)); currentValue.push(opt.start); s.push( opt.start < opt.finish ? 1 : -1 ); break;
                case 'object'   : for (var i=0; i<opt.start.length; i++) { distanta.push(Math.abs(opt.finish[i]-opt.start[i])); currentValue.push(opt.start[i]); s.push( opt.start[i] < opt.finish[i] ? 1 : -1 ); } break;
                default         : distanta=false; currentValue=false; break;
            }
            return this;
        };
        this.start = function() {
            if (!started) {
                started = true; this.reset();
                if (opt.onStart) { opt.onStart.call(opt.scope, opt.start); }
                id = dtUtils.animationEngine.addCallback( function(dt){
                    for ( var i=0; i<distanta.length; i++) {
                        currentValue[i] = Math.round( (typeof opt.start == 'number' ? opt.start : opt.start[i]) + s[i] * dtUtils.animationEngine.timeWarp(dt/opt.duration, opt.effect) * distanta[i] );
                    }
                    if (dt >= opt.duration) {
                        id = dtUtils.animationEngine.removeCallback(id);
                        if (opt.onProgress) { opt.onProgress.call(opt.scope, opt.finish); }
                        if (opt.onFinish) { opt.onFinish.call(opt.scope, opt.finish); }
                        started = false;
                    } else if (opt.onProgress) {
                        opt.onProgress.call(opt.scope, typeof opt.start == 'number' ? currentValue[0] : currentValue);
                    }
                }, this);
            }
            return this;
        };
        this.cancel = function() {
            id = dtUtils.animationEngine.removeCallback(id); started = false;
            if (opt.onCancel) { opt.onCancel.call(opt.scope, currentValue); }
            return this;
        };
    };

    var dtUtils = {
        animationEngine : new AnimationEngine(),
        animate : function (opt) { return new Animate(dtUtils.expand(dtUtils.animate.defaults, opt)); },
        expand : function (obj, objExtension) { var x; var n = {}; for (x in obj) { n[x] = obj[x]; } if (objExtension) { for (x in objExtension) { n[x] = objExtension[x];} } return n; },
    }

    dtUtils.animate.defaults = { start:0 , finish:100, duration:500, effect:'linear' };
    window.dtUtils = dtUtils;
}(window));
2

Hello @RobertKun. Welcome to the forums

Is this a WordPress plugin?

3

Using those:

<script src="vendor/jquery/jquery-3.3.1.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="vendor/metis-menu/metisMenu.min.js"></script>
<script src="vendor/slider-pro/js/jquery.sliderPro.min.js"></script>
4

Surely you can change this in the settings. According to the web page for Slider Pro you have the following options.

  • An option to Set slide autoplay will be enabled
  • An option to Set the delay/interval in milliseconds ( Default is 3000 )
  • An option to Set slide autoplay will be paused or stopped when the slider is hovered
  • An option to Set slide autoplay will be Normal or Backwards

You should not go changing the code of a plugin or it will stop working if/when you upgrade it.

3 Likes
5

Thank alot <3

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.