We Keep Coding

How to set top:0(offset:0) when image come in window viewport?

I want to set top:0(offset:0) when image come in viewport on single scroll (like on every single scroll next image set to top 0 of image position or offset 0 of image) after completing scrolling all image, continue scrolling the page. Any one have any idea, JavaScript code for this?
Here is link for try out JsFiddle
<div class="main-div">
<div class="sticky-div">
<img src="https://images.unsplash.com/photo-1601140958046-ce3c75269438?ixlib=rb-
1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2134&q=80" />
</div>
<div class="sticky-div">
<img src="https://images.unsplash.com/photo-1559642147-97be7782c7b3?ixlib=rb-
1.2.1&auto=format&fit=crop&w=700&q=80">
</div>
<div class="sticky-div">
<img src="https://images.unsplash.com/photo-1527435292159-ba44021581fa?ixlib=rb-
1.2.1&auto=format&fit=crop&w=634&q=80">
</div>
</div>
.main-div {
box-sizing: border-box;
}
.sticky-div {
position: sticky;
top:0;
height:100vh;
}
if($(window).width() >= 1024){
(function($) {
var selector = ".home-product-slider .product-item";
var $slides = $(selector);
var currentSlide = 0;
var isAnimating = false;
var stopAnimation = function() {
setTimeout(function() {
isAnimating = false;
}, );
};
var bottomIsReached = function($elem) {
var rect = $elem[0].getBoundingClientRect();
return rect.bottom <= $(window).height();
};
var topIsReached = function($elem) {
var rect = $elem[0].getBoundingClientRect();
return rect.top >= 0;
};
document.addEventListener(
"wheel",
function(event) {
var $currentSlide = $($slides[currentSlide]);
if (isAnimating) {
event.preventDefault();
return;
}
var direction = -event.deltaY;
if (direction < 0) {
// next
if (currentSlide + 1 >= $slides.length) return;
if (!bottomIsReached($currentSlide)) return;
event.preventDefault();
currentSlide++;
var $slide = $($slides[currentSlide]);
var offsetTop = $slide.offset().top;
isAnimating = false;
$("html, body").animate(
{
scrollTop: offsetTop,
behavior: 'smooth'
},
stopAnimation
);
} else {
// back
if (currentSlide - 1 < 0) return;
if (!topIsReached($currentSlide)) return;
event.preventDefault();
currentSlide--;
var $slide = $($slides[currentSlide]);
var offsetTop = $slide.offset().top;
isAnimating = false;
$("html, body").animate(
{
// scrollTop: offsetTop
},
stopAnimation
);
}
{ passive: false }
},
);
})(jQuery);
//home page slider script end here
}

