We Keep Coding

slitslider.js - open a specific div, not with arrow

I'm using Slit Slider js. This opens div slides with arrows and dots for navigation. Is there a way to create a link to open a specific slide? For example: Home, About Us etc. instead of arrows.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$(function() {
var Page = (function() {
var $navArrows = $('#nav-arrows'),
$nav = $('#nav-dots > span'),
slitslider = $('#slider').slitslider({
onBeforeChange: function(slide, pos) {
$nav.removeClass('nav-dot-current');
$nav.eq(pos).addClass('na```v-dot-current');
}
}),
init = function() {
initEvents();
},
initEvents = function() {
// add navigation events
$navArrows.children(':last').on('click', function() {
slitslider.next();
return false;
});
$navArrows.children(':first').on('click', function() {
slitslider.previous();
return false;
});
$nav.each(function(i) {
$(this).on('click', function(event) {
var $dot = $(this);
if (!slitslider.isActive()) {
$nav.removeClass('nav-dot-current');
$dot.addClass('nav-dot-current');
}
slitslider.jump(i + 1);
return false;
});
});
};
return {
init: init
};
})();
Page.init();
});
Thanks for your support :)

How can I add autoplay to this this Slice Slider?

I have a slider here and I cannot figure out how to implement the autoplay functionality. Can I set this up quickly in the var settings?
I tried to fill in the setInterval(spin, 3000); command before and after the init lines but so far it didn't work out.
(function($) {
$.fn.sliceSlider = function(options) {
var settings = {
speed : '500',
easing : 'cubic-bezier(0.8, 0, 0.2, 1)',
};
if(options) {
$.extend(settings, options);
}
return this.each(function() {
var $this = $(this),
$rightColumn = $this.find('.slice-slider-right-column'),
$rightWrapper = $this.find('.slice-slider-right-column .slice-slider-wrapper'),
$rightSlide = $this.find('.slice-slider-right-column .slice-slider-slide'),
$length = $rightSlide.length,
$settings = settings,
mousewheelFinish = 0,
$leftColumnContent = "";
$rightSlide.each(function(){
$leftColumnContent = '<div class="slice-slider-slide">'+$(this).html()+'</div>' + $leftColumnContent;
});
$('<div class="slice-slider-left-column"><div class="slice-slider-wrapper">'+$leftColumnContent+'</div></div>').insertBefore($rightColumn);
if($length>1) $this.append('<div class="pagination"><div class="point active"></div>'+'<div class="point"></div>'.times($length-1)+'</div>');
var $leftWrapper = $this.find('.slice-slider-left-column .slice-slider-wrapper'),
$leftSlide = $this.find('.slice-slider-left-column .slice-slider-slide');
$leftSlide.filter(':last').addClass('active').prevAll().addClass('prev');
$rightSlide.filter(':first').addClass('active').nextAll().addClass('next');
$this.find('.slice-slider-wrapper, .slice-align-animation').css({'transition':'all '+$settings.speed+'ms '+$settings.easing, '-webkit-transition':'all '+$settings.speed+'ms '+$settings.easing});
function init(){
setActiveSlice($leftWrapper, $leftSlide.filter('.active').index());
setActiveSlice($rightWrapper, $rightSlide.filter('.active').index());
}
function setActiveSlice(foo, index){
foo.css({'top':$this.height()*(-1)*index});
}
init();
$('.rotate').css({'width':$('.rotate:visible').parent().height()});
$this.on('mousewheel', function(event) {
if(!mousewheelFinish && !$('body').hasClass('min-height')){
mousewheelFinish = 1;
setTimeout(function(){mousewheelFinish = 0;}, $settings.speed);
if(event.deltaY>0) {
$leftSlide.filter('.active:not(:last-child)').removeClass('active prev next').addClass('prev').next().removeClass('prev next').addClass('active');
$rightSlide.filter('.active:not(:first-child)').removeClass('active prev next').addClass('next').prev().removeClass('prev next').addClass('active');
$this.find('.pagination .point.active:not(:first-child)').removeClass('active').prev().addClass('active');
}
else {
$leftSlide.filter('.active:not(:first-child)').removeClass('active prev next').addClass('next').prev().removeClass('prev next').addClass('active');
$rightSlide.filter('.active:not(:last-child)').removeClass('active prev next').addClass('prev').next().removeClass('prev next').addClass('active');
$this.find('.pagination .point.active:not(:last-child)').removeClass('active').next().addClass('active');
}
init();
}
});
$this.find('.pagination .point').on('click', function(){
$(this).parent().find('.active').removeClass('active');
$(this).addClass('active');
var index = $this.find('.pagination .point').filter('.active').index(),
activeSlideLeft = $leftSlide.eq($length-1-index),
activeSlideRight = $rightSlide.eq(index);
$leftSlide.removeClass('active prev next');
$rightSlide.removeClass('active prev next');
activeSlideLeft.addClass('active').prevAll().addClass('prev');
activeSlideLeft.nextAll().addClass('next');
activeSlideRight.addClass('active').prevAll().addClass('prev');
activeSlideRight.nextAll().addClass('next');
init();
});
I would like to have the slider start when the page is fully loaded...

Welcome, if I understood you well, you can easily create a function for that with the code that you already have. Add this code at the end of your snippet:
const changeSlide = () => {
$leftSlide.filter('.active:not(:first-child)').removeClass('active prev next').addClass('next').prev().removeClass('prev next').addClass('active');
$rightSlide.filter('.active:not(:last-child)').removeClass('active prev next').addClass('prev').next().removeClass('prev next').addClass('active');
$this.find('.pagination .point.active:not(:last-child)').removeClass('active').next().addClass('active');
init();
}
let myAutoplay = setInterval(changeSlide, 3000);
Notice that it will stop in the last slider, if you want you can jump and start again from the beginning.
To avoid any issue with your mousewheel you just need to clear and set again the interval every time the user interacts with it. Something like this:
$this.on('mousewheel', function(event) {
clearInterval(myAutoplay);
myAutoplay = setInterval(changeSlide, 3000);
// The rest of the code
});
Hope this help or at least point you to the right direction :)

Jquery Slide Menu with Double Tap to go

I was using a jquery slide menu on my website just like:
http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/
then when I started to renew my site I saw this:
http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly/tag/touch
which is nice on mobile devices but only has only one level depth.
I tried to merge them together but I couldn't. Is it possible to do it? If so how?
//jqueryslidemenu.js
//Specify full URL to down and right arrow images (23 is padding-right to add to top level LIswith drop downs):
var arrowimages={down:['downarrowclass', 'down.gif', 23], right:['rightarrowclass', 'right.gif']}
var jqueryslidemenu={
animateduration: { over: 200, out: 100 }, //duration of slide in/ out animation, in milliseconds
buildmenu:function(menuid, arrowsvar){
jQuery(document).ready(function($){
var $mainmenu=$("#"+menuid+">ul")
var $headers=$mainmenu.find("ul").parent()
$headers.each(function(i){
var $curobj=$(this)
var $subul=$(this).find('ul:eq(0)')
this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
this.istopheader=$curobj.parents("ul").length==1? true : false
$subul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
$curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(
'<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])
+'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
+ '" style="border:0;" />'
)
$curobj.hover(
function(e){
var $targetul=$(this).children("ul:eq(0)")
this._offsets={left:$(this).offset().left, top:$(this).offset().top}
var menuleft=this.istopheader? 0 : this._dimensions.w
menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
if ($targetul.queue().length<=1) //if 1 or less queued animations
$targetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(jqueryslidemenu.animateduration.over)
},
function(e){
var $targetul=$(this).children("ul:eq(0)")
$targetul.slideUp(jqueryslidemenu.animateduration.out)
}
) //end hover
$curobj.click(function(){
$(this).children("ul:eq(0)").hide()
})
}) //end $headers.each()
$mainmenu.find("ul").css({display:'none', visibility:'visible'})
}) //end document.ready
}
}
//build menu with ID="myslidemenu" on page:
jqueryslidemenu.buildmenu("myslidemenu", arrowimages)
I want to merge this code with the one below. I tried but I couldn't make it. Where should I add it?
// Doubletaptogo.js
;(function ($, window, document, undefined) {
$.fn.doubleTapToGo = function (params) {
if (!('ontouchstart' in window) &&
!navigator.msMaxTouchPoints &&
!navigator.userAgent.toLowerCase().match(/windows phone os 7/i)) return false;
this.each(function () {
var curItem = false;
$(this).on('click', function (e) {
var item = $(this);
if (item[0] != curItem[0]) {
e.preventDefault();
curItem = item;
}
});
$(document).on('click touchstart MSPointerDown', function (e) {
var resetItem = true,
parents = $(e.target).parents();
for (var i = 0; i < parents.length; i++)
if (parents[i] == curItem[0])
resetItem = false;
if (resetItem)
curItem = false;
});
});
return this;
};
})(jQuery, window, document);
$(function () {
$('#myslidemenu li:has(ul)').doubleTapToGo();
});
Thanks

What i would do is register a timer on your first click, save that variable within your plugin scope, and access it again to determine if enough time has passed to determine it as a double click. I think double click by standard is 750ms.
Or I believe jQuery has a built in .dblclick() (which may only work on desktop using click events).
I found this snippet of code online:
(function($) {
$.fn.doubleTap = function(doubleTapCallback) {
return this.each(function(){
var elm = this;
var lastTap = 0;
$(elm).bind('vmousedown', function (e) {
var now = (new Date()).valueOf();
var diff = (now - lastTap);
lastTap = now ;
if (diff < 250) {
if($.isFunction( doubleTapCallback ))
{
doubleTapCallback.call(elm);
}
}
});
});
}
})(jQuery);

Dots for Children in div. A jQuery headache - PART 2

So this is part 2 of my previous question (was advised to start a new question for this one).Just for reference here is my previous post: Dots for Children in div. A jQuery headache
My question now is: How does one go about adding an "active" class/id to the "imgdots" div for styling purposes?For example:Say I'm on image 4 then I want the 4th "imgdots" div to be another colour.Again, any help would be much appreciated! EDITI have set up a fiddle containing what I have thus far. The initial image slider was from a tutorial I followed and kinda pieced it all together from there. Here is the link: jsfiddle.net/Reinhardt/cgt5M/8/

Have you seen nth child css?
http://www.w3schools.com/cssref/sel_nth-child.asp
#showContainer:nth-child(4)
{
background:#ff0000;
}

Try
/* The jQuery plugin */
(function ($) {
$.fn.simpleShow = function (settings) {
var config = {
'tranTimer': 5000,
'tranSpeed': 'normal'
};
if (settings) $.extend(config, settings);
this.each(function () {
var $wrapper = $(this),
$ct = $wrapper.find('.showContainer'),
$views = $ct.children();
var viewCount = $views.length;
var $imgdotholder = $('<div class="imgdotholder"></div>').appendTo('.wrapper');
for (var i = 0; i < viewCount; i++) {
$('<div class="imgdots"></div>').appendTo($imgdotholder);
}
var $imgdots = $imgdotholder.children();
var timer, current = 0;
function loop() {
timer = setInterval(next, config.tranTimer);
}
function next(idx) {
$views.eq(current).hide();
current = idx == undefined ? current + 1 : idx;
if (isNaN(current) || current < 0 || current >= viewCount) {
current = 0;
}
$views.eq(current).fadeIn(config.tranSpeed);
$imgdots.removeClass('current').eq(current).addClass('current');
}
$imgdots.click(function(){
clearInterval(timer);
next($(this).index());
})
$wrapper.find('.btn_nxt').click(function(){
clearInterval(timer);
next();
});
$ct.hover(function(){
clearInterval(timer);
}, loop);
$views.slice(1).hide();
$imgdots.eq(0).addClass('current');
loop();
});
return this;
};
})(jQuery);
/* Calling The jQuery plugin */
$(document).ready(function () {
/**/
$(".wrapper").simpleShow({
'tranTimer': 3000,
'tranSpeed': 800
});
});
Demo: Fiddle

jQuery interval won't restart after hover out

After calling a PHP function, which generates the HTML,
I call the function below for the specific slider id.
That works fine, hover pauses the slideshow, also ok.
But when I am hovering out of the section, firebug gives the following error:
TypeError: o.handler.apply is not a function
And the slideshow won't continue.
Thanks in advance.
function CallSlider(sliderid){
var $slider = $('#'+sliderid);
var $slide = 'li';
var $transition_time = 1000; // 1 second
var $time_between_slides = 2000; // 4 seconds
function slides(){
return $slider.find($slide);
}
slides().fadeOut();
// set active classes
slides().first().addClass('active');
slides().first().fadeIn($transition_time);
$('#'+sliderid).hover(function() {
clearInterval(sliderid);
}, sliderid = setInterval(
function(){
var $i = $slider.find($slide + '.active').index();
//alert('test');
slides().eq($i).removeClass('active');
slides().eq($i).fadeOut($transition_time);
if (slides().length == $i + 1) $i = -1; // loop to start
slides().eq($i + 1).fadeIn($transition_time);
slides().eq($i + 1).addClass('active');
}
, $transition_time + $time_between_slides
)
);
}

I believe that error is related to the fact that hover() expects parameters to be functions.
Type: Function() - A function to execute when the mouse pointer enters/leaves the element.
http://api.jquery.com/hover/
I suggest putting your "hover off" code in its own function, like so:
$('#'+sliderid).hover(
function() {
// hover over
clearInterval(sliderid);
},
function () {
// hover off
sliderid = setInterval(...);
}
);
EDIT:
Here's an example, based on the code you provided, of how to keep things flexible (i.e. for dynamic lists).
var slide = 'li';
var transition_time = 1000; // 1 second
var time_between_slides = 2000; // 4 seconds
function startCycle($slider, $slides) {
return setInterval(
function () {
var $thisslide=jQuery(slide+'.active',$slider);
var $nextslide=($thisslide.next(slide).length?$thisslide.next(slide):$slides.eq(0));
$thisslide.removeClass('active').fadeOut(transition_time);
$nextslide.fadeIn(transition_time).addClass('active');
}, transition_time + time_between_slides
);
}
jQuery('ul.slider').each(function () {
var sliderid;
var $slider = jQuery(this);
var $slides = $slider.find(slide);
$slides.fadeOut();
// set active classes
$slides.first().addClass('active').fadeIn(transition_time);
$slider.hover(
function () {
// hover over
clearInterval(this.sliderid);
},
function () {
// hover off
this.sliderid = startCycle($slider, $slides);
}
);
this.sliderid = startCycle($slider, $slides);
});
http://jsfiddle.net/gk74V/1/