We Keep Coding

Center horizontally child elements if their parent's width is 300% but each child's width 100%

I have a dynamic slider with two buttons left and right.
that means for each slide, the slide parent width increases by 100%. 2 slides * 100% = 200%. In example class="slider"; width:'200%'
I want to center each slide's text in the middle of the page. But i want the text to slide not in just slides container, but in its parent-parent width (class='carousel' in example).
Code below, is example how the slider is looking right now.
JavaScript, you should ignore this. Implemented it, for the code to work.
document.addEventListener('DOMContentLoaded', function() { //Display function after HTML is loaded
const left = document.querySelector('.left');
const right = document.querySelector('.right');
var slider = document.getElementById('slider');
var leftImg = document.getElementById('left');
var rightImg = document.getElementById('right');
var sections = document.querySelectorAll('.slide').length; // get number of slides
var sectionIndex = 1;
slider.style.width = ' ' + 100 * sections + '%';
function changeOpacity() {
if (sectionIndex == 1) {
leftImg.style.opacity = '0.4';
} else {
leftImg.style.opacity = '1';
}
if (sectionIndex == sections) {
rightImg.style.opacity = '0.4';
} else {
rightImg.style.opacity = '1';
}
}
left.addEventListener('click', function() {
var leftImg = document.getElementById('left');
sectionIndex = (sectionIndex > 1) ? sectionIndex - 1 : 1;
slider.style.transform = 'translate(' + (sectionIndex - 1) * (-100 / sections) + '%)';
changeOpacity();
});
right.addEventListener('click', function() {
sectionIndex = (sectionIndex < sections) ? sectionIndex + 1 : sections;
slider.style.transform = 'translate(' + (sectionIndex - 1) * (-100 / sections) + '%)';
changeOpacity();
});
})
.slider-container {
padding: 25px 0px;
width: 40%;
margin: auto;
}
.slider-container .carousel {
overflow: hidden;
height: 260px;
width: 100%;
border:solid 2px black;
position:relative;
}
.slider-container .slider {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100%;
-webkit-transition: .5s;
transition: .5s;
}
.slider-container .slider .slide {
width: 100%;
}
.slider-container .arrow-container {
width: 70px;
position: absolute;
bottom: 0;
}
<div class="slider-container mobile-container text-left">
<div class="carousel relative">
<div id="slider" class="slider">
<div class="slide">
<div class="author d-flex flex-column">
<h3>Ken Ludden</h3>
<span class="regularText">Director, Margot Fonteyn Academy of Ballet</span>
</div>
</div>
<div class="slide">
<div class="author d-flex flex-column">
<h3>Ken Ludden</h3>
<span class="regularText">Director, Margot Fonteyn Academy of Ballet</span>
</div>
</div>
</div>
</div>
<div class="controls">
<div class="arrow-container d-flex justify-content-between ">
<div>
<button class="left" id="left" style="opacity: 0.4;">Left </button>
</div>
<div>
<button class="right" id="right">Right</button>
</div>
</div>
</div>
</div>
</div>
The Snippet below is what i want. But i should be centered, and i don't know how.
I have tried using fl
document.addEventListener('DOMContentLoaded', function() { //Display function after HTML is loaded
const left = document.querySelector('.left');
const right = document.querySelector('.right');
var slider = document.getElementById('slider');
var leftImg = document.getElementById('left');
var rightImg = document.getElementById('right');
var sections = document.querySelectorAll('.slide').length; // get number of slides
var sectionIndex = 1;
slider.style.width = ' ' + 100 * sections + '%';
function changeOpacity() {
if (sectionIndex == 1) {
leftImg.style.opacity = '0.4';
} else {
leftImg.style.opacity = '1';
}
if (sectionIndex == sections) {
rightImg.style.opacity = '0.4';
} else {
rightImg.style.opacity = '1';
}
}
left.addEventListener('click', function() {
var leftImg = document.getElementById('left');
sectionIndex = (sectionIndex > 1) ? sectionIndex - 1 : 1;
slider.style.transform = 'translate(' + (sectionIndex - 1) * (-100 / sections) + '%)';
changeOpacity();
});
right.addEventListener('click', function() {
sectionIndex = (sectionIndex < sections) ? sectionIndex + 1 : sections;
slider.style.transform = 'translate(' + (sectionIndex - 1) * (-100 / sections) + '%)';
changeOpacity();
});
})
.slider-container {
margin: auto;
padding: 25px 0px;
}
.slider-container .carousel {
overflow: hidden;
height: 260px;
width: 80%; /* the width i want */
border: solid 2px black; /* the border for your understading */
position: relative;
}
.slider-container .slider {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100%;
-webkit-transition: .5s;
transition: .5s;
}
.slider-container .slider .slide {
width: 100%;
}
.slider-container .comment {
max-width: 352px;
padding: 30px 0px;
}
.slider-container .arrow-container {
width: 70px;
position: absolute;
bottom: 0;
}
<div class="slider-container mobile-container text-left">
<div class="carousel relative">
<div id="slider" class="slider">
<div class="slide">
<div class="author d-flex flex-column">
<h3>Ken Ludden</h3>
<span class="regularText">Director, Margot Fonteyn Academy of Ballet</span>
</div>
</div>
<div class="slide">
<div class="author d-flex flex-column">
<h3>Ken Ludden</h3>
<span class="regularText">Director, Margot Fonteyn Academy of Ballet</span>
</div>
</div>
</div>
<div class="controls">
<div class="arrow-container d-flex justify-content-between ">
<div>
<button class="left" id="left" style="opacity: 0.4;">Left </button>
</div>
<div>
<button class="right" id="right">Right</button>
</div>
</div>
</div>
</div>
</div>
</div>
You can see in this snippet that text is sliding from a lot further right than the previous example.
I need to center the slide, because i want the same for left side.
I have tried using flex-column, align-items:center on class="slide". And it works fine, but the class="controls" aren't centering because they are position:absolute and i tried to putting them elsewhere, but it didnt work..
I really hope you guys did understand what i want and really hope that i recieve atleast some suggestions. This is my 1st question, sorry for long code.
Thank you anyway :)

