We Keep Coding

css transition animation not working. how to I fix?

I want to add a transition animation while image is changing. But transition doesn't work. As if no transition animation has been added
How transition style does work in this case?
( If there is way to from left to right animation like image strip, it will be better than ease animation )
Js, Css, Html codes :
var slides = document.querySelectorAll('.slide');
var next = document.getElementById('next');
var back = document.getElementById('back');
let currentSlide = 0;
var manualNav = function(manual) {
slides.forEach((slide) => {
slide.classList.remove('active');
});
slides[manual].classList.add('active');
}
next.addEventListener('click', function() {
if (currentSlide != slides.length - 1) {
currentSlide++;
manualNav(currentSlide);
}
})
back.addEventListener('click', function() {
if (currentSlide != 0) {
currentSlide--;
manualNav(currentSlide);
}
})
var repeat = function(activeClass) {
let active = document.getElementsByClassName('active');
let i = 1;
var repeater = () => {
setTimeout(function() {
[...active].forEach((activeSlide) => {
activeSlide.classList.remove('active');
});
slides[i].classList.add('active');
i++;
if (slides.length == i) {
i = 0;
}
if (i >= slides.length) {
return;
}
repeater();
}, 10000);
}
repeater();
}
repeat();
.gallery {
width: 50%;
height: 340px;
display: flex;
align-items: center;
flex-direction: column;
}
.gallery .content {
position: relative;
width: 564px;
height: 297px;
}
.gallery .content .slide {
display: none;
transition: all 1s ease-in;
}
.gallery .content .slide img {
width: 100%;
height: 297px;
object-fit: cover;
}
.gallery .content .slide.active {
display: block;
}
.gallery .content .firstSvg {
position: absolute;
right: 80px;
bottom: 24px;
cursor: pointer;
height: 50px;
width: 50px;
background-color: orange;
}
.gallery .content .lastSvg {
cursor: pointer;
position: absolute;
right: 24px;
bottom: 24px;
height: 50px;
width: 50px;
background-color: wheat;
}
<div class="gallery" id="gallery">
<div class="content">
<div class="slide active">
<img src="https://i.picsum.photos/id/250/536/354.jpg?hmac=qb3khzryKWU1ECPob2_1mYZLumW5eJTLSmhJzi1VVSI" alt="gallery">
</div>
<div class="slide">
<img src="https://i.picsum.photos/id/868/536/354.jpg?hmac=ZcbB7ABIgl6LS5B1wxkzJ_dxJFgNmCsODUTfxM5GdRk" alt="gallery">
</div>
<div class="slide">
<img src="https://i.picsum.photos/id/441/536/354.jpg?hmac=qHaUqO3vqlz-C811TXJPtRw-FV4ciRCazlDZb1gdodg" alt="gallery">
</div>
<div class="firstSvg" id="back">back</div>
<div class="lastSvg" id="next">next</div>
</div>
</div>

var slides = document.querySelectorAll('.slide');
var next = document.getElementById('next');
var back = document.getElementById('back');
let currentSlide = 0;
var manualNav = function(manual) {
slides.forEach((slide) => {
slide.classList.remove('active');
});
slides[manual].classList.add('active');
}
next.addEventListener('click', function() {
if (currentSlide != slides.length - 1) {
currentSlide++;
manualNav(currentSlide);
}
})
back.addEventListener('click', function() {
if (currentSlide != 0) {
currentSlide--;
manualNav(currentSlide);
}
})
var repeat = function(activeClass) {
let active = document.getElementsByClassName('active');
let i = 1;
var repeater = () => {
setTimeout(function() {
[...active].forEach((activeSlide) => {
activeSlide.classList.remove('active');
});
slides[i].classList.add('active');
i++;
if (slides.length == i) {
i = 0;
}
if (i >= slides.length) {
return;
}
repeater();
}, 10000);
}
repeater();
}
repeat();
.gallery {
width: 50%;
height: 340px;
display: flex;
align-items: center;
flex-direction: column;
}
.gallery .content {
position: relative;
width: 564px;
height: 297px;
}
.gallery .content .slide {
height: 0;
width: 0;
opacity: 0;
transition: all 1s ease-in;
}
.gallery .content .slide img {
width: 100%;
height: 297px;
object-fit: cover;
}
.gallery .content .slide.active {
height: 100%;
width: 100%;
opacity: 1;
}
.gallery .content .firstSvg {
position: absolute;
right: 80px;
bottom: 24px;
cursor: pointer;
height: 50px;
width: 50px;
background-color: orange;
}
.gallery .content .lastSvg {
cursor: pointer;
position: absolute;
right: 24px;
bottom: 24px;
height: 50px;
width: 50px;
background-color: wheat;
}
<div class="gallery" id="gallery">
<div class="content">
<div class="slide active">
<img src="https://i.picsum.photos/id/250/536/354.jpg?hmac=qb3khzryKWU1ECPob2_1mYZLumW5eJTLSmhJzi1VVSI" alt="gallery">
</div>
<div class="slide">
<img src="https://i.picsum.photos/id/868/536/354.jpg?hmac=ZcbB7ABIgl6LS5B1wxkzJ_dxJFgNmCsODUTfxM5GdRk" alt="gallery">
</div>
<div class="slide">
<img src="https://i.picsum.photos/id/441/536/354.jpg?hmac=qHaUqO3vqlz-C811TXJPtRw-FV4ciRCazlDZb1gdodg" alt="gallery">
</div>
<div class="firstSvg" id="back">back</div>
<div class="lastSvg" id="next">next</div>
</div>
</div>
Animations don't work with display property
When you are trying to change display: none; to display:block when a silde is active, browser won't recognise this as a transition event hence nothing happens.
Instead you can try using the changes below to create a fade in animation
Changes
.gallery .content .slide {
height: 0;
width: 0;
opacity: 0;
transition: all 1s ease-in;
}
.gallery .content .slide.active {
height: 100%;
width: 100%;
opacity: 1;
}
Initially silde do not have height,width,opacity which makes them 'invisible'.
But when silde is set toactive the above 3 properties are changed and that triggers an animation which in this case is transition: all 1s ease-in;

