codeupdates replied
Customer Reply
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
Public Ticket #17344
Play and pause button in post slider
Conversation thread
codeupdates replied
Customer Reply
I send you a PM
PenciDesign Supporter replied
Staff Reply
Hi,
Please use the following custom JS code:
(function($) {
"use strict";
$(document).ready(function() {
var owlfSlider = $('.featured-area .penci-owl-featured-area'),
playBtn = $('#idplaycar'),
stopBtn = $('#idstopcar'),
navHTML = '<div id="idstopcar" class="playstop run segundo stop" style="display: inline-block; margin-bottom: 0px; margin-left: 30px; margin-top: -3px;"></div><div id="idplaycar" class="playstop run primero play" style="display: margin-bottom: 0px; none;margin-left: 30px; margin-top: -3px;"></div>';
playBtn.hide();
owlfSlider.find('.owl-dots').append(navHTML);
playBtn.on('click',function(){
owlfSlider.trigger('play.owl.autoplay',[4000]);
$(this).hide();
stopBtn.show();
});
stopBtn.on('click',function(){
owlfSlider.trigger('stop.owl.autoplay');
$(this).hide();
playBtn.show();
});
});
})(jQuery);
Resource: https://owlcarousel2.github.io/OwlCarousel2/demos/autoplay.html
Regards,
PenciDesign.
codeupdates replied
Customer Reply
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.
codeupdates replied
Customer Reply
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
PenciDesign Supporter replied
Staff Reply
Hi,
Please send me your page URL, I'll check and help you add this feature.
Regards,
PenciDesign.
codeupdates started the conversation
Conversation Start
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?
Want to join this conversation or access attachments? Sign in first.