Your carousel is 80% of the width, so if you want that to be centered, you can do: margin: 0 auto on the carousel class.

set div height to an image height with javascript

I have an image gallery with a main image and some thumbnail images on the right side of the main image.
I want to set the height of the thumbnails div the same as the main image. The problem is, this image is always different so it doesn't have a static height. Tried to use javascript to get it's height then give it to the thumbnails div, but it doesn't do anything.
<div class="gallery">
<a href="images/1.jpg">
<div class="main-image">
<img class="card-img-top" id="modal-img-top" src="images/1.jpg" alt="Fő kép">
</div>
<div class="image-container" id="image-thumbnails">
<img src="images/1.jpg" alt="Egy kép a hirdetésről">
<img src="images/motor.jpg" alt="Egy kép a hirdetésről">
<img src="images/motor2.jpg" alt="Egy kép a hirdetésről">
<img src="images/2.jpg" alt="Egy kép a hirdetésről">
<img src="images/1.jpg" alt="Egy kép a hirdetésről">
<img src="images/motor.jpg" alt="Egy kép a hirdetésről">
<img src="images/motor2.jpg" alt="Egy kép a hirdetésről">
<img src="images/2.jpg" alt="Egy kép a hirdetésről">
</div>
</a>
</div>
<script type="text/javascript">
const img = new Image();
img.onload = function() {
alert(this.width + 'x' + this.height);
document.getElementById("image-thumbnails").style.height = this.height;
}
img.src = document.getElementById("modal-img-top").getElementsByTagName('img');
</script>