How to slide images by clicking arrows bullets and auto slide images by javascript?

I want bullets move when i clicked arrow,i tried to think how to code it but my knowledge and experience is still not enough so i really need help from people.
$(document).ready(function () {
$("#mainTopics").click(function (e) {
e.preventDefault();
e.stopPropagation();
$("#sub-topics").toggle();
});
$("html").on('click', function () {
if ($("#sub-topics").is(':visible')) {
$("#sub-topics").toggle();
}
});
});
var sliderImages = document.querySelectorAll('.slide');
var arrowLeft = document.querySelector('#arrow-left');
var arrowRight = document.querySelector('#arrow-right');
var arrowSlide = document.querySelectorAll('.arrow');
var sliderBullets = document.querySelectorAll('.bullets');
var current = 0;
//reset slideimages
function resetSlide() {
for (var i = 0; i < sliderImages.length; i++) {
sliderImages[i].style.display = 'none';
}
}
//slide left
function slideLeft() {
resetSlide();
sliderImages[current - 1].style.display = 'block';
current--;
}
//slide right
function slideRight() {
resetSlide();
sliderImages[current + 1].style.display = 'block';
current++;
}
//arrow left
arrowLeft.addEventListener('click', function () {
if (current === 0) {
current = sliderImages.length;
}
slideLeft();
});
//arrow right
arrowRight.addEventListener('click', function () {
if (current === sliderImages.length - 1) {
current = -1;
}
slideRight();
});
//start to slideimages
function startSlide() {
resetSlide();
sliderImages[0].style.display = 'block';
}
//called startslide function
startSlide();
body {
margin: 0;
}
li, a{
text-decoration: none;
list-style-type: none;
text-decoration-line: none;
color: black;
}
/*main-menu*/
#main-menu {
position: relative;
}
#main-menu ul {
margin: 0;
padding: 0;
}
#main-menu li {
display: inline-block;
}
#main-menu a {
display: block;
width: 100px;
padding: 10px;
border: 1px solid;
text-align: center;
}
/*sub-topics*/
#sub-topics {
position: absolute;
display: none;
margin-top: 10px;
width: 100%;
left: 0;
}
#sub-topics ul {
margin: 0;
padding: 0;
}
#sub-topics li {
display: block;
}
#subTopics a {
text-align: left;
}
/*columns*/
#column1, #column2, #column3 {
position: relative;
float: left;
left: 125px;
margin: 0px 5px 0px 0px;
}
/*hover underline*/
#main-menu li:hover {
text-decoration: underline;
}
/*slideshow*/
#slideshow {
position: relative;
width: 100%;
height: 100%;
}
#slide1 {
background-image: url(https://preview.ibb.co/mV3TR7/1.jpg);
}
#slide2 {
background-image: url(https://preview.ibb.co/bSCBeS/2.jpg);
}
#slide3 {
background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg);
}
.slide {
background-repeat: no-repeat;
background-position: center;
background-size: 800px 400px;
width: 800px;
height: 400px;
margin: auto;
margin-top: 40px;
}
.slide-contain {
position: absolute;
left: 50%;
bottom: 50%;
transform: translate3d(-50%,-50%,0);
text-align: center;
}
.slide-contain span {
color: white;
}
/*arrow*/
.arrow {
position: absolute;
cursor: pointer;
top: 200px;
width: 0;
height: 0;
border-style: solid;
}
.arrow:hover {
background-color: #e0dede;
transition: background-color 0.6s ease;
}
/*arrow-left*/
#arrow-left {
position: absolute;
border-width: 30px 40px 30px 0px;
border-color: transparent gray transparent transparent;
left: 0;
margin-left: 300px;
}
/*arrow-right*/
#arrow-right {
border-width: 30px 0px 30px 40px;
border-color: transparent transparent transparent gray;
right: 0;
margin-right: 300px;
}
/*bullets*/
#slidebullet {
position: relative;
top: -30px;
text-align: center;
}
.bullets {
display: inline-block;
background-color: gray;
width: 15px;
height: 15px;
border-radius: 10px;
cursor: pointer;
transition: background-color 0.6s ease;
}
.active, .bullets:hover {
background-color: #e0dede;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<header></header>
<nav>
<div id="main-menu">
<ul>
<li>Logo</li>
<li>Home</li>
<li>
Topics
<div id="sub-topics">
<div id="column1" class="columns">
<ul>
<li>example1</li>
<li>example2</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</nav>
<div id="slideshow">
<div id="arrow-left" class="arrow"></div>
<div id="slide1" class="slide">
<div class="slide-contain">
<span>Image One</span>
</div>
</div>
<div id="slide2" class="slide">
<div class="slide-contain">
<span>Image Two</span>
</div>
</div>
<div id="slide3" class="slide">
<div class="slide-contain">
<span>Image Three</span>
</div>
</div>
<div id="slidebullet">
<div id="bullet1" class="bullets"></div>
<div id="bullet2" class="bullets"></div>
<div id="bullet3" class="bullets"></div>
</div>
<div id="arrow-right" class="arrow"></div>
</div>
<script src="jquery.js"></script>
<script src="index.js"></script>
<script>
</script>
</body>
</html>
Above is the code that i have learned from website asked people and youtube.
My website now the arrows work fine can change to other slides,but the bullets are not moving the same time like arrows.

Your goal can be reached by adding the following javascript code to your js file:
for (var i=0 ;i<sliderBullets.length;i++)
{
bullet=sliderBullets[i];
bullet.addEventListener("click",function(){
var i=this.id;
i=i.replace("bullet","");
current=parseInt(i)-1;
resetSlide();
sliderImages[current].style.display = 'block';
});
}

Try this one , its very easy .
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel&stacked=h

Adding time counter to my memory game script

I'm trying to figure out the best way of adding a time counter to my memory game. The game consists of a lot of squares and if the user has figured out and won the game, a modal pops up and tells the user that they have won and offers to reset the game to start over.
I want to add the time the user spent playing the game. Since they have opened the page it should count the time from 0 to x seconds, and later when the user finishes the game, it echo's the score on the modal, so the user can see their score. But if someone did not complete the quiz in x seconds, a function runs that opens modal, but this time echo's that person has run out of time and offers to start over.
I'm using a small remake of this game on codepen
HTML:
<div class="modal-overlay">
<div class="modal">
<h2 class="winner">You Rock!</h2>
<button class="restart">Play Again?</button>
<p class="message">Developed on CodePen by Nate Wiley</p>
<p class="share-text">Share it?</p>
<ul class="social">
<li><a target="_blank" class="twitter" href="http://twitter.com/share?url=http://codepen.io/natewiley/pen/HBrbL"><span class="brandico-twitter-bird"></span></a></li>
<li><a target="_blank" class="facebook" href="http://www.facebook.com/sharer.php?u=http://codepen.io/natewiley/pen/HBrbL"><span class="brandico-facebook"></span></a></li>
<li><a target="_blank" class="google" href="https://plus.google.com/share?url=http://codepen.io/natewiley/pen/HBrbL"><span class="brandico-googleplus-rect"></span></a></li>
</ul>
</div>
</div>
All logos are property of their respective owners, No Copyright infringement intended.
The CSS part:
#import url(http://weloveiconfonts.com/api/?family=brandico);
/* brandico */
[class*="brandico-"]:before {
font-family: 'brandico', sans-serif;
}
* {
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
background: black;
min-height: 100%;
font-family: "Arial", sans-serif;
}
.wrap {
position: relative;
height: 100%;
min-height: 500px;
padding-bottom: 20px;
}
.game {
transform-style: preserve-3d;
perspective: 500px;
min-height: 100%;
height: 100%;
}
#mixin width($max){
#media (max-width: $max){
#content;
}
}
#keyframes matchAnim {
0% {
background: #bcffcc;
}
100% {
background: white;
}
}
.card {
float: left;
width: 16.66666%;
height: 25%;
padding: 5px;
text-align: center;
display: block;
perspective: 500px;
position: relative;
cursor: pointer;
z-index: 50;
-webkit-tap-highlight-color: rgba(0,0,0,0);
#include width(800px){
width: 25%;
height: 16.666%;
}
.inside {
width: 100%;
height: 100%;
display: block;
transform-style: preserve-3d;
transition: .4s ease-in-out;
background: white;
&.picked, &.matched {
transform: rotateY(180deg);
}
&.matched {
animation: 1s matchAnim ease-in-out;
animation-delay: .4s;
}
}
.front, .back {
border: 1px solid black;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 20px;
img {
max-width: 100%;
display: block;
margin: 0 auto;
max-height: 100%;
}
}
.front {
transform: rotateY(-180deg);
#include width(800px){
padding: 5px;
}
}
.back{
#include width(800px){
padding: 10px;
}
}
}
.modal-overlay {
display: none;
background: rgba(0,0,0,.8);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.modal {
display: none;
position: relative;
width: 500px;
height: 400px;
max-height: 90%;
max-width: 90%;
min-height: 380px;
margin: 0 auto;
background: white;
top: 50%;
transform: translateY(-50%);
padding: 30px 10px;
.winner {
font-size: 80px;
text-align: center;
font-family: "Anton", sans-serif;
color: #4d4d4d;
text-shadow: 0px 3px 0 black;
#include width(480px){
font-size: 60px;
}
}
.restart {
font-family: "Anton", sans-serif;
margin: 30px auto;
padding: 20px 30px;
display: block;
font-size: 30px;
border: none;
background: #4d4d4d;
background: linear-gradient(#4d4d4d, #222);
border: 1px solid #222;
border-radius: 5px;
color: white;
text-shadow: 0px 1px 0 black;
cursor: pointer;
&:hover {
background: linear-gradient(#222, black);
}
}
.message {
text-align: center;
a {
text-decoration: none;
color: #28afe6;
font-weight: bold;
&:hover {
$c: lighten(#28afe6, 10%);
color: $c;
border-bottom: 1px dotted $c;
}
}
}
.share-text {
text-align: center;
margin: 10px auto;
}
.social {
margin: 20px auto;
text-align: center;
li {
display: inline-block;
height: 50px;
width: 50px;
margin-right: 10px;
&:last-child {
margin-right: 0;
}
a {
display: block;
line-height: 50px;
font-size: 20px;
color: white;
text-decoration: none;
border-radius: 5px;
&.facebook {
background: #3b5998;
&:hover {
background: lighten(#3b5998, 10%);
}
}
&.google {
background: #D34836;
&:hover {
background: lighten(#D34836, 10%);
}
}
&.twitter {
background: #4099FF;
&:hover {
background: lighten(#4099FF, 10%);
}
}
}
}
}
}
footer {
height: 20px;
position: absolute;
bottom: 0;
width: 100%;
z-index: 0;
.disclaimer {
line-height: 20px;
font-size: 12px;
color: #727272;
text-align: center;
#include width(767px){
font-size: 8px;
}
}
}
And js:
(function(){
var Memory = {
init: function(cards){
this.$game = $(".game");
this.$modal = $(".modal");
this.$overlay = $(".modal-overlay");
this.$restartButton = $("button.restart");
this.cardsArray = $.merge(cards, cards);
this.shuffleCards(this.cardsArray);
this.setup();
},
shuffleCards: function(cardsArray){
this.$cards = $(this.shuffle(this.cardsArray));
},
setup: function(){
this.html = this.buildHTML();
this.$game.html(this.html);
this.$memoryCards = $(".card");
this.binding();
this.paused = false;
this.guess = null;
},
binding: function(){
this.$memoryCards.on("click", this.cardClicked);
this.$restartButton.on("click", $.proxy(this.reset, this));
},
// kinda messy but hey
cardClicked: function(){
var _ = Memory;
var $card = $(this);
if(!_.paused && !$card.find(".inside").hasClass("matched") && !$card.find(".inside").hasClass("picked")){
$card.find(".inside").addClass("picked");
if(!_.guess){
_.guess = $(this).attr("data-id");
} else if(_.guess == $(this).attr("data-id") && !$(this).hasClass("picked")){
$(".picked").addClass("matched");
_.guess = null;
} else {
_.guess = null;
_.paused = true;
setTimeout(function(){
$(".picked").removeClass("picked");
Memory.paused = false;
}, 600);
}
if($(".matched").length == $(".card").length){
_.win();
}
}
},
win: function(){
this.paused = true;
setTimeout(function(){
Memory.showModal();
Memory.$game.fadeOut();
}, 1000);
},
showModal: function(){
this.$overlay.show();
this.$modal.fadeIn("slow");
},
hideModal: function(){
this.$overlay.hide();
this.$modal.hide();
},
reset: function(){
this.hideModal();
this.shuffleCards(this.cardsArray);
this.setup();
this.$game.show("slow");
},
// Fisher--Yates Algorithm -- http://bost.ocks.org/mike/shuffle/
shuffle: function(array){
var counter = array.length, temp, index;
// While there are elements in the array
while (counter > 0) {
// Pick a random index
index = Math.floor(Math.random() * counter);
// Decrease counter by 1
counter--;
// And swap the last element with it
temp = array[counter];
array[counter] = array[index];
array[index] = temp;
}
return array;
},
buildHTML: function(){
var frag = '';
this.$cards.each(function(k, v){
frag += '<div class="card" data-id="'+ v.id +'"><div class="inside">\
<div class="front"><img src="'+ v.img +'"\
alt="'+ v.name +'" /></div>\
<div class="back"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/codepen-logo.png"\
alt="Codepen" /></div></div>\
</div>';
});
return frag;
}
};
var cards = [
{
name: "php",
img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/php-logo_1.png",
id: 1,
},
{
name: "css3",
img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/css3-logo.png",
id: 2
},
{
name: "html5",
img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/html5-logo.png",
id: 3
},
{
name: "jquery",
img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/jquery-logo.png",
id: 4
},
{
name: "javascript",
img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/js-logo.png",
id: 5
},
{
name: "node",
img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/nodejs-logo.png",
id: 6
},
{
name: "photoshop",
img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/photoshop-logo.png",
id: 7
},
{
name: "python",
img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/python-logo.png",
id: 8
},
{
name: "rails",
img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/rails-logo.png",
id: 9
},
{
name: "sass",
img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/sass-logo.png",
id: 10
},
{
name: "sublime",
img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/sublime-logo.png",
id: 11
},
{
name: "wordpress",
img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/wordpress-logo.png",
id: 12
},
];
Memory.init(cards);
})();

You can accomplish a timer functionality with using setTimeout recursively or setInterval like so:
(function () {
var timeContainer = document.getElementById("timer-value");
var startButton = document.getElementById("start-game");
var timer = 0;
var maxTime = 30;
var timeout = null;
function count () {
timeout = setTimeout(function () {
if (timer < maxTime) {
timer++;
timeContainer.innerText = timer;
count();
}
else {
alert("Time's up!");
startButton.style.display = "inline-block";
}
}, 1000);
}
function endGame () {
clearTimeout(timeout);
startButton.style.display = "inline-block";
alert("You completed the game in time!");
}
function startGame () {
if (timeout) { clearTimeout(timeout); }
timer = 0;
timeContainer.innerText = timer;
this.style.display = "none";
count();
}
document.getElementById("start-game").addEventListener("click", startGame);
document.getElementById("end-game").addEventListener("click", endGame);
})();
<h3>Timer: <span id="timer-value">0</span></h3>
<button id="start-game">Start Game</button> <button id="end-game">End Game</button>

I'm trying to add previous and next arrows to this content slider

Currently there are circles at the bottom that can be used to navigate between slides. I would like to add next and previous arrows to the sides that the user can click on to proceed forwards or back through the slides.
CSS:
#wrapper {
width: 2000px;
position: relative;
left: 0px;
transition: left 0.6s ease-in-out;
}
.content {
float: left;
width: 500px;
height: 300px;
white-space: normal;
background-repeat: no-repeat;
}
#contentContainer {
width: 500px;
height: 300px;
overflow: hidden;
}
#navLinks {
margin-top:-61px;
position:relative;
text-align: center;
width: 500px;
}
#navLinks ul {
margin: 0px;
padding: 0px;
display: inline-block;
margin-top: 6px;
}
#navLinks ul li {
float: left;
text-align: center;
margin: 10px;
list-style: none;
cursor: pointer;
background-color: rgba(204,204,204,0.8);
padding: 10px;
border-radius: 50%;
}
#navLinks ul li:hover {
background-color: #FFF;
}
#navLinks ul li.active {
background-color: rgba(156,227,100,0.9);
color: #FFFFFF;
}
#navLinks ul li.active:hover {
background-color: red;
color:#FFF;
}
#itemOne {
background-image: url("http://telcospace.com/wp-content/uploads/2013/02/android_eating_apple_1000x500_by_crus23-d38bpx9-640x300.jpg");
}
#itemTwo {
background-image: url("http://www.thetimesofhealth.com/wp-content/uploads/2014/08/Angry-Baby-Face-500x300.jpg");
}
#itemThree {
background-image: url("http://animalsugar.com/wp-content/uploads/2014/10/baby-cat-hd-wallpapers-baby-cat-widescreen.jpg");
}
#itemFour {
background-image: url("http://cuteimages.net/data/2015/5/the-first-puppy-to-leave-me-speechless-name-cuteimages.net.png");
}
HTML:
<div id="contentContainer">
<div id="wrapper">
<div id="itemOne" class="content">
</div>
<div id="itemTwo" class="content">
</div>
<div id="itemThree" class="content">
</div>
<div id="itemFour" class="content">
</div>
</div>
</div>
<div id="navLinks">
<ul>
<li class="itemLinks" data-pos="0px"></li>
<li class="itemLinks" data-pos="-500px"></li>
<li class="itemLinks" data-pos="-1000px"></li>
<li class="itemLinks" data-pos="-1500px"></li>
</ul>
</div>
JavaScript:
var links = document.querySelectorAll(".itemLinks");
var wrapper = document.querySelector("#wrapper");
var activeLink = 0;
for (var i = 0; i < links.length; i++) {
var link = links[i];
link.addEventListener('click', setClickedItem, false);
link.itemID = i;
}
links[activeLink].classList.add("active");
function setClickedItem(e) {
removeActiveLinks();
resetTimer();
var clickedLink = e.target;
activeLink = clickedLink.itemID;
changePosition(clickedLink);
}
function removeActiveLinks() {
for (var i = 0; i < links.length; i++) {
links[i].classList.remove("active");
}
}
function changePosition(link) {
link.classList.add("active");
var position = link.getAttribute("data-pos");
wrapper.style.left = position;
}
var timeoutID;
function startTimer() {
timeoutID = window.setInterval(goToNextItem, 2963);
}
startTimer();
function resetTimer() {
window.clearInterval(timeoutID);
startTimer();
}
function goToNextItem() {
removeActiveLinks();
if (activeLink < links.length - 1) {
activeLink++;
} else {
activeLink = 0;
}
var newLink = links[activeLink];
changePosition(newLink);
}
Here is the JSFiddle http://jsfiddle.net/stormbloom/2d0a1215/
I would like to learn this for personal experience, otherwise I would just use a plugin like WowSlider. If it's easier to do this by building a new slider from scratch then any links to resources explaining how to accomplish this would also be appreciated.