You're looking for scroll snapping. On the container that controls the scrolling set the scroll-snap-type: y mandatory rule. Here you say that there should be snapped in the y axis and that the snap should be honored without exceptions.
On the elements that you want snapped, use the scroll-snap-align property. Set this to start indicating that the start of the element that scrolls into view should fall on the snap grid.
Do beware, the combination of position: sticky and scroll snapping could lead to buggy behavior on Safari iOS. source
html,
body {
margin: 0;
overflow: hidden;
}
.main-div {
box-sizing: border-box;
width: 1000px;
height: 100vh;
max-width: 100%;
overflow-y: auto;
scroll-snap-type: y mandatory;
}
.sticky-div {
position: sticky;
top: 0px;
width: 100%;
max-height: 100%;
height: 750px;
scroll-snap-align: start;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="main-div">
<div class="sticky-div">
<img src="https://images.unsplash.com/photo-1601140958046-ce3c75269438?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2134&q=80" />
</div>
<div class="sticky-div">
<img src="https://images.unsplash.com/photo-1559642147-97be7782c7b3?ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=80">
</div>
<div class="sticky-div">
<img src="https://images.unsplash.com/photo-1527435292159-ba44021581fa?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
</div>
<div class="sticky-div">
<img src="https://images.unsplash.com/photo-1601140958046-ce3c75269438?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2134&q=80" />
</div>
<div class="sticky-div">
<img src="https://images.unsplash.com/photo-1559642147-97be7782c7b3?ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=80">
</div>
<div class="sticky-div">
<img src="https://images.unsplash.com/photo-1527435292159-ba44021581fa?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
</div>
</div>

setInterval issue in custom jquery image slider with both auto slide and buttons

I am creating a custom image slider with custom slide effect in jQuery which has both next & previous buttons and also slides automatically with 5 seconds timeout. Although it works nicely in a quick look but sometimes( I dont know exactly when, maybe when I press the buttons or if I leave it open for some time and minimize the window) the iterval bugs and the slides change after 1 second or less. Also when i press the button i tell it to 1) clear iterval 2) change slide 3) set interval again which means that after i change a slide with the button the timer is set to 5 seconds from the start but this is not happening all the times.Here is the code.
$(document).ready(function() {
'use strict';
var $carousel = $('.carousel');
var $nextBtn = $('#next');
var $prevBtn = $('#prev');
var animationSpeed = 1000;
var pause = 5000;
var interval;
function nextSlide() {
$('.carousel__list').animate({
left: '-200%'
}, 500, function() {
$('.carousel__list').css('left', '-100%');
$('.carousel__item').last().after($('.carousel__item').first());
});
}
function prevSlide() {
$('.carousel__list').animate({
left: '0%'
}, 400, function() {
$('.carousel__list').css('left', '-100%');
$('.carousel__item').first().before($('.carousel__item').last());
});
}
function startSlider() {
interval = setInterval(function() {
nextSlide();
}, pause);
}
function stopSlider() {
clearInterval(interval);
}
$carousel.on('mouseenter', stopSlider).on('mouseleave', startSlider);
startSlider();
$nextBtn.on('click', function() {
stopSlider();
nextSlide();
startSlider();
});
$prevBtn.on('click', function() {
stopSlider();
prevSlide();
startSlider();
});
});
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.carousel {
width: 100%;
height: 65vh;
overflow: hidden;
position: relative;
}
.carousel__list {
width: 400%;
height: 100%;
left: -100%;
position: relative;
list-style: none;
}
.carousel__item {
width: calc(100% / 4);
height: 100%;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="carousel">
<ul class="carousel__list">
<li class="carousel__item" style="background-color: red"></li>
<li class="carousel__item" style="background-color: green"></li>
<li class="carousel__item" style="background-color: blue"></li>
<li class="carousel__item" style="background-color: yellow"></li>
</ul>
</section>
<button id="prev">PREVIOUS</button>
<button id="next">NEXT</button>
And here is a codepen: https://codepen.io/anon/pen/erpyJj

You are creating more intervals than you think and you don't actually clear each one because you overwrite the interval variable and then you don't a have a reference to the previous intervals, which may still be active.
What you could do is put every interval you create in an array, then when you need to stop all intervals, iterate through that array, clear each interval and empty the array.
// ...
var intervals = [];
// ...
function stopSlider() {
console.log("stopSlider() intervals (Before clear): ", intervals);
intervals.forEach(function(interval) {
clearInterval(interval); // stop one interval
});
intervals = []; // clear the array
console.log("stopSlider() intervals (After clear): ", intervals);
}
Here is your demo with many console logs. You can see that it doesn't matter how much you click on any button, the slider only automatically slides every 5 s.
$(document).ready(function() {
"use strict";
//cache dom elements
var $carousel = $(".carousel");
var $nextBtn = $("#next");
var $prevBtn = $("#prev");
var animationSpeed = 1000;
var pause = 5000;
var intervals = [];
function nextSlide() {
console.log("nextSlide() intervals: ", intervals);
$(".carousel__list").animate({
left: "-200%"
}, 500, function() {
$(".carousel__list").css("left", "-100%");
$(".carousel__item")
.last()
.after($(".carousel__item").first());
});
}
function prevSlide() {
console.log("prevSlide() intervals: ", intervals);
$(".carousel__list").animate({
left: "0%"
}, 400, function() {
$(".carousel__list").css("left", "-100%");
$(".carousel__item")
.first()
.before($(".carousel__item").last());
});
}
function startSlider() {
console.log("startSlider() interval (BEFORE): ", intervals);
var interval = setInterval(function() {
nextSlide();
}, pause);
intervals.push(interval);
console.log("startSlider() interval (AFTER): ", intervals);
}
function stopSlider() {
console.log("stopSlider() intervals (Before clear): ", intervals);
intervals.forEach(function(interval) {
clearInterval(interval); // stop one interval
});
intervals = []; // clear the array
console.log("stopSlider() intervals (After clear): ", intervals);
}
$carousel.on("mouseenter", stopSlider).on("mouseleave", startSlider);
startSlider();
$nextBtn.on("click", function() {
stopSlider();
nextSlide();
startSlider();
});
$prevBtn.on("click", function() {
stopSlider();
prevSlide();
startSlider();
});
});
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.carousel {
width: 100%;
height: 20vh;
overflow: hidden;
position: relative;
}
.carousel__list {
width: 400%;
height: 100%;
left: -100%;
position: relative;
list-style: none;
}
.carousel__item {
width: calc(100% / 4);
height: 100%;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="carousel">
<ul class="carousel__list">
<li class="carousel__item" style="background-color: red"></li>
<li class="carousel__item" style="background-color: green"></li>
<li class="carousel__item" style="background-color: blue"></li>
<li class="carousel__item" style="background-color: yellow"></li>
</ul>
</section>
<button id="prev">PREVIOUS</button>
<button id="next">NEXT</button>

image carousel won't infinitely loop in reverse

I am creating an HTML5 image carousel with three images. The transitions are done with TweenMax and TimeLine. I have two click events, one for next image and one for previous image, the next image function runs properly and is an infinite loop but the previous function stops after it goes through the images once. here is the code.
HTML:
<div id="expanded-state">
<div id="expanded-exit"></div>
<div id="close-btn"></div>
<button id="arrow-prev"></button>
<button id="arrow-next"></button>
<div id="theater">
<div class="theater"></div>
<div class="theater"></div>
<div class="theater"></div>
</div>
<div id="cta"></div>
<div id="footer"></div>
</div>
</div>
CSS:
.theater {
width: 970px;
height: 345px;
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
.theater:nth-child(1){
background: url(theater-01.jpg);
}
.theater:nth-child(2){
background: url(theater-02.jpg);
}
.theater:nth-child(3){
background: url(theater-03.jpg);
}
JS:
var $slides = $(".theater");
var currentSlide = 0;
function addListeners() {
arrowPrev.addEventListener('click', theaterScrollPrev);
arrowNext.addEventListener('click', theaterScrollNext);
}
function theaterScrollNext() {
tm.to( $slides.eq(currentSlide), 0.5, {left:"-970px"} );
if (currentSlide < $slides.length - 1) {
currentSlide++;
}
else {
currentSlide = 0;
}
tm.fromTo( $slides.eq(currentSlide), 0.5, {left: "970px"}, {left:"0px"} );
}
function theaterScrollPrev() {
tm.to( $slides.eq(currentSlide), 0.5, {left:"970px"} );
if (currentSlide < $slides.length - 1) {
currentSlide--;
}
else {
currentSlide = 0;
}
tm.fromTo( $slides.eq(currentSlide), 0.5, {left: "-970px"}, {left:"0px"});
}

I believe this should fix it but tell me if it does not
function theaterScrollPrev() {
console.log('previous clicked')
tm.to( $slides.eq(currentSlide), 0.5, {left:"970px"} );
if (currentSlide <= 0) {
currentSlide = $slides.length -1;
} else {
currentSlide--;
}
tm.fromTo( $slides.eq(currentSlide), 0.5, {left: "-970px"}, {left:"0px"} );
}
Codepen Fixed

Add pause function to slider

I have a very nice slider script here and already figured out to get bullets underneath it, but i just want to know.. is it possible to add some simple lines to it so that the image is pausing/on hold while on mouse over?
Here is my code now:
jQuery
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$("#slideshow div:gt(0)").hide();
var index;
index = 0;
var totalslides;
totalslides = 2;
var nextSlide = function () {
$('#slideshow div').eq(index).fadeOut(1000);
$('#nav' + index).toggleClass('navselected');
index++;
if (index > totalslides - 1) { index = 0; }
$('#slideshow div').eq(index).fadeIn(3000);
$('#nav' + index).toggleClass('navselected');
}
var nextSlideTimer = setInterval(nextSlide, 7000);
function nav(selectedSlide) {
clearInterval(nextSlideTimer);
$('#slideshow div').eq(index).fadeOut(1000);
$('#nav' + index).toggleClass('navselected');
index = selectedSlide;
$('#slideshow div').eq(index).fadeIn(1000);
$('#nav' + index).toggleClass('navselected');
nextSlideTimer = setInterval(nextSlide, 4000);
}
$("#nav0").click(function () { nav(0); });
$("#nav1").click(function () { nav(1); });
});
</script>
CSS
<style>
#slideshow { position: relative; width: 960px; height: 300px; padding: 10px; box-shadow: 0 0 20px rgba(0,0,0,0.4);}
#slideshow div { position: absolute; top: 10px ; left: 10px; right: 10px; bottom: 10px; }
#slideshow a {display: block;width:960px;height:300px; }
#slideshow a:hover{background-position: center bottom;}
#slideshownav a.navselected{color:#eb910c;}
#slideshownav {text-align:center; padding-top:8px;padding-bottom:20px;}
#slideshownav a {padding-right:10px;color:#748090;font-size:50px; text-decoration: none; }
#slideshownav a:hover {cursor:pointer;}
</style>
HTML
<div id="slideshow">
<div>IMAGE 1</div>
<div>IMAGE 2</div>
</div>
<div id="slideshownav">
<a id="nav0" class="navselected">°</a>
<a id="nav1">°</a>
</div>

You can use mouseover and mouseout:
$('#slideshow').mouseover(function () {
// Clear the interval.
clearInterval(nextSlideTimer);
}).mouseout(function () {
// Start it nextSlide again.
nextSlideTimer = setInterval(nextSlide, 3000);
});
Or better, you can use mouseenter and mouseleave (see jQuery docs for demo):
$('#slideshow').mouseenter(function () {
// Clear the interval.
clearInterval(nextSlideTimer);
}).mouseleave(function () {
// Start it nextSlide again.
nextSlideTimer = setInterval(nextSlide, 3000);
});
The second approach is better because, it doesn't fire much events when you are moving around the inner elements of the parent slider.

Add this inside of the document ready function, near the bottom:
$('#slideshow').on('mouseover mouseleave', function( event ) {
if ( event.type === 'mouseover') {
// stop slideshow timer
clearInterval(nextSlideTimer);
} else {
// add a shorter time delay
nextSlideTimer = setInterval(nextSlide, 4000);
}
});

jQuery: animated slider pager

I've set up an animated slider using jQuery:
jsFiddle demo: http://jsfiddle.net/neal_fletcher/9zRDV/
The reason being I wanted to achieve a slight overhang on the slides, i.e. while viewing slide 1 you can see some of slide 2 etc. The slider works great, perfect in fact for what I'm after, now though I'm trying to figure out if it's possible to set up a pager for this slider, the aim of which being to click on a .slide-menu-item and the slider will slide to the relevant slide, if at all possible?
One other slight problem too, is it possible to animate the slider on load? Thus, the pager will slide every 5 seconds, but you can still navigate the slider using the pager / next and previous buttons?
Any suggestions would be greatly appreciated!
HTML:
<div class="outerwrapper">
<div class="innerwrapper">
<div class="inner-slide">SLIDE 01</div>
<div class="inner-slide">SLIDE 02</div>
<div class="inner-slide">SLIDE 03</div>
<div class="inner-slide">SLIDE 04</div>
<div class="inner-slide">SLIDE 05</div>
<div class="inner-slide">SLIDE 06</div>
<div class="inner-slide">SLIDE 07</div>
</div>
</div>
<ul id="slide-menu">
<li id="one" class="slide-menu-item">01</li>
<li id="two" class="slide-menu-item">02</li>
<li id="three" class="slide-menu-item">03</li>
<li id="four" class="slide-menu-item">04</li>
<li id="five" class="slide-menu-item">05</li>
<li id="six" class="slide-menu-item">06</li>
<li id="seven" class="slide-menu-item">07</li>
</ul>
<div id="left">LEFT</div>
<div id="right">RIGHT</div>
CSS:
.outerwrapper {
position: absolute;
left: 50%;
height: 250px;
width: 400px; margin-left: -225px;
border: 1px solid black;
overflow: hidden;
padding-left: 50px;
}
.innerwrapper {
height: 250px;
width: 4000px;
}
.inner-slide {
height: 250px;
width: 350px;
float: left;
background: silver;
}
.innerwrapper div:nth-child(odd) {
background: silver;
}
.innerwrapper div:nth-child(even) {
background: red;
}
#left, #right {
position: absolute;
cursor: pointer;
}
#left {
left: 10px; bottom: 10px;
}
#right {
right: 10px; bottom: 10px;
}
#slide-menu {
position: absolute;
top: 250px;
list-style: none;
}
.slide-menu-item {
display: inline-block;
width: 50px;
cursor: pointer;
}
jQuery:
var animating = false,
slideWidth = $('.inner-slide').width(),
$wrapper = $('.outerwrapper'),
slideIndex = 2,
slideLen = $('.inner-slide').length,
build = function() {
$firstClone = $('.inner-slide').eq(0).clone();
$secondClone = $('.inner-slide').eq(1).clone();
$preLastClone = $('.inner-slide').eq(slideLen - 2).clone();
$lastClone = $('.inner-slide').eq(slideLen - 1).clone();
$wrapper.find('.innerwrapper').append($firstClone, $secondClone).prepend($preLastClone, $lastClone);
$wrapper.animate({
scrollLeft: '+=' + slideWidth * slideIndex + 'px'
}, 0);
},
slide = function(dir, speed) {
if(!animating) {
animating = true;
dir == 'right' ? slideIndex++ : slideIndex--;
slideIndex == slideLen - 1 ? slideIndex == 0 : '';
if(slideIndex == 0 && dir == 'left') {
//if the slide is at the beginning and going left
slideIndex = slideLen + 1;
$wrapper.animate({
scrollLeft: slideIndex * slideWidth + 'px'
}, 0, function() {
animating = false;
});
slideIndex--;
} else if(slideIndex == slideLen + 2 && dir == 'right') {
//if the slide is at the end and going right
slideIndex = 1;
$wrapper.animate({
scrollLeft: slideIndex * slideWidth + 'px'
}, 0, function() {
animating = false;
});
slideIndex++;
}
$wrapper.animate({
scrollLeft: slideIndex * slideWidth + 'px'
}, speed, function() {
animating = false;
});
}
};
$(function() {
build();
$('#right, #left').on('click', function() {
slide($(this).attr('id'), 600)
});
});

Add the slideTo function:
slideTo = function (index, speed) {
slideIndex = index+1;
$wrapper.animate(
{scrollLeft: slideIndex * slideWidth + 'px'},
speed, function () {animating = false;}
);
}
Then call it when you click one of the page buttons:
$('.slide-menu-item').click(function() {
var toSlideIndex = Math.round($(this).text());
slideTo(toSlideIndex, 600);
});
And then, to make it slide automatically every 5 seconds, add this:
setInterval(function() {slide("right", 600);}, 5000);
JSFiddle demo: http://jsfiddle.net/9zRDV/3/

for example ?
$('#yourFavouriteIdForButtonThree').click(function(){
slide('three', 600)
});