Edit: Ok let's have another try.
The main issue is to size your main image which should stay in its ratio and be wrapped in its parent. After trial and error there seems to be no easy method to archive this. I also tried object-fit property, but event this is not working as you want to. So here are my two solutions.
Solution 1:
The most easy way is to use a div with the background-image property instead of an img. As you see in the solution below, the main-image is a div now. You could also use the element .image-wrapper as the background image. But I wrapped a main-image into it to get some padding between these two elements.
Solution 2: Instead of using the background-image property you can still use a img, but you'll need some javascript and calculations. The calculation is done by the function calculateMainImage. It is not too complex, but it needs some lines. The strategy is this:
Get the dimensions of the main image and its parent element
Assume that the image fits into its parent (in css: width: 100%). So calculate the image dimensions for this assumption.
If the calculated height is greater than the height of the parent, the image won't fit into the parent. So now set the image's height to the height of its parent and recalculate the width.
This function is also called when the document is ready (initialization) and when the window resizes (window.onresize).
let mainImage = document.querySelector('.main-image');
let thumbnails = document.querySelectorAll('.thumbnail');
thumbnails.forEach(thumbnail => {
thumbnail.addEventListener('click', () => {
let backgroundImage = 'url(' + thumbnail.src +')';
mainImage.style.backgroundImage = backgroundImage;
});
});
.gallery{
position: relative;
width: 100%;
height: 400px;
background: #dedede;
display: grid;
grid-template-columns: 70% 30%;
}
.image-wrapper{
position: relative;
width: 100%;
height: 100%;
background: #aaa;
padding: 12px;
box-sizing: border-box;
}
.main-image{
position: relative;
width: 100%;
height: 100%;
background-image: url("https://via.placeholder.com/350x150");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.thumbnail-wrapper{
position: relative;
width: 100%;
height: 100%;
overflow-y: auto;
padding: 12px;
box-sizing: border-box;
}
.thumbnail-wrapper > .thumbnail:not(:last-child){
margin-bottom: 12px;
}
.thumbnail{
position: relative;
display: block;
width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
cursor: pointer;
}
<section class="gallery">
<!-- Main image -->
<div class="image-wrapper">
<div class="main-image">
</div>
</div>
<!-- Thumbnails -->
<div class="thumbnail-wrapper">
<img class="thumbnail" src="https://via.placeholder.com/350x150">
<img class="thumbnail" src="https://via.placeholder.com/200x100">
<img class="thumbnail" src="https://via.placeholder.com/140x100">
<img class="thumbnail" src="https://via.placeholder.com/350x65">
<img class="thumbnail" src="https://via.placeholder.com/350x150">
<img class="thumbnail" src="https://via.placeholder.com/200x100">
<img class="thumbnail" src="https://via.placeholder.com/140x100">
</div>
</section>
let gallery = document.querySelector('.gallery');
let container = document.querySelector('.container');
let mainImage = document.querySelector('.main-image');
let thumbnails = document.querySelectorAll('.thumbnail');
(function(){
// Document ready
calculateMainImage();
// When window resizes
window.addEventListener('resize', () => {
calculateMainImage();
});
})();
thumbnails.forEach(thumbnail => {
thumbnail.addEventListener('click', () => {
mainImage.src = thumbnail.src;
// Fit image to container
calculateMainImage();
});
});
function calculateMainImage(){
// Reset current dimensions
mainImage.style.width = 'initial';
mainImage.style.height = 'initial';
// Container dimensions
let containerWidth = container.getBoundingClientRect().width;
let containerHeight = container.getBoundingClientRect().height;
// Image dimensions
let width = mainImage.getBoundingClientRect().width;
let height = mainImage.getBoundingClientRect().height;
let ratio = width / height;
// Calculate image dimensions when width: 100%
let maxWidth = containerWidth;
let maxHeight = maxWidth / ratio;
// Check if image fits in parent
if(maxHeight > containerHeight){
// Scale image down. Recalculate image's width
let newHeight = containerHeight;
let newWidth = newHeight * ratio;
setMainImageSize(newWidth, newHeight);
}else{
setMainImageSize(maxWidth, maxHeight);
}
}
function setMainImageSize(width, height){
mainImage.style.width = width + 'px';
mainImage.style.height = height + 'px';
}
.gallery{
position: relative;
width: 100%;
height: 400px;
background: #dedede;
display: grid;
grid-template-columns: 70% 30%;
}
.image-wrapper{
position: relative;
width: 100%;
height: 100%;
background: #aaa;
padding: 12px;
box-sizing: border-box;
}
.container{
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.main-image{
position: relative;
flex-grow: 0;
flex-shrink: 0;
}
.thumbnail-wrapper{
position: relative;
width: 100%;
height: 100%;
overflow-y: auto;
padding: 12px;
box-sizing: border-box;
}
.thumbnail-wrapper > .thumbnail:not(:last-child){
margin-bottom: 12px;
}
.thumbnail{
position: relative;
display: block;
width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
cursor: pointer;
}
<section class="gallery">
<!-- Main image -->
<div class="image-wrapper">
<div class="container">
<img class="main-image" src="https://via.placeholder.com/200x100">
</div>
</div>
<!-- Thumbnails -->
<div class="thumbnail-wrapper">
<img class="thumbnail" src="https://via.placeholder.com/350x150">
<img class="thumbnail" src="https://via.placeholder.com/200x100">
<img class="thumbnail" src="https://via.placeholder.com/140x100">
<img class="thumbnail" src="https://via.placeholder.com/350x65">
<img class="thumbnail" src="https://via.placeholder.com/350x150">
</div>
</section>
Update
When you have several gallerys on your page and use use solution #1, then you need to add this JS snipped.
let gallerys = document.querySelectorAll('.gallery');
gallerys.forEach(gallery => {
updateGalleryPictures(gallery)
});
function updateGalleryPictures(gallery) {
// Get gallery's main image
let mainImage = gallery.querySelector('.main-image');
if (mainImage === null) return;
// Get gallery's thumbnail images
let thumbnails = gallery.querySelectorAll('.thumbnail');
// Change the background-image property on click
thumbnails.forEach(thumbnail => {
thumbnail.addEventListener('click', () => {
let backgroundImage = 'url(' + thumbnail.src + ')';
mainImage.style.backgroundImage = backgroundImage;
});
});
// Initialize background-image property using the 1st thumbnail image
let firstThumbnail = thumbnails[0];
if (firstThumbnail === null || firstThumbnail === undefined) return;
let initialBackgroundImage = 'url(' + firstThumbnail.src + ')';
mainImage.style.backgroundImage = initialBackgroundImage;
}
Update 2: Usage of baguetteBox
Step 1: Add the property overflow: hidden; to the class .image-wrapper and create a new class
.baguettebox-image{
opacity: 0 !important;
}
Step 2: Change the structure of the main-image setup.
<div class="image-wrapper">
<div class="main-image"> <!-- THis is the baguette box -->
<a class="baguettebox-link" href="">
<img class="baguettebox-image" src=""></a>
</a>
</div>
</div>
Step 3: Change the JS snipped of the 1st update to:
Note that the baguette boxes are also initialized in this script. According to the documentation querySelectorAll is used, so all boxes (.main-image) should be initialized.
let gallerys = document.querySelectorAll('.gallery');
gallerys.forEach(gallery => {
updateGalleryPictures(gallery);
});
// Initialize all baguette boxes
baguetteBox.run('.main-image');
function updateGalleryPictures(gallery) {
// Get gallery's thumbnail images
let thumbnails = gallery.querySelectorAll('.thumbnail');
// Change the background-image property on click
thumbnails.forEach(thumbnail => {
thumbnail.addEventListener('click', () => {
updateMainImage(gallery, thumbnail.src)
});
});
// Initialize background-image property using the 1st thumbnail image
let firstThumbnail = thumbnails[0];
if (firstThumbnail === null || firstThumbnail === undefined) return;
updateMainImage(gallery, firstThumbnail.src)
// Initialize baguette
}
function updateMainImage(gallery, src) {
// Get main image and check if it exists
let mainImage = gallery.querySelector('.main-image');
if (mainImage === null) return;
mainImage.style.backgroundImage = 'url(' + src + ')';
// Get baguette elements
let boxLink = gallery.querySelector('.baguettebox-link');
let boxImage = gallery.querySelector('.baguettebox-image');
// Update baguette elements href and src
if (boxLink !== null && boxLink !== undefined) boxLink.href = src;
if (boxImage !== null && boxImage !== undefined) boxImage.src = src;
}

document.getElementById("image-thumbnails").style.height = '300px';

Avoid slideshow div resizing according to displayed image?

I did a slideshow with fade animation of images in a div. However, when the next image shows, the div gets smaller/bigger according to the image and the page auto-scrolls, and I do not want that. How can I avoid this?
I wrote a function that once the page loads, it finds the biggest image, and sets the div to have that height of that image so that whenever a new image shows, the div height does not change. However, the problem is when the browser gets smaller/larger, the value of the div's height does not change even though I am resitting it every time the browser changes the size using on resize listener ("biggestImage" variable).
JQuery
var slideIndex = 0;
showSlides();
divResizeIssue();
function showSlides() {
var slides = $(".images");
slides.each(function(){
$(this).fadeOut(500).delay(490);
});
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1;
}
slides.each(function(index){
if(index == slideIndex-1){
$(this).fadeIn(500).delay(490);
}
});
setTimeout(showSlides, 5000);
}
function divResizeIssue(){
var biggestImage;
var object;
var slides = $(".images");
var firstLoad = true;
if(firstLoad){
slides.each(function(index){
if(index == 0 || $(this).outerHeight() > biggestImage){
biggestImage = $(this).outerHeight();
object = $(this)[0]
}
});
slides.each(function(){
if($(this)[0] != object){
$(this).outerHeight(biggestImage);
}
});
firstLoad = false;
}
$(window).on('resize', function(){
biggestImage = 0;
object = null;
slides.each(function(index){
if(index == 0 || $(this).outerHeight() > biggestImage){
biggestImage = $(this).outerHeight();
object = $(this)[0];
}
});
slides.each(function(){
if($(this)[0] != object){
$(this).outerHeight(biggestImage);
}
});
});
}
HTML
<div id="top-div" class="row">
<div class="row">
<h1 class="col-sm-12">Activities</h1>
<span class="col-sm-2"><!-- <button class="leftButton"></button> --></span>
<div class="col-sm-12 col-lg-8">
<figure class="images">
<figcaption class="caption">Outdoor</figcaption>
<img class="img-fluid" id="Outdoor" src=".\src\Hiking.jpg">
</figure>
<figure class="images">
<figcaption class="caption">Indoor</figcaption>
<img class="img-fluid" id = "Indoor" src=".\src\indoor.jpg">
</figure>
<figure class="images">
<figcaption class="caption">Join Us!</figcaption>
<img class="img-fluid" id = "Member" src=".\src\member.png">
</figure>
</div>
<span class="col-sm-2"><!-- <button class="rightButton"> --></button></span>
</div>
</div>
CSS
#top-div {
width: 100%;
margin-top:90vh;
background: #AB3F05;
text-align: center;
height: auto;
}
figure img{
padding-left: 5vh;
padding-right: 5vh;
padding-top: 0;
padding-bottom: 0;
margin: 0;
}
.images{
position: relative;
}
If you have some better suggestion, please do suggest, or if you can tell me what's wrong with my code, that would be great.

