Having trouble creating a slideshow of images? I've checked the JavaScript code and there are no errors, but it just doesn't seem to work. Not sure what's going 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)';
/* more code here */
}
}
window.onload = window.resize = smallscreen;@media only screen and (max-width: 959px) /*and (orientation:portrait)*/ {
/* CSS styles for responsive design */
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DesignLover-Question</title>
</head>
<body>
<div class="main">
<div class="header">
<div class="logo">
<a href="https://www.example.com"><img src="example.jpg" alt="Logo"></a>
</div>
<h3><span id="count">1</span>/17</h3>
</div>
<div class="body">
<div class="about">
<h1>Lorem ipsum dolor sit amet...</h1>
</div>
<div class="work">
<!-- Images for slideshow -->
</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="#" target="_blank">Example Link</a></li>
<li><a href="#" target="_blank">Another Link</a></li>
<li><a href="#" target="_blank">More Links</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
<script src="JS/script.js" type="text/javascript"></script>
</body>
</html>