Пауза при наведении на слайдер

[Stas1985]

Здравствуйте форумчане!
Столкнулся с такой проблемой. На сайте есть слайдер текста _https://lik-astana.kz/ при наведении он не останавливается, должен при наведении остановится чтоб была возможность прочитать текст, как я понимаю в js файле эта функция прописана

/**
* @author    JoomShaper [url]http://www.joomshaper.com[/url]
* @copyright Copyright (C) 2010 - 2013 JoomShaper
* @license   [url]http://www.gnu.org/licenses/gpl-2.0.html[/url] GNU/GPLv2
*/;
(function ($) {
    var methods = {
        currentIndex: 0,
        prevIndex: 0,
        nextIndex: 0,
        totalItems: 0,
        settings: {},
        canvasWidth: 0,
        canvasHeight: 0,
        elements: '',
        prevIndex: function () {
            var c = this.currentIndex;
            c--;
            if (c < 0)
                c = this.totalItems - 1;
            return c;
        },
        nextIndex: function () {
            var c = this.currentIndex;
            c++;
            if (c >= (this.totalItems))
                c = 0;
            return c;
        },

        currentIndex: function () {
            return this.currentIndex;
        },

        prev: function () {
            clearTimeout(this.autoplay);
            this.currentIndex--;
            if (this.currentIndex < 0) {
                this.currentIndex = this.totalItems - 1;
                this.prevIndex = methods['prevIndex'].call(this);
            }
            var $this = this;
            methods['run'].call(this);
        },

        next: function () {
            clearTimeout(this.autoplay);
            this.currentIndex++;
            if (this.currentIndex >=this.totalItems){
                this.currentIndex = 0;
                this.nextIndex = methods['nextIndex'].call(this);
            }
            methods['run'].call(this);
        },

        play: function () {
            var $this = this;
            this.autoplay = setTimeout(function () {
                methods['next'].call($this);
            }, 1000);
        },

        preloader: function () {
            var loadedImage = new Image();
            var preloadImages = this.settings.preloadImages;
            var $this = this;

            if (this.settings.showPreloader != true || preloadImages.length < 1) {
                $(this.settings.preloader).remove();
                methods['start'].call(this);
                this.elements.trigger('onSlide');
            } else {
                for (i = 0; i < preloadImages.length; i++) loadedImage.src = preloadImages[i];
                    $(loadedImage).load(function () {
                        $($this.settings.preloader).fadeOut('fast', function () {
                            $(this).remove();
                        });
                        methods['start'].call($this);
                        $this.elements.trigger('onSlide');
                    });
            }
        },

        autoplay: function () {
            var $this = this;
            if (this.settings.autoplay == true) {
                this.autoplay = setTimeout(function () {
                    methods['next'].call($this);
                }, this.settings.interval);
            }
        },

        pause: function () {
            clearTimeout(this.autoplay);
        },

        goTo: function (index) {
            clearTimeout(this.autoplay);
            if( this.currentIndex==index ){
                return false;
            }
            this.currentIndex = index;
            methods['run'].call(this);
        },

        run: function () {
            clearTimeout(this.delay);
            clearTimeout(this.autoplay);
            var $this = this;
            var $item = this.items;

            $item.each(function(){
                if( $(this).hasClass($this.settings.animateInClass) ){
                    $(this).removeClass($this.settings.animateInClass).addClass($this.settings.animateOutClass);
                }
            });

            this.delay = setTimeout(function () {
                $item.removeClass($this.settings.animateOutClass);
                $item.eq($this.currentIndex).removeClass($this.settings.animateOutClass).addClass($this.settings.animateInClass);

                $this.elements.trigger('onSlide');
            }, this.settings.delay);

            methods['autoplay'].call(this);
        },

        start: function () {
            clearTimeout(this.delay);
            clearTimeout(this.autoplay);
            var $this = this;
            var $item = this.items;

            this.delay = setTimeout(function () {

                $item.eq($this.currentIndex)
                .removeClass($this.settings.animateOutClass)
                .addClass($this.settings.animateInClass);

                $this.elements.trigger('onSlide');
            }, this.settings.delay);

            methods['autoplay'].call(this);
        },

        resize: function (fn) {
            if (this.settings.fullWidth == true) {
                this.elements.height($(window).width() * this.ratioHeight);
            }
        },

        onSlide: function (fn) {
            var $this = this;
            this.elements.bind('onSlide', function (event) {
                fn($this.currentIndex, $this.items, event);
            });
        },

        init: function (elements, settings) {
            this.currentIndex = 0;
            this.elements = elements;
            this.items = $(elements).find('>*');

            this.totalItems = this.items.length;
            this.settings = settings;

            var $this = this;
            this.items.each(function (i) {
                $(this).addClass($this.settings.itemClassPrefix + (i + 1));
            });
        },

    };

    $.fn.spSmartslider = function (options, param) {

        var settings = $.extend({
            preloadImages: [],
            autoplay: true,
            preloader: '.sp-preloader',
            showPreloader: true,
            interval: 5000,
            delay: 500,
            itemClassPrefix: 'item-',
            rWidth: 0,
            rHeight: 0,
            fullWidth: false,
            animateInClass: 'animate-in',
            animateOutClass: 'animate-out',
        }, options);

        return this.each(function (index, element) {

            if (typeof (options) === 'string') {
                methods[options].call(this, param);
            } else {
                methods['init'].call(this, $(this), settings);
                methods['preloader'].call(this);
                methods['autoplay'].call(this);
                methods['resize'].call(this);
            }
        });
    }
})(jQuery);