Generally speaking, when doing slide shows it's much easier and looks nicer when you just manually resize the images to the same resolution using gimp or photoshop.
However if for whatever reason you can't do that you can use percentages in CSS to create dynamic lengths.
Here's what I came up with
//changed '.images' to '.image-container' also removed the divResizeIssue //function because we don't need it
var slideIndex = 0;
showSlides();
function showSlides() {
var slides = $(".image-container"); //here
slides.each(function(){
$(this).fadeOut(500).delay(490);
});
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1;
}
slides.each(function(index){
if(index == slideIndex-1){
$(this).fadeIn(500).delay(490);
}
});
setTimeout(showSlides, 5000);
}
CSS
#top-div {
width: 100%;
margin-top:90vh;
background: #AB3F05;
text-align: center;
height: auto;
}
figure img{
padding-left: 5vh;
padding-right: 5vh;
padding-top: 0;
padding-bottom: 0;
margin: 0;
}
/*Changed Below*/
.image-container {
width: 50%;
margin: 0 auto;
}
.image {
width: 100%;
height: 400px;
}
.image-container
the width: 50% makes it so the .image-container resizes when the browser viewport changes width. margin: 0 auto centers the .image-container inside it's parent.
.image
the width: 100% streaches the img tag to be the width of its parent (the .image-container).
the fixed height: 400px keeps tall images from expanding the height of the parent.
HTML
<div id="top-div" class="row">
<div class="row">
<h1 class="col-sm-12">Activities</h1>
<span class="col-sm-2"><!-- <button class="leftButton"></button> --></span>
<div class="col-sm-12 col-lg-8">
<figure class="image-container">
<figcaption class="caption">Outdoor</figcaption>
<img class="image img-fluid" id="Outdoor" src="https://picsum.photos/200/300">
</figure>
<figure class="image-container">
<figcaption class="caption">Indoor</figcaption>
<img class="image img-fluid" id = "Indoor" src="https://picsum.photos/300/300">
</figure>
<figure class="image-container">
<figcaption class="caption">Join Us!</figcaption>
<img class="image img-fluid" id = "Member" src="https://picsum.photos/400/300">
</figure>
</div>
<span class="col-sm-2"><!-- <button class="rightButton"> --></button></span>
</div>
</div>
I just renamed the class="images" to class="image-container" and added an image class to the img elements, also changed the src on the images to use picsum so you might want to change them back.

