Hi guys.

I need a play and pause button, similar to the one on this page.

https://www.leichtbau-bw.de/start.html

Do you have any idea to do it?

Hello,

we are trying to implement the Play and pause button for the main slider.

We Add this selfmade JS with Custom JS Plugin but is not working

var estadoGlobalOWL = 1;
var fromEventStop = 0;
var indexSlider = 0;
var idxSlider = 0;
function waitForElement(idname, callback){
    var poops = setInterval(function(){
        try {
            if (document.getElementById(idname)) {
                // console.log('Objects are ready...');
                clearInterval(poops);
                callback();
            }else{
                console.log('Waiting for '+idname);
                ;
            }
        }catch(error){
            console.log('Error Waiting for owlCarousel: '+error);
        }
    }, 100);
}
function waitForElementClass(classname, callback){
    var poops = setInterval(function(){
        try {
            if (document.getElementsByClassName(classname)) {
                // console.log('Objects are ready...');
                clearInterval(poops);
                callback();
            }else{
                console.log('Waiting for '+classname);
                ;
            }
        }catch(error){
            console.log('Error Waiting for owlCarousel: '+error);
        }
    }, 100);
}
waitForElementClass("penci-owl-carousel", function(){
     var owl = jQuery('.penci-owl-carousel');
     console.log("Jquery init events for Class PENCI");
  owl.autoplayHoverPause = false;
  //owl.trigger('play.owl.autoplay', [14000]);
  jQuery("#idstopcar").unbind("click");
 jQuery("#idplaycar").unbind("click");
  owl.on('change.owl.carousel',
                function(event) {
       var owl = jQuery('.penci-owl-carousel');
           var element   = event.target;         // DOM element, in this example .owl-carousel
                  var name      = event.type;           // Name of the event, in this example dragged
                  var namespace = event.namespace;      // Namespace of the event, in this example owl.carousel
                  var items     = event.item.count;     // Number of items
                  var item      = event.item.index;     // Position of the current item
                  // Provided by the navigation plugin
                  var pages     = event.page.count;     // Number of pages
                  var page      = event.page.index;     // Position of the current page
                  var size      = event.page.size;      // Number of items per page
            console.log("Type1: "+ name);
            console.log("TagName1: "+ element.tagName);
            console.log("ClassName1: "+ element.className);
            console.log("Items1: "+ items);
            console.log("item1: "+item);
            console.log("Namespace1: "+namespace);
            indexSlider = item;
                });
    owl.on('changed.owl.carousel',
                function(event) {
       var owl = jQuery('.penci-owl-carousel');
           var element   = event.target;         // DOM element, in this example .owl-carousel
                  var name      = event.type;           // Name of the event, in this example dragged
                  var namespace = event.namespace;      // Namespace of the event, in this example owl.carousel
                  var items     = event.item.count;     // Number of items
                  var item      = event.item.index;     // Position of the current item
                  // Provided by the navigation plugin
                  var pages     = event.page.count;     // Number of pages
                  var page      = event.page.index;     // Position of the current page
                  var size      = event.page.size;      // Number of items per page
                  console.log("Type2: "+ name);
            console.log("Target2: "+ element.tagName);
            console.log("ClassName1: "+ element.className);
            console.log("Items2: "+ items);
            console.log("item2: "+item);
            console.log("Namespace2: "+namespace);
                console.log("RET2: "+indexSlider);
                });
        owl.on('translate.owl.carousel',
        function(e) {
          idxSlider = indexSlider;
          console.log("Changed, StateButton: "+estadoGlobalOWL);
            //var newdivc = document.createElement("div");
            var newdiv = document.createElement("div");
            var dotsroot = document.getElementsByClassName("owl-dots")[0];
            newdiv.setAttribute("id", "idstopcar");
            newdiv.setAttribute("class", "playstop run segundo stop");
          if(estadoGlobalOWL == 1){
             newdiv.setAttribute("style","display: inline-block; margin-bottom: 0px; margin-left: 30px; margin-top: -3px;");
            }else{
             newdiv.setAttribute("style","display: none;  margin-bottom: 0px; margin-left: 30px; margin-top: -3px;");
            }
            //newdivc.appendChild(newdiv);
          dotsroot.appendChild(newdiv);
            console.log("Added div stop");
          //jQuery("#idstopcar").unbind("click");
          jQuery('#idstopcar').click(function() {
             var owl = jQuery('.penci-owl-carousel');
             console.log("Event Stop...");
             var idstop = document.getElementById("idstopcar");
             idstop.style.display="none";
             var idplay = document.getElementById("idplaycar");
             idplay.style.display="inline-block";
             console.log("Stop on event...");
             owl.trigger('stop.owl.autoplay');
             //owl.trigger('to.owl.carousel', [indexSlider, 500]);
             estadoGlobalOWL = 0;
             fromEventStop = 1;
           });
          //var newdivc1 = document.createElement("div");
            var newdiv1 = document.createElement("div");
            dotsroot = document.getElementsByClassName("owl-dots")[0];
            newdiv1.setAttribute("id", "idplaycar");
            newdiv1.setAttribute("class", "playstop run primero play");
          if(estadoGlobalOWL == 1){
             newdiv1.setAttribute("style","display:  margin-bottom: 0px; none;margin-left: 30px; margin-top: -3px;");
            }else{
             newdiv1.setAttribute("style","display: inline-block;  margin-bottom: 0px; margin-left: 30px; margin-top: -3px;");
            }
            //newdivc1.appendChild(newdiv1);
            dotsroot.appendChild(newdiv1);
            console.log("Added div play");
          //jQuery("#idplaycar").unbind("click");
          jQuery('#idplaycar').click(function() {
             var owl = jQuery('.penci-owl-carousel');
             console.log("Event Play...");
             var idplay = document.getElementById("idplaycar");
             idplay.style.display="none";
             var idstop = document.getElementById("idstopcar");
             idstop.style.display="inline-block";
             console.log("Play on Event...");
             //owl.trigger('to.owl.carousel', [indexSlider, 500]);
             owl.trigger('play.owl.autoplay', [14000]);
             estadoGlobalOWL = 1;
          });
          var owl = jQuery('.penci-owl-carousel');
          if(estadoGlobalOWL == 0){
            if(fromEventStop == 0){
             console.log("On Change Stopping Carousel");
            owl.trigger('stop.owl.autoplay');
            }else{
              fromEventStop = 0;
            }
          }else{
            console.log("On Change Playing Carousel");
            owl.trigger('play.owl.autoplay', [14000]);
          }
        });
  /*
        owl.on('translate.owl.carousel',
        function(e) {
            var owl = jQuery('.penci-owl-carousel');
          console.log("Translated, StateButton: "+estadoGlobalOWL);
              if(estadoGlobalOWL == 0){
             console.log("On Translate Stopping Carousel");
                owl.trigger('stop.owl.autoplay');
                var idplay = document.getElementById("idplaycar");
                idplay.style.display="inline-block";
                var idstop = document.getElementById("idstopcar");
                idstop.style.display="none";
                //estadoGlobalOWL = 1;
              }
        });
  */
  //var newdivc2 = document.createElement("div");
    var newdiv = document.createElement("div");
 var dotsroot = document.getElementsByClassName("owl-dots")[0];
    newdiv.setAttribute("id", "idstopcar1");
    newdiv.setAttribute("class", "playstop run segundo stop");
    newdiv.setAttribute("style","display: inline-block;  margin-bottom: 0px; margin-left: 30px; margin-top: -3px;");
  //newdivc2.appendChild(newdiv);
  dotsroot.appendChild(newdiv);
    console.log("Added div stop 1");
     jQuery("#idstopcar1").unbind("click");
       jQuery('#idstopcar1').click(function() {
       var owl = jQuery('.penci-owl-carousel');
       console.log("Event Stop 1...");
       var idstop = document.getElementById("idstopcar");
       idstop.style.display="none";
       var idplay = document.getElementById("idplaycar");
       idplay.style.display="inline-block";
       owl.trigger('stop.owl.autoplay');
       //console.log("After Stop 1...");
       estadoGlobalOWL = 0;
     });
  //var newdivc3 = document.createElement("div");
    var newdiv1 = document.createElement("div");
 dotsroot = document.getElementsByClassName("owl-dots")[0];
    newdiv1.setAttribute("id", "idplaycar1");
    newdiv1.setAttribute("class", "playstop run primero play");
    newdiv1.setAttribute("style","display: none;  margin-bottom: 0px; margin-left: 30px; margin-top: -3px;");
  //newdivc3.appendChild(newdiv1);
  dotsroot.appendChild(newdiv1);
    console.log("Added div play 1");
  jQuery("#idplaycar1").unbind("click");
      jQuery('#idplaycar1').click(function() {
       var owl = jQuery('.penci-owl-carousel');
       console.log("Event Play 1...");
       var idplay = document.getElementById("idplaycar");
       idplay.style.display="none";
       var idstop = document.getElementById("idstopcar");
       idstop.style.display="inline-block";
       owl.trigger('play.owl.autoplay', [14000]);
       //console.log("After Event Play 1...");
       estadoGlobalOWL = 1;
    });
})

URL
leichtbaubwblog - Eine weitere WordPress-Website (neueseite.eu)

HTACCESS

User:
newpage

PW:
hxp43r9sa

Many Thanks for your support

The end result should be like the attachment Screenshot

Maybe you have another Workaround?

It is very Important the Layout. 
The Nav Dots and the Play and Pause Button at the right side.

I send you a PM

The Problem is that when the slider continue the pause button disapear.

I will Try your solution. 

Thanks in Advance

We have fixed de Problem