I am trying to make a slideshow of images. But it does not seem to work I am not getting any errors when checking the javascript. Not sure what I am doing wrong
$( document ).ready(function() {
$('.work').scroll(function() {
var $this= $('h2');
$('.image').each(function () {
var hT = $(this).offset().top,
hH = $('h2').outerHeight(),
wH = $('.work').height(),
wS = $this.scrollTop();
console.log((hT-wH) , wS);
if (wS > (hT+hH-wH)){
$('#count').text($(this).data('index'));
}
});
});
});
function smallscreen() {
if (window.innerWidth < 959) {var workSlide = document.querySelector('.work');
var sliderImages = document.querySelectorAll('.work h2');
var prevButton = document.querySelector('.prev');
var nextButton = document.querySelector('.next');
var counter = 1;
const size = sliderImages[0].clientWidth;
workSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
nextButton.addEventListener('click', function next() {
if (counter >= sliderImages.length - 1) return;
workSlide.style.transition = "transform 0.4s ease-in-out";
counter++;
workSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
});
prevButton.addEventListener('click', function prev() {
if (counter <=0) return;
workSlide.style.transition = "transform 0.4s ease-in-out";
counter--;
workSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
});
workSlide.addEventListener('transitionend',function loopin() {
if (sliderImages[counter].class === 'clonelast') {
workSlide.style.transition = "none";
counter = workSlide.length -2;
}
if (sliderImages[counter].class === 'clonefirst') {
workSlide.style.transition = "none";
counter = workSlide.length -2;
}
});
}
}
window.onload = window.resize = smallscreen;@media only screen and (max-width: 959px) /*and (orientation:portrait)*/ {
html,body {
max-width: 100%;
height: 100%;
}
.main{
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 1fr;
grid-gap: 1.5em;
}
.header {
grid-column: 1fr;
display: grid;
grid-template-columns: 1fr;
justify-content: center;
grid-row: 1;
z-index: 2;
width: 100vw;
height: 60px;
}
.header h3 {
display: none;
}
.logo {
grid-column: 1;
max-width: 100%;
display: grid;
justify-items: center;
}
.logo embed{
display: block;
margin: auto;
max-width: 50%;
height: auto;
}
.body {
grid-row: 2/3;
display: grid;
grid-gap: 1.5em;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto;
margin: 0;
padding: 0;
z-index: 1;
}
.about{
max-width: 100vw;
}
h1 {
font-family: 'DM Sans', sans-serif, Arial, Helvetica;
font-size: 13.5pt;
line-height: 22pt;
font-weight: 500;
color: #000000;
}
.work {
grid-row: 2 / 4;
grid-column: 1;
display: flex;
width: 100%;
}
.image > img{
max-width: 100vw;
height: auto;
}
.buttons {
grid-row: 2 / 4;
grid-column: 1;
align-self: center;
padding: 0.75em;
display: grid;
grid-template-columns: 1fr 1fr;
transition: 0.5s ease 0s;
z-index: 4;
width: 100vw;
}
.prev {
justify-self: start;
}
.next {
justify-self: end;
}
button {
background: none;
color: inherit;
border: none;
font: inherit;
cursor: pointer;
outline: inherit;
display: flex;
}
.buttons :hover {
color: white;
}
.footer {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
z-index: 3;
min-height: 80px;
grid-row: 3;
text-align: center;
max-width: 100vw;
}
.phone {
grid-row: 2;
align-self: center;
justify-self: center;
}
.media {
list-style-type: none;
display: flex;
justify-content: space-between;
padding: 1em 0 0;
grid-row: 1;
padding-bottom: 1em;
}
li > a {
text-decoration: none;
color: black;
}
li > a:hover {
font-weight: 800;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="CSS/styles.css">
<title>DesignLover-Question</title>
</head>
<body>
<div class="main">
<div class="header">
<div class="logo">
<a href="https://www.walumozagba.com">
<embed src="https://collartocuff.files.wordpress.com/2010/01/chanel-logo-png-image-e1512737281632.png" alt="logo" width="500px">
</a>
</div>
<h3><span id="count">1</span>/17</h3>
</div>
<div class="body">
<div class="about">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla <a href="mailto:[email protected]">pariatur</a>. <br><br>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h1>
</div>
<div class="work">
<h2 class="image" data-index="0"></h2>
<h2 class="image clonefirst" data-index="1"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image clonelast" data-index="17"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="1"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="2"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="3"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="4"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="5"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="6"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="7"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="8"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="9"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="10"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="11"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="12"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="13"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="14"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="15"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="16"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="17"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
</div>
<div class="buttons">
<button class="prev">PREV</button>
<button class="next">NEXT</button>
</div>
</div>
<div class="footer">
<div class="phone">
<p>+31 123 12 12 12</p>
</div>
<ul class="media">
<li><a href="https://www.behance.net/walum" target="_blank">Behance</a></li>
<li><a href="https://www.facebook.com/itswalu/" target="_blank">Facebook</a></li>
<li><a href="https://www.instagram.com/walumozagba/" target="_blank">Instagram</a></li>
<li><a href="mailto:[email protected]">Email</a></li>
</ul>
</div>
</div>
<script src="JS/scriptscroll.js" type="text/javascript"></script>
</body>
</html>You need to transition the elements within .work, not .work itself.
Heres a small working version of a image carousel:
(also available as JSFiddle)
class Slider {
constructor(el) {
this.el = el;
this.activeIndex = 0;
this.numItems = this.el.children().length;
// automatically advance slider
this.interval = setInterval(() => this.next(), 5000);
}
prev() {
this.activeIndex--;
if(this.activeIndex < 0)
this.activeIndex = this.numItems - 1;
this.updateDom();
}
next() {
this.activeIndex++;
if(this.activeIndex >= this.numItems)
this.activeIndex = 0;
this.updateDom();
}
updateDom() {
this.el.children().css('transform', `translateX(-${this.activeIndex}00%)`)
}
}
$(() => {
let slider = new Slider($(".work"));
$(".prev").click(() => slider.prev());
$(".next").click(() => slider.next());
});.work {
/* Specify the size of the image box (can be in any unit you want)*/
width: 500px;
height: 300px;
overflow: hidden;
display: flex;
}
img {
width: 100%;
height: 100%;
transition: transform 0.5s ease;
will-change: transform;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="work">
<img src="https://picsum.photos/500/300?1">
<img src="https://picsum.photos/500/300?2">
<img src="https://picsum.photos/500/300?3">
<img src="https://picsum.photos/500/300?4">
<img src="https://picsum.photos/500/300?5">
</div>
<button type="button" class="prev">
PREV
</button>
<button type="button" class="next">
NEXT
</button>For production use i would recommend using an existing library though.
To name a few:
Edit:
Heres a working JsFiddle with your code.