The solution that I did was harcoding height values when the screen size changes, I don't really like to hardcode it, but it's the only way I can think of right now.
CSS
#media only screen and (min-width: 576px) {
/*Change slides height to 950px when at sm (576px)*/
#top-div{
height: 950px;
}
}
#media only screen and (max-width: 576px) {
/*Change slides height to 440px when greater than sm*/
#top-div{
height: 440px;
}
}

JQuery For simple horizontal slider

Hi There,
I try to create very simple slider using Jquery scrollLeft() method .
I found some answers and i tried this one here .... but not working .... I'm still beginner in jquery and don't know why .
HTML
<div class="gallery-slider ">
<div class="images-preview">
<img alt="" class="img-responsive" src="http://placehold.it/300">
<img alt="" class="img-responsive" src="http://placehold.it/300">
<img alt="" class="img-responsive" src="http://placehold.it/300">
<img alt="" class="img-responsive" src="http://placehold.it/300">
<img alt="" class="img-responsive" src="http://placehold.it/300">
<img alt="" class="img-responsive" src="http://placehold.it/300">
<img alt="" class="img-responsive" src="http://placehold.it/300">
<img alt="" class="img-responsive" src="http://placehold.it/300">
<img alt="" class="img-responsive" src="http://placehold.it/300">
<img alt="" class="img-responsive" src="http://placehold.it/300">
<img alt="" class="img-responsive" src="http://placehold.it/300">
<img alt="" class="img-responsive" src="http://placehold.it/300">
</div>
<div class="controls">
<div class="right-arrow"><i class="fa fa-angle-left fa-3x"></i></div>
<div class="left-arrow"><i class="fa fa-angle-right fa-3x"></i></div>
</div>
</div>
CSS
.gallery-slider {
position: relative;
}
.gallery-slider .images-preview {
margin: auto;
height: 230px;
overflow: hidden;
}
.gallery-slider .images-preview img {
display: inline-block;
overflow: visible;
width: 410px;
margin: 10px 17px;
}
.gallery-slider .images-preview img, .controls {
height: 200px;
width: 26%;
}
/* Controls */
.controls {
position: absolute;
top: 10px;
width: 100%;
}
.right-arrow, .left-arrow {
display: inline-block;
padding: 62px;
background-color: rgba(255, 255, 255, 0.76);
position: absolute;
height: 100%;
cursor: pointer;
}
.right-arrow i, .left-arrow i{
margin: 23px 20px;
}
.left-arrow {
right: 0px;
}
.right-arrow {
left: 0px;
text-align: right;
}
jQuery
$(".left-arrow").click(function () {
var leftPos = $('.images-preview img').scrollLeft();
$(".images-preview img").animate({scrollLeft: leftPos - 100}, 1000);
});
$(".right-arrow").click(function () {
var leftPos = $('.images-preview img').scrollLeft();
$(".images-preview img").animate({scrollLeft: leftPos + 100}, 1000);
});
So Any help ?!
Thanks in advance
Fiddle here
Update:
also i need it to return to scrollleft():0 at the end of scrolling

