We Keep Coding

Slick Slider - slick-current class is not moving when navigating if all slides are shown

I have a simple slider with Slick.js (https://kenwheeler.github.io/slick/)
The slider arrows are hidden by default when all slide-items are shown because its not necessary to slide. So i use custom arrows with a click function that call .slick('slickNext') or .slick('slickPrev') and its working fine. But my issue is when all slide-items are shown and I call the functions to slide next or previous the .slick-current class on the active slide-item is not switching anymore.
My goal is that the .slick-current class still moves when I click the buttons.
An example: https://jsfiddle.net/0nprbj95/2/ Appreciate your help!

One solution to ensure that Slick is moving the .slick-current class is to hold the state of the current slide index and then use the slick('goTo') method to force Slick to move the class to this slide.
This may not give exactly the behavior that you want because Slick will still shift the slides in its "viewport", but you might be able to tweak the behavior from there.
$(document).ready(function(){
var currentSlide = 0;
var numSlides = document.getElementsByClassName('slide-item').length;
$('.slider-items-wrapper').slick({
slidesToShow: 4,
slidesToScroll: 1,
mobileFirst: true,
infinite: true,
arrows: false,
});
$('.button-prev').click(function(){
// wrap to last slide when clicked on first slide
currentSlide = (currentSlide - 1 + numSlides) % numSlides;
$('.slider-items-wrapper').slick('goTo', currentSlide);
});
$('.button-next').click(function(){
// wrap to first slide when clicked on last slide
currentSlide = (currentSlide + 1) % numSlides;
$('.slider-items-wrapper').slick('goTo', currentSlide);
});
});
Full JSFiddle: https://jsfiddle.net/c3amxzk1/1/

Only specific img in javascript

Hello,
I'm doing a website with a javascript slider. I want to use only specific images from one folder for the slider, not all of the img in the DOM. Because I'm adding more img which shouldn't be part of the slider....
I'm using this script:
$(function(){
var i= 0;
//when the next button is clicked on
$('.next').on("click", function(){
//increase the display picture index by 1
i = i + 1;
//if we are at the end of the image queue, set the index back to 0
if (i == $('img').length) {
i=0;
}
//set current image and previous image
var currentImg = $('img').eq(i);
var prevImg = $('img').eq(i-1);
//call function to animate the rotation of the images to the right
animateImage(prevImg, currentImg);
});
//when the previous button is clicked on
$('.previous').on("click", function(){
//if we are at the beginning of the image queue, set the previous image to the first image and the current image to the last image of the queue
if (i==0) {
prevImg = $('img').eq(0);
i=$('img').length-1;
currentImg = $('img').eq(i);
}
//decrease the display picture index by 1
else {
i=i-1;
//set current and previous images
currentImg = $('img').eq(i);
prevImg = $('img').eq(i+1);
}
//call function to animate the rotation of the images to the left
animateImageLeft(prevImg, currentImg);
});
//function to animate the rotation of the images to the left
function animateImageLeft(prevImg, currentImg) {
//move the image to be displayed off the visible container to the right
currentImg.css({"left":"100%"});
//slide the image to be displayed from off the container onto the visible container to make it slide from the right to left
currentImg.animate({"left":"0%"}, 1000);
//slide the previous image off the container from right to left
prevImg.animate({"left":"-100%"}, 1000);
}
//function to animate the rotation of the images to the right
function animateImage(prevImg, currentImg) {
//move the image to be displayed off the container to the left
currentImg.css({"left":"-100%"});
//slide the image to be displayed from off the container onto the container to make it slide from left to right
currentImg.animate({"left":"0%"}, 1000);
//slide the image from on the container to off the container to make it slide from left to right
prevImg.animate({"left":"100%"}, 1000);
}
});
Thank you for any help!

Instead of calling $('img') every time you need the list of images, maintain the array of the images that you want displayed.
For example, if you can give all the img tags for the slider class="slider-img" to make this selection easier.
var imgs = $('img.slider-img');
And replace $('img') in your code with imgs.
Or if you want from all the images served from a specific web address or "folder", you can do the following:
var address = "example.com/silder_imgs";
var imgs = $('img').filter(function() { return $(this).attr(a).includes(address) });

when i click the button the whole webpage moved to another webpage like a slide

I have two html pages: Page1.html, Page2.html. I would like to get the page 2.html when i click the button in page1 with slide effect transition. I have found a lot of plugins and solutions to slide between two divs or slide within a container but what I need is a complete page change.
// Author: Max McKinney
// Version: 1.0
// Description: Fades the page from a given color to show the content and fades out to the given color.
// Requires: jQuery
(function ( $ ) {
$.fn.mPageTransition = function(options) {
// Grab the settings
var settings = $.extend({
color: "#ffc107",
fadeOutTime: 300,
fadeInTime: 300
}, options)
// Get the body reference and get the original background color as we will be changing that during the transition
var body = $('body');
var originalBackgroundColor = $(body).css("background-color");
// Due to the css the body is initially hidden so we will fade it in. This prevents and "flickering" from occuring
$(body).css('visibility','visible').hide().fadeIn(settings.fadeInTime);
// Intercept all link clicks to fade page out
$("a").click(function(e) {
// Get the original link location and stop it from occuring
var link = this;
e.preventDefault();
// First fade body content away, fade the background color to the defined custom color. Once it has fade in, fade it away and then follow the link href
$(body).animate({
"background-color": settings.color,
"opacity": 0
}, settings.fadeInTime, function() {
// Fade background color back to orginal and once finished follow link
$(body).animate({"background-color": originalBackgroundColor}, settings.fadeOutTime, function() {
var href = $(link).attr("href");
location.href=href;
})
});
});
};
}( jQuery ));

Jquery animate negative top and back to 0 - starts messing up after 3rd click

The site in question is this one:
http://www.pickmixmagazine.com/wordpress/
When you click on one of the posts (any of the boxes) an iframe will slide down from the top with the content in it. Once the "Home" button in the top left hand corner of the iframe is clicked, the iframe slides back up. This works perfectly the first 2 times, on the 3rd click on of a post, the content will slide down, but when the home button is clicked, the content slides back up normally but once it has slid all the way up to the position it should be in, the iframe drops straight back down to where it was before the home button was clicked, I click it again and then it works.
Here is the code I've used for both sliding up and sliding down functions:
/* slide down function */
var $div = $('iframe.primary');
var height = $div.height();
var width = parseInt($div.width());
$div.css({ height : height });
$div.css('top', -($div.width()));
$('.post').click(function () {
$('iframe.primary').load(function(){
$div.animate({ top: 0 }, { duration: 1000 });
})
return false;
});
/* slide Up function */
var elm = parent.document.getElementsByTagName('iframe')[0];
var jelm = $(elm);//convert to jQuery Element
var htmlElm = jelm[0];//convert to HTML Element
$('.homebtn').click(function(){
$(elm).animate({ top: -height }, { duration: 1000 });
return false;
})

Have you considered using Ajax, like load(), ready() in jquery to control them better?
I am also not sure what you are trying to do with this.
var height = $div.height();
$div.css({ height : height });
may be you want to get the height of the current window? Where you can get it this way
var $dDiv = $('iframe.primary');
var innerH = window.innerHeight;
$dDiv.height(innerH);
Also try avoiding naming your custom var with default names like height, width, div, etc... You will confuse yourself and make debugging a pain.

Nivo Slider - Stop animation when only one image

I am using the jQuery plugin for Nivo Slider and need to find a way to stop it from transitioning when only one image exists.

Can you set the option:
manualAdvance: true
Will that help? This is the documentation for the latest NivoSlider update.
If this wont help, can you post the code you are using to enable the slider?
This will be the full code:
$(window).load(function() {
$('#slider').nivoSlider({
slices: 1, // For slice animations
startSlide: 0, // Set starting Slide (0 index)
manualAdvance: true, // Force manual transitions
captionOpacity: 0.8, // Universal caption opacity
randomStart: false, // Start on a random slide
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
});

There is probably a better way to do it but it works for me:
if($('#slider img').length == 1) {
$('#slider').nivoSlider({});
$('.nivo-controlNav').css('display', 'none');
$('.nivo-directionNav').css('display', 'none');
$('#slider').data('nivo:vars').stop = true;
} else {
$('#slider').nivoSlider({
effect: 'slideInLeft'
});
}
PS. It's important to check the number of images before initializing Nivoslider because it seems to duplicate image tags...

None of the answers quite worked for me, because I still wanted a single image to display with a caption. I ended up using slightly different options to initialise the nivoSlider depending on the number of images (my images were in a containing div with the id 'hero-images'):
var numImages = $('#hero-images img').length;
if (numImages === 0) {
//No images - hide the block
$('#hero-images').hide();
} else if (numImages === 1) {
// 1 image - disable controls and set to manual advance to prevent animation
$('#hero-images').nivoSlider({
directionNav: false,
manualAdvance: true,
controlNav: false
});
} else {
// Multiple images, set up as normal
$('#hero-images').nivoSlider({
effect: 'fade',
directionNav: false
});
}