Move my slider thumbnails as new slide comes into view - javascript

Script: jQuery Cycle slider: http://jquery.malsup.com/cycle/
I'm using the following code to move my slider thumbnails container to the left by "130px" just before the next slide comes into view. The margin is then reset to "0px" when the last slide is reached. This works well, however the container does not shift until the third slide.
This is the code I'm using:
function onBefore(currElement, nextElement, opts, isFoward) {
var currentslide = opts.currSlide + 1;
if(currentslide == opts.slideCount) {
jQuery(".slider-nav").animate({marginLeft: '0'});
} else if(currentslide > 1 && currentslide != opts.slideCount) {
jQuery(".slider-nav").animate({marginLeft: '-=133'});
}
}
How can I have it shift once the second slide comes into view. Note: Replacing "> 1" in the code above with "> 0" shifts the container as soon as the page loads.

I'm not sure of the context in which this function is called. But I think you want the following code:
function onBefore(currElement, nextElement, opts, isFoward) {
if(opts.currSlide == opts.slideCount) {
jQuery(".slider-nav").animate({marginLeft: '0'});
} else {
jQuery(".slider-nav").animate({marginLeft: '-=133'});
}
}
If that doesn't work it may be because your first slide is (slideCount = 0) instead of (slideCount = 1). If so change the IF test to:
if(opts.currSlide == (opts.slideCount - 1)) {
Regards
Neil

Related

How can I change body background color depending on active slide?

I am using Swiper (no jQuery, pure JavaScript) to display 11 slides. I want to change the body background-color depending on which slide the user is on.
This code works fine, but when the slider restarts it keeps the colour of the last slide instead of restarting from the first one:
swiper.on('transitionEnd', function(e) {
if (this.activeIndex == 1) {
document.querySelector("body").style.background = '#F4F1C1';
}
if (this.activeIndex == 2) {
document.querySelector("body").style.background = '#DCDDDE';
}
if (this.activeIndex == 3) {
document.querySelector("body").style.background = '#ECEBDF';
}
if (this.activeIndex == 4) {
document.querySelector("body").style.background = '#F2E3E3';
}
if (this.activeIndex == 5) {
document.querySelector("body").style.background = '#D0EFF0';
}
});
On this JSFiddle you can see that after slide 11, the slider goes back to slide 1 but the colour is still #999999 rather than #F4F1C1.
Why is the index not restarting?
Swiper shifts its array index by 1. As seen here in the documentation
So you're correctly starting from index 1 but not accounting for the 11th item at index 12
https://swiperjs.com/api/
You can use this.realIndex to get the correct index of the looped item according to the documentation.

Make last image in slider pause before reseting loop (slider from scratch)

I'm working on a slider from scratch (trying to get the hang of it) but I've come up with a problem. In my slider all slides take 3 seconds before going to the next one, but once the last slide has been reached, no time to view it is given.
I want to add a smooth transition from the last slide to the first.
Here's a fiddle http://jsfiddle.net/4wnrwkf0/
function startSlider() {
interval = setInterval(function() {
$sliderContainer.animate({'margin-left': '-=+100%'}, animationSpeed, function() {
if (++currentSlide === $slides.length+1) {
currentSlide = 1;
$sliderContainer.css('margin-left', 0);
}
});
}, pause);
}
I'm guessing my problem is somewhere around this code
For the time being I'm using a blank slide at the end...but I don't want to leave it like that :P
Thanks in advance
EDIT:
I found a working solution by repeating the first slide at the end of the ul, seems a bit hackish so if anyone has an idea, i'm willing to try alternatives. Anyways...in case anyone finds it useful: http://jsfiddle.net/eclipticald/2gLh5ks0/
See this fiddle if the effect resolved your problem -- http://jsfiddle.net/4wnrwkf0/5/
FROM:
if (++currentSlide === $slides.length+1) {
currentSlide = 1;
$sliderContainer.css('margin-left', 0);
}
TO:
if (++currentSlide === $slides.length+1) {
$sliderContainer.animate({'margin-left': '0'}, animationSpeed, function() {
currentSlide = 1;
});
}
EDIT. Another updated fiddle, so the last slide won't show the white/blank slide, instead goes to slide #1. http://jsfiddle.net/4wnrwkf0/6/
Cheers.

How to convert data attribute value to integer for in javascript?

I've been searching everywhere for this and can't seem to find an anwser that works. What i have is a slider with arrows and buttons, when an arrow or button is clicked the function grabs the data-cs attribute which it uses to to determine the next slide.
the html
<div id="arrowleft" class="sliderbtns flip" data-sc="prev"></div>
<div id="arrowright" class="sliderbtns" data-sc="next"></div>
<div id="buttons" class="sliderbtns">
<div class="selectedbtn sliderbtns" id="button1" data-sc="1"></div>
<div class="button sliderbtns" data-sc="2"></div>
</div>
the javascript
$( ".sliderbtns" ).click(function() {
var button_data = $(this).attr('data-sc');
myslider(button_data);
});
the function in js
function myslider(position) {
if (position == "next" && (currentslide == slidecount)) {
position = 1;
} else if (position == "next") {
position = currentslide + 1;
} else if ((position == "prev") && (currentslide == 1)){
position = slidecount;
} else if ((position == "prev")) {
position = position - 1;
} else {
// position must then eqauls some integer from the data-sc attribute
position = parseInt(position);
alert (position); // alerts properly the first time
var out_slide = "Slide" + currentslide + "Out";
var next_slide = "Slide" + position;
alert(out_slide); //these work fine the first time
alert(next_slide);
window[next_slide]();
window[out_slide]();
// later on in the slide currentslide becomes position after this it returns value of Nan
setTimeout( function() {
currentslide = position;
alert("this is the current slide position" + currentslide);
}, 2000);
/* ommited code */
}
}
The arrows work fine if I just click on the arrows but when I click on a button it proprly goes to the next slide but none of the buttons no longer work and display current position as NaN, I have tried making the position variable an int in a bunch of different ways with Number(position), ToInt and ParseInt, but still after currentslide = position it returns it as Nan and the slider can no longer find the proper slides and functions etc... If any one has any idea what I could be doing wrong, how to properly make sure it's an actuall integer if that's posssible from a data attribute, or maybe some other way around I can throw that data around as and int that could be gotten by clicking the arrows or buttons. Greatly appreciate any help!
To get data use .data():
$(this).data('sc')
Seems nobody reading the question.
NaN should appear due to this:
position = currentslide + 1;
From code, I cannot see currentslide being intialized. If you do undefined + 1, you get NaN.
Globally, set currentSlide = 0 to have it work properly. Unless you're hiding code.
ps. title does not match the question posed in the description.

How can I set my browser window's scrollbar or a div scrollbar to scroll in increments using animate and scrollTop?

The general idea to the site i am designing is to scroll through a set of menu items horizontally and incrementally underneath a static div that will magnify(increase dimensions and pt size) the contents of a menu items. I don't really need help with the magnify portion because i think it's as simple as adding a mag class to any of the menuItem divs that go underneath the static div. I have been messing with this for a few weeks and the code I have for incrementally scrolling, so far, is this:
$(document).ready(function () {
currentScrollPos = $('#scrollableDiv').scrollTop(120); //sets default scroll pos
/*The incrementScroll function is passed arguments currentScrollPos and UserScroll which are variables that i have initiated earlier in the program, and then initiates a for loop.
-The first statement sets up the variables: nextScrollPos as equal to the currentScrollPos(which by default is 120px) plus 240px(the distance to next menuItem), prevScrollPos as equal to the currentScrollPos(which by default is 120px) minus 240px(the distance to next menuItem).
-The second Statement checks to see if the user has scrolled using var userScroll
-The third statement sets: var CurrentScroll equal to the new scroll position and var userScroll to false*/
function incrementScroll(currentScrollPos, userScroll) {
for (var nextScrollPos = parseInt(currentScrollPos + 240, 10),
prevScrollPos = parseInt(currentScrollPos - 240, 10); //end first statement
userScroll == 'true'; console.log('dude'), //end second statement and begining of third
currentScrollPos = scrollTop(), userScroll = 'false') {
if (scrollTop() < currentScrollPos) {
$('#scrollableDiv').animate({
scrollTop: (parseInt(prevScrollPos, 10))
}, 200);
console.log('scrolln up')
} else if (scrollTop() > currentScrollPos) {
$('#scrollableDiv').animate({
scrollTop: (parseInt(nextScrollPos, 10))
}, 200);
console.log('scrolln down')//fire when
}
}
}
$('#scrollableDiv').scroll(function () {
userScroll = 'true';
_.debounce(incrementScroll, 200); //controls the amount of times the incrementScroll function is called
console.log('straight scrolln')
});
});
I have found a variety of solutions that are nigh close: such as a plugin that snaps to the next or previous div horizontally demo, another solution that also snaps and is based on setTimeout demo, but nothing that nails incrementally scrolling through divs. I also found a way to control the rate at which a user may scroll through the menuItems using debounce which is included in the above code.
The console.logs inside the loop do not fire when I demo the code in jsfiddle which leads me to believe the problem lies within the loop. I'm a noob though so it could be in syntax or anywhere else in the code for that matter. Also in the second demo, i have provided the css for the horizontal static div, but the moment I put it in my html it keeps the js from working.
I would like to write the code instead of using a plugin and any help would be appreciated! Also, thank you ahead of time!
Try this fiddle. Menu container height is 960px to show 4 menu items. "Zoom" div is positioned absolutely at top. When you scroll mouse over this div, menu items shifts to top/bottom. I had to add additional div to bottom to be able to scroll to last 3 menu items. JS code:
jQuery(document).ready(function($){
var current = 0;
var menu = $('.menu-container').scrollTop(0);
var items = menu.find('.menu-item');
var zoom = $('.zoom');
function isVerticalScroll(event){
var e = event.originalEvent;
if (e.axis && e.axis === e.HORIZONTAL_AXIS)
return false;
if (e.wheelDeltaX)
return false;
return true;
}
function handleMouseScroll(event){
if(isVerticalScroll(event)){
var delta = event.originalEvent.wheelDelta * -1 || event.originalEvent.detail;
current += (delta > 0 ? 1 : -1);
if(current < 0)
current = 0;
if(current >= items.length){
current = items.length - 1;
}
menu.stop().animate({
"scrollTop": current * 240
}, 300);
items.removeClass('current').eq(current).addClass('current');
event && event.preventDefault();
return false;
}
}
zoom.on({
"MozMousePixelScroll": handleMouseScroll,
"mousewheel": handleMouseScroll
});
});
Hope it will help.

jquery cycle, link to other page on last slide

I'm working on a website using jquery cycle (1st version).
I have pages including a slideshow, I navigate into my slideshow with #next function.
when clicking on my last slide of my slideshow it redirect me to another page (var random_next_url_enfant).
it works fine, but my cycle starts again just before changing to the next page. (last slide, then first slide displays briefly and then link to the next page)...
see this example :
http://www.jacques-ferrier.com/projets/choisy-le-roi/
I would like to know if someone knows a trick to stop the slideshow and change page without latency. When the last slide from my slideshow is displayed, stop the sliding navigation, and when clicking goes directly to my link. I thought that the "e.preventDefault()" would do this but it doesn't.
here is my js code :
$('#slider_projets').cycle({
speed: 600, //temps d'animation
timeout: 0, //fréquence
fx: 'scrollLeft',
//compteur//
pager: "#nav",
after: function(currSlideElement, nextSlideElement, options, forwardFlag) {
$('#counter').text((options.currSlide + 1) + ' / ' + (options.slideCount));
slideIndex = options.currSlide;
nextIndex = slideIndex + 1;
prevIndex = slideIndex - 1;
if (slideIndex == options.slideCount - 1) {
nextIndex = 0;
var random_next_url_enfant = $("#random_next_url_enfant").val();
$('#next').on("click", function(e){
e.preventDefault();
window.location = random_next_url_enfant;
});
}
if (slideIndex === 0) {
prevIndex = options.slideCount - 1;
}
}
});
$('#next').click(function() {
$('#slider_projets').cycle(nextIndex, "scrollLeft");
});
here is a jsfiddle : http://jsfiddle.net/GahHQ/
hope you can help me,
thanks a lot

Categories