What you are asking for is simple but full of issues. These issues makes things complicated.
I have made images-preview position absolute. It allows you to
scroll by controlling the left(css). Couldnt get the scrollLeft to
work. Dont know why. If anyone do, i would love to know.
Need to calculate the number of img inside the images-preview. Allow you to add or delete images.
var active is added to prevent clicking too fast.
javascript:
var target = $('.images-preview');
//get the total number of images
var total = $('.images-preview img').length;
//calculate the width of the image-preview
var width = total * 300 + total * 40;
var c = 1;
// 80 is to center the image-preview
var originalLeft = 80;
// 300 is the image size, 40 is the total margin (this is how many px image-preview
// would have to move left for one image
var totalImg = 300 + 40;
// startToEnd is the total width when you click left(arrow-right) on first image
var startToEnd = width -originalLeft -340;
var a = '';
//need this to prevent multiple clicks
var active = false;
//put in the width at page rendering
$(document)function(){
target.css('width', width);
});
$(".left-arrow").click(function () {
if (active === false){
if (c === total){
a = originalLeft;
c = 1;
}else{
a = '-='+totalImg;
c++;
}
//turn the active to true to prevent another animation from activating
active = true;
target.animate(
{left: a},
{duration:500,
//turn the active off after animation is complete
complete: function(){
active = false;
}
});
}
});
$(".right-arrow").click(function () {
if (active === false){
if (c === 1){
a = '-'+startToEnd;
c = total;
}else{
a = '+='+totalImg;
c--;
}
active = true;
target.animate(
{left: a},
{duration:500,
complete: function(){
active = false;
}
});
}
});
css:
.gallery-slider{
width:500px;
height:300px;
position:relative;
overflow:hidden;
}
.images-preview{
width:300px;
height:300px;
position:absolute;
left:80px;
}
.images-preview img{
width:300px;
height:300px;
position:relative;
float:left;
margin:0 20px;
}
.control{
width:100%;
height:100%;
position:relative;
}
.right-arrow, .left-arrow{
position:absolute;
padding:0 26px;
}
.right-arrow i, .left-arrow i{
line-height:300px;
}
.right-arrow{
left:0;
}
.left-arrow{
right:0;
}
Here is the demo: https://jsfiddle.net/ood26n7b/1/