This is an approach with arrows, just tweak with the design.
In the HTML I added the correspoding arrows, and in the JS I added the EventListeners and the function goToPreviousItem() at the end.
var links = document.querySelectorAll(".itemLinks");
var wrapper = document.querySelector("#wrapper");
document.querySelector('#previous').addEventListener('click', goToPreviousItem, false);
document.querySelector('#next').addEventListener('click', goToNextItem, false);
var activeLink = 0;
for (var i = 0; i < links.length; i++) {
var link = links[i];
link.addEventListener('click', setClickedItem, false);
link.itemID = i;
}
links[activeLink].classList.add("active");
function setClickedItem(e) {
removeActiveLinks();
resetTimer();
var clickedLink = e.target;
activeLink = clickedLink.itemID;
changePosition(clickedLink);
}
function removeActiveLinks() {
for (var i = 0; i < links.length; i++) {
links[i].classList.remove("active");
}
}
function changePosition(link) {
link.classList.add("active");
var position = link.getAttribute("data-pos");
wrapper.style.left = position;
}
var timeoutID;
function startTimer() {
timeoutID = window.setInterval(goToNextItem, 2963);
}
//startTimer();
function resetTimer() {
window.clearInterval(timeoutID);
startTimer();
}
function goToNextItem() {
removeActiveLinks();
if (activeLink < links.length - 1) {
activeLink++;
} else {
activeLink = 0;
}
var newLink = links[activeLink];
changePosition(newLink);
}
function goToPreviousItem() {
removeActiveLinks();
if(activeLink == 0) {
activeLink = links.length - 1;
} else {
activeLink--;
}
var newLink = links[activeLink];
changePosition(newLink);
}
#wrapper {
width: 2000px;
position: relative;
left: 0px;
transition: left 0.6s ease-in-out;
}
.content {
float: left;
width: 500px;
height: 300px;
white-space: normal;
background-repeat: no-repeat;
}
#outsideContainer {
width: 600px;
}
#previous {
width: 50px;
display: inline-block;
text-align: center;
float: left;
margin-top: 150px;
}
#next {
width: 50px;
display: inline-block;
text-align: center;
float: right;
margin-top: 150px;
}
#contentContainer {
width: 500px;
height: 300px;
overflow: hidden;
display: inline-block;
}
#navLinks {
margin-top:-61px;
position:relative;
text-align: center;
width: 600px;
}
#navLinks ul {
margin: 0px;
padding: 0px;
display: inline-block;
margin-top: 6px;
}
#navLinks ul li {
float: left;
text-align: center;
margin: 10px;
list-style: none;
cursor: pointer;
background-color: rgba(204,204,204,0.8);
padding: 10px;
border-radius: 50%;
border:rgba(255,255,255,0.9) 1px solid;
box-shadow: 0 0 4px #fff;
}
#navLinks ul li:hover {
background-color: #FFF;
box-shadow: 0 0 10px #fff;
border:rgba(255,255,255,0.6) 1px solid;
}
#navLinks ul li.active {
background-color: rgba(156,227,100,0.9);
color: #FFFFFF;
outline-width: 1px;
}
#navLinks ul li.active:hover {
background-color: rgba(255,255,255,0.7);
color: #FFFFFF;
box-shadow: 0 0 10px #fff;
border:rgba(255,255,255,0.9) 1px solid;
}
#itemOne {
background-color: #000;
background-image: url("http://telcospace.com/wp-content/uploads/2013/02/android_eating_apple_1000x500_by_crus23-d38bpx9-640x300.jpg");
}
#itemTwo {
background-color: #fff;
background-image: url("http://www.thetimesofhealth.com/wp-content/uploads/2014/08/Angry-Baby-Face-500x300.jpg");
}
#itemThree {
background-color: #fff;
background-image: url("http://animalsugar.com/wp-content/uploads/2014/10/baby-cat-hd-wallpapers-baby-cat-widescreen.jpg");
}
#itemFour {
background-color: #fff;
background-image: url("http://images5.fanpop.com/image/photos/28100000/Katy-Perry-gifs-katy-perry-28147211-500-300.gif");
}
<div id="outsideContainer">
<div id="previous"><<</div>
<div id="contentContainer">
<div id="wrapper">
<div id="itemOne" class="content"></div>
<div id="itemTwo" class="content"></div>
<div id="itemThree" class="content"></div>
<div id="itemFour" class="content"></div>
</div>
</div>
<div id="next">>></div>
</div>
<div id="navLinks">
<ul>
<li class="itemLinks" data-pos="0px"></li>
<li class="itemLinks" data-pos="-500px"></li>
<li class="itemLinks" data-pos="-1000px"></li>
<li class="itemLinks" data-pos="-1500px"></li>
</ul>
</div>