Пробовал решить средствами css но это не сработало. Подскажите как решить с помощью js.
Спасибо!

[Stas1985]

Решение так и не нашел, опубликовал как есть _https://lik-astana.kz/
Подскажите пожалуйста, почему не работает стандартная пауза при наведении. В js не селен, но думаю что эта функция отвечает за паузу

pause: function () {
	            clearTimeout(this.autoplay);
	        }

Знающие люди, подскажите пожалуйста, в чем проблема и как решить.
Спасибо!

[рони]

как я понимаю в js файле эта функция прописана

не вижу я в вашем коде паузы при наведении,
функция onhover в вашем коде отсутствует.

[Stas1985]

не вижу я в вашем коде паузы при наведении,
функция onhover в вашем коде отсутствует.

Подскажите пожалуйста почему тогда не работает пауза в css

.sp-slider-item:hover {
-webkit-animation-play-state: paused; 
-moz-animation-play-state: paused; 
-o-animation-play-state: paused; 
 animation-play-state: paused; 
}

Может ли данный стиль блокировать/подменять js.
Подскажите пожалуйста какие варианты есть в решении моей проблемы

[рони]

Stas1985,
js делает паузу и смену картинок, css только эффект смены.
ищите новую версию этого слайдера(ваша 2013, устарела) с onhover.
но она вроде платная.

[рони]

Stas1985,

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
 .slider li{
   margin: 0px;
   width: 200px; height:50px; float: left;
   display: block;

  }
 .slider .carusel {
    position:relative; top: 0px; left:0px; display:block;
    height:50px;
    padding: 0px; margin: 0px;
  }
  .slider{
     overflow:hidden; width: 200px; height:50px; position: relative;  margin: 100px auto;
  }


 .prev, .next{
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #DCDCDC;
    top: 10px;
    left: 0;
    border-radius: 50%;
    opacity: .3;
    cursor: pointer;
 }
.next{
  left: 180px;
}
.slider:hover .prev,.slider:hover .next{
  opacity: 1;
}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>

  $(function() {
    var ul = $(".carusel"),
        widthAll = 0,
        loop = true,
        pause = 2000,
        spide = 1200,
        next = false;
    $("li", ul).each(function(indx, element) {
        widthAll += this.offsetWidth
    });
    ul.width(widthAll);

    function go() {
        var li = next ? $("li:last", ul) : $("li:first", ul),
            w = li.width();
        next && (ul.prepend(li).css({
            left: -w
        }), w = 0);
        ul.delay(pause).animate({
            left: -w
        }, spide, function() {
            !next && ul.append(li).css({
                left: 0
            });
            loop && go()
        })
    }
    go();
    $(".slider").on("mouseenter", function() {
        loop = false;
        ul.stop()
    }).on("mouseleave", function() {
        ul.stop();
        loop = true;
        pause = 2000;
        spide = 1200;
        go()
    }).on("click", ".prev, .next", function() {
        pause = 0;
        spide = 800;
        next = $(this).is(".next");
        go()
    })
});

  </script>
</head>

<body>
<div class="slider">
    <ul class="carusel">
            <li  id = "1" style="background-color:red;">1</li>
            <li  id = "2" style="background-color:green;">2</li>
            <li  id = "3" style="background-color:Yellow;">3</li>
            <li  id = "4" style="background-color:DeepPink;">4</li>
            <li  id = "5" style="background-color:MediumBlue;">5</li>
        </ul>
<div class="prev"><</div>
<div class="next">></div>
    </div>
</body>
</html>