Animate a PNG sequence by scrolling

Basically, I want to dynamically add/remove the class .show to the images inside .container depending on the scroll position. I want to change the class after some position.
$(document).ready(function() {
var container = $('#container'),
nImg = 0; // active picture
imgNum = $('#container img').length;
var topDiv = (container).offset() || {
"top": NaN
}).top;
$(window).bind('scroll', function() {
var y = $(this).scrollTop();
if (y > topDiv) {
nImg++;
} else {
nImg--;
}
if (nImg >= imgNum) {
nImg = 0;
}
if (nImg < 0) {
nImg = imgNum - 1;
}
$(".animated").each(function() {
$(this).removeClass("show")
});
$(".animated").eq(nImg).addClass("show");
});
});
.animated {
display: none;
}
.show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="height:200px"></div>
<div id="container">
<img src="http://i.imgur.com/2oVbl7z.png" class="animated show" />
<img src="http://i.imgur.com/S5s0Mv1.png" class="animated" />
<img src="http://i.imgur.com/0vBEXL7.png" class="animated" />
<img src="http://i.imgur.com/ffg7v9n.png" class="animated" />
<img src="http://i.imgur.com/9FD5kdE.png" class="animated" />
</div>
If you scroll slowly you see that it actually works, but much too fast - that's the problem. I just to move slowly and want to start it from after some position.