Scroll full page

Here's a little code I wrote that would not use fullpage.js
I want to change it to scrollTop instead of position relative and "top": -_.index() * 100 + "%" with overflow:hidden
Please tell me how to do it. I attached the top menu (header-bg) and a search-wrapper.
New JSFiddle
JQuery:
$(document).ready(function() {
onLoad();
NavAnimation();
DesktopResize();
$("body").css({
overflow: 'hidden'
});
/*$(window).bind('scroll', function() {
if ($(window).scrollTop() > 726) {
$('.search-wrapper').addClass('fixed');
}
else {
$('.search-wrapper').removeClass('fixed');
}
}); */
});
function DesktopResize(){
$(".section, .fullpage, html, body").css({
height: '100%',
width: '100%'
});
}
function NavAnimation(){
scroll.call(active, true);
}
var active = null;
function scroll(silent){
var _;
if (active === null) {
_ = $(".section").first();
} else {
active.removeClass("active");
_ = $(this);
}
if (_.length === 0) return;
if (active !== null || silent === false) {
$(".fullpage").animate({"top": -_.index() * 100 + "%"}, 1000);
}
active = _;
}
function onLoad() {
$(".navigation li").click(scroll);
scroll();
}
var wheel = true;
window.addEventListener('wheel', function(event) {
if (wheel) {
wheel = false;
if (event.deltaY > 0) {
scroll.call(active.next());
} else {
scroll.call(active.prev());
}
setTimeout(function () {
wheel = true;
}, 1000)
}
});
window.addEventListener('mousewheel', function(event) {
if (wheel) {
wheel = false;
if (event.wheelDelta < 0) {
scroll.call(active.next());
} else {
scroll.call(active.prev());
}
setTimeout(function () {
wheel = true;
}, 1000)
}
});
HTML:
<div class="header-bg">
<div class="header-content">
<div class="navigation">
<ul>
<li id="NavWho">Rules</li>
<li id="NavMission">Arrivante Miles</li>
<li id="NavApproach">Prices</li>
</ul>
</div>
</div>
</div>
<div id="fullpage" class="fullpage">
<div class="section">
<br>
<br><br>
<br>
<div class="search-wrapper">
<div class="explain">Type your initial<br> flight number here:</div>
<div class="input">
<input type="text" placeholder="Example: FR22">
</div>
<div class="button">
<button class="search">Book transfer</button>
</div>
</div>
</div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
</div>
CSS:
html, body {
background: #d8e6e3;
position: relative;
}
.section{
height: 100% !important;
width: 100%;
}
.header-bg{
background: #242928;
color: #879996;
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 500;
}
.header-bg .header-content{
max-width: 1800px;
margin: 0 auto;
font-family: "HelveticaNeue-roman";
text-transform: uppercase;
}
.header-content .login{
background: url("../image/login-ico.png") no-repeat;
background-position: 0 0;
height: 15px;
width: auto;
padding: 0px 0 0 35px;
margin: 25px 0 0 30px;
float: left;
cursor: pointer;
}
.header-content .navigation{
margin: 0 auto;
max-width: 486px;
}
.header-content .navigation ul{
list-style-type: none;
font-size: 0;
}
.header-content .navigation ul li{
display: inline-block;
font-size: 14px;
padding: 25px 25px 25px 25px;
cursor: pointer;
}
.fullpage{
position: relative;
}
.section{
padding: 66px 0 0 0;
margin: 0 auto;
max-width: 1800px;
}
.section .header-image{
position: relative;
}
.section .header-image .header-bg-image{
width: 100%;
height: 659px;
background: url("../image/head-1.jpg") no-repeat;
background-position: center center;
background-size: cover;
}
.section .header-image .main-logo{
position: absolute;
top: 50%;
left: 50%;
margin: -100px 0 0 -120px;
}
.section .search-wrapper{
font-size: 0;
position: relative;
}
.search-wrapper .explain,
.search-wrapper .input,
.search-wrapper .button{
display: inline-block;
vertical-align: top;
}
.search-wrapper .explain{
padding: 26px 0 22px 24px;
font-family: "HelveticaNeue-roman";
font-size: 14px;
line-height: 16px;
color: #586664;
text-transform: uppercase;
background: #fffce5;
width: calc(20% - 24px);
}
.search-wrapper .input{
width: 60%;
font-size: 14px;
}
.search-wrapper .input input{
border: none;
padding: 26px 0 11px 26px;
font-size: 36px;
line-height: 36px;
color: #bcccc9;
width: calc(100% - 26px);
font-family: "HelveticaNeue-thin";
}
.search-wrapper .button{
width: 20%;
height: 100%;
font-size: 14px;
font-family: "HelveticaNeue-roman";
}
.search-wrapper .button .search{
font-family: "HelveticaNeue-roman";
font-size: 32px;
line-height: 32px;
color: #fff;
background: #ff4255;
width: 100%;
height: 80px;
border: none;
cursor: pointer;
outline: none;
}

OK still not really sure what you exactly want but have a look here:
$(document).ready(function () {
$(".navigation li").click(function () {
activeSection = $(this).index();
scrollMeToSection();
});
var activeSection = 0;
var wheel = true;
function scrollMeToSection() {
$('body').animate({
scrollTop: ($(window).height() * activeSection)
}, '1000', 'swing', function () {
// can do something when finishes animating here.
});
}
$(window).on('mousewheel DOMMouseScroll', function (event) {
console.log(event);
event.preventDefault();
event.stopPropagation();
if (wheel) {
wheel = false;
var goingUp = event.originalEvent.deltaY > 0 ? false : true;
if (activeSection === 0 && goingUp) {
wheel = true;
return;
}
activeSection = goingUp ? (activeSection - 1) : (activeSection + 1);
if (activeSection == $('.section').length) {
activeSection = $('.section').length - 1;
}
scrollMeToSection();
setTimeout(function () {
wheel = true;
}, 1000);
}
});
});
Demo:http://jsfiddle.net/robschmuecker/yYJ3z/
This works on mousewheel scroll but not on scroll-bar scroll (which is a more than somewhat complex process to manage).