See the below example for how to animate sequence image when page scroll.
$(document).ready(function () {
$('.aniScrollContainer').aniScroll({});
});
.aniScrollContainer {
height:300px;
background-color:#a1a1a1;
}
.myAniScrollContainer200 {
height:200px;
}
#header {
display: block;
height: 500px;
width: 100%;
background-color:#e0e0e0;
}
.gap {
display: block;
height: 100px;
width: 100%;
background-color:#e0e0e0;
}
#footer {
display: block;
height: 1500px;
width: 100%;
background-color:#e0e0e0;
}
.aniScrollContainer {
position: relative;
height: 100px;
}
.aniScrollContainer img.animated {
position: absolute;
display: none;
top: 0;
left: 0;
height:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://www.durley.net/animate-on-scroll/js/aniscroll.js"></script>
<div id="header"></div>
<div class="aniScrollContainer myAniScrollContainer">
<img src="http://www.durley.net/animate-on-scroll/images/armani-bag-1000-03-01.jpg"/>
<img src="http://www.durley.net/animate-on-scroll/images/armani-bag-1000-03-02.jpg"/>
<img src="http://www.durley.net/animate-on-scroll/images/armani-bag-1000-03-03.jpg"/>
<img src="http://www.durley.net/animate-on-scroll/images/armani-bag-1000-03-04.jpg"/>
<img src="http://www.durley.net/animate-on-scroll/images/armani-bag-1000-03-05.jpg"/>
<img src="http://www.durley.net/animate-on-scroll/images/armani-bag-1000-03-06.jpg"/>
<img src="http://www.durley.net/animate-on-scroll/images/armani-bag-1000-03-07.jpg"/>
<img src="http://www.durley.net/animate-on-scroll/images/armani-bag-1000-03-08.jpg"/>
<img src="http://www.durley.net/animate-on-scroll/images/armani-bag-1000-03-09.jpg"/>
<img src="http://www.durley.net/animate-on-scroll/images/armani-bag-1000-03-10.jpg"/>
<img src="http://www.durley.net/animate-on-scroll/images/armani-bag-1000-03-11.jpg"/>
<img src="http://www.durley.net/animate-on-scroll/images/armani-bag-1000-03-12.jpg"/>
</div>
<div id="footer"></div>

See this jsFiddle for an example for how to limit how often it can change.
function animationTimer(){
canChange = true;
}
$(window).bind('scroll', function() {
if(canChange)
{
canChange = false;
setTimeout(animationTimer, 250);
// ...
}
});
This will allow the image to change every 250 ms, so change the 250 to a number which suits you to throttle the speed of which it changes.

You can use a sleep function (setTimeout) to wait some time between actions. And to be sure that isn't executet more than 1 time, you can use semaphores to lock critical regions.
In the example below I add and remove a class (this is the semaphore). And I make use of setTimeout to wait a time to execute that code.
$(document).ready(function () {
var container = $('#container'),
nImg = 0; // active picture
imgNum = $('#container img').length;
var topDiv = ((container).offset() || { "top": NaN }).top;
$(window).bind('scroll', function() {
if(!container.hasClass('lock')) {
container.addClass('lock');
setTimeout(function() {
var y = $(this).scrollTop();
if(y>topDiv){
nImg++;
}else{
nImg--;
}
if(nImg>=imgNum){ nImg = 0; }
if(nImg<0){ nImg = imgNum-1; }
$(".animated").each(function(){
$(this).removeClass("show")
});
$(".animated").eq(nImg).addClass("show");
container.removeClass('lock');
},200);
}
});
});
.animated { display: none;}
.show { display: block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="height:200px"></div>
<div id="container">
<img src="http://i.imgur.com/2oVbl7z.png" class="animated show" />
<img src="http://i.imgur.com/S5s0Mv1.png" class="animated" />
<img src="http://i.imgur.com/0vBEXL7.png" class="animated" />
<img src="http://i.imgur.com/ffg7v9n.png" class="animated" />
<img src="http://i.imgur.com/9FD5kdE.png" class="animated" />
</div>
Note: You can change the value of setTimeout to match your speed needs.