We Keep Coding

Not smoothly changed img when mouseover on li

When I hover on some li - img in slideshow changed fast. And after 7 seconds img changed to the next img not correctly. Should be smoothly slideshow with adding class="hover" to the next li which after my hover. But I don't know how to make that
https://jsfiddle.net/maplol/1g3Lz5mw/1/
let nextBackground = null;
let timestop = 7000;
let active;
let next;
//when mouse move or not
nextBackground = setInterval(cycleImages, timestop);
$(document).on({
mousemove: function() {
if (nextBackground !== null) {
clearInterval(nextBackground);
}
nextBackground = setInterval(cycleImages, timestop);
},
mouseout: function() {
if (nextBackground !== null) {
clearInterval(nextBackground);
}
nextBackground = setInterval(cycleImages, timestop);
},
mousein: function() {
if (nextBackground !== null) {
clearInterval(nextBackground);
}
nextBackground = setInterval(cycleImages, timestop);
},
});
$(".navigate li")
.eq(0)
.append('<img src="/image/mainscl.svg"/>')
.children("a")
.addClass("hover");
let i = 1;
//slider - slideshow
$("#slider").hide();
function cycleImages() {
$(".navigate li").find("img").remove();
i = i > $(".navigate li").length - 1 ? 0 : i;
$(".navigate li").find("img").fadeOut();
$(".navigate li").children("a").removeClass("hover");
$(".navigate li")
.eq(i)
.append('<img src="/image/mainscl.svg"/>')
.fadeIn()
.children("a")
.addClass("hover");
//slideshow for img
active = $("#slider .active");
next =
$("#slider .active").next().length > 0 ?
$("#slider .active").next() :
$("#slider img:first");
next.css("z-index", -2);
active.fadeOut(1500, function() {
active.css("z-index", -3).show().removeClass("active");
next.css("z-index", -1).addClass("active");
});
i++;
}
$("#slider").fadeIn(1500);
let chosen_li = [];
let m = 0;
$(".navigate li")
.children("a")
.on("mouseover", function() {
$(".navigate li").children("a").removeClass("hover");
let li = $(this);
$(".navigate li").find("img").remove();
li.parents("li").append('<img src="/image/mainscl.svg"/>').fadeIn(100);
li.addClass("hover");
let index_li = li.parents("li").index();
chosen_li.unshift(index_li);
if (chosen_li.length > 2) {
chosen_li.pop();
}
if (chosen_li[1] !== chosen_li[0]) {
$(".navigate li").eq(chosen_li[1]).children("a").removeClass("hover");
next = $("#slider img").eq(chosen_li[1]).addClass("active");
}
i = chosen_li[0] + 1;
////I have issue with that -------------------------------------------------------------
$("#slider img").hide().removeClass("active");
active = $("#slider img").eq(chosen_li[0]);
active.addClass("active")
next.css("z-index", -2);
active.fadeOut(1500, function() {
active.css("z-index", -3).show().removeClass("active");
next.css("z-index", -1).addClass("active");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<div id="slider">
<img class="active" src="https://cdn.pixabay.com/photo/2019/05/21/07/11/cat-4218424_960_720.jpg" alt="back">
<img src="https://cdn.pixabay.com/photo/2020/08/12/07/09/landscape-5481816_960_720.jpg" alt="back">
<img src="https://cdn.pixabay.com/photo/2019/09/11/02/23/hongkong-4467663_960_720.jpg" alt="back">
<img src="https://cdn.pixabay.com/photo/2020/11/10/18/09/boy-5730628_960_720.jpg" alt="back">
<img src="https://cdn.pixabay.com/photo/2020/11/18/22/38/lake-5756911_960_720.jpg" alt="back">
<img src="https://cdn.pixabay.com/photo/2019/07/05/12/35/yellow-4318482_960_720.jpg" alt="back">
</div>
<main>
<ul class="navigate">
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
<li><a>4</a></li>
<li><a>5</a></li>
<li><a>6</a></li>
</ul>
</main>
</section>
section {
height: 100vh;
display: flex;
}
#slider {
z-index: -4;
position: absolute;
width: 100%;
height: 100%;
}
#slider img {
position: absolute;
z-index: -3;
width: 100%;
height: 100%;
}
#slider img.active {
z-index: -1;
}
.catalog_text {
cursor: pointer;
}
main {
width: 1200px;
margin-left: auto;
margin-right: auto;
}
.navigate li a {
font-family: Geometria;
font-style: normal;
font-weight: bold;
font-size: 14px;
line-height: 42px;
text-transform: uppercase;
color: #ffffff;
cursor: pointer;
}
.navigate li a.hover {
color: #0d9b8a;
}
.navigate {
margin-top: 300px;
}
.navigate li img {
vertical-align: middle;
margin-left: 10px;
}

When i changed position of functions why doesn't it work with javascript closure?

I'm a new javascript, let me direct to the point. I have heard that we have to avoid global variables as much as we can, so, i learn to use closure for make sure that variables can not access to each other.
I have slideShow function which is on the top and toggleMenu function on the bottom, these functions are work fine in my webpage.
My problems is when i changed position of functions, slideShow function to the bottom and toggleMenu function to the top, my webpage it looks not fine, doesn't work properly
May be there is something that i don't know? or i did something wrong? if any one would give me some advices i would appreciate that, thank you.
Here is original code
var slideShow = (function () {
var slideImages = document.getElementsByClassName("slide");
var leftSide = document.getElementById("arrow-left");
var rightSide = document.getElementById("arrow-right");
var slideBullets = document.getElementsByClassName("bullets");
var current = 0;
function reset() {
for (let i = 0; i < slideImages.length; i++) {
slideImages[i].style.display = 'none';
slideBullets[i].classList.remove("clicked");
}
};
function showImages() {
for (let i = 0; i < slideImages.length; i++) {
slideImages[0].style.display = 'block';
slideBullets[current].classList.add("clicked");
}
};
function arrowSlide() {
leftSide.addEventListener("click", function () {
reset();
if (current === 0) {
current = slideImages.length;
}
slideImages[current - 1].style.display = 'block';
current--;
slideBullets[current].classList.add("clicked");
});
rightSide.addEventListener("click", function () {
reset();
if (current === slideImages.length - 1) {
current = - 1;
}
slideImages[current + 1].style.display = 'block';
current++;
slideBullets[current].classList.add("clicked");
});
};
function showBulletsImages() {
for (let i = 0; i < slideBullets.length; i++) {
slideBullets[i].addEventListener("click", function () {
reset();
slideImages[i].style.display = 'block';
slideBullets[i].classList.add("clicked");
current = i;
});
}
};
function autoSlide() {
setInterval(function () {
rightSide.click();
slideBullets[current].classList.add('clicked')
}, 2000);
};
return {
reset: reset(),
showImages: showImages(),
arrowSlide: arrowSlide(),
showBulletsImages: showBulletsImages(),
autoSlide: autoSlide()
};
})();
var toggleMenu = (function () {
var mainTopics = document.getElementById("maintopics");
mainTopics.addEventListener("click", function (e) {
e.preventDefault();
e.stopImmediatePropagation();
mainTopics.classList.toggle("show");
});
document.addEventListener("click", function (e) {
if (e.target.id !== 'arrow-right') {
mainTopics.classList.remove("show");
}
});
return {
toggleMenu: toggleMenu()
};
})();
body {
margin: 0;
}
li, a{
text-decoration: none;
list-style-type: none;
text-decoration-line: none;
color: black;
}
/*main-menu*/
#mainmenu {
position: relative;
}
#mainmenu ul {
margin: 0;
padding: 0;
}
#mainmenu li {
display: inline-block;
}
#mainmenu a {
display: block;
width: 100px;
padding: 10px;
border: 1px solid;
text-align: center;
}
/*sub-topics*/
#subtopics {
position: absolute;
display: none;
margin-top: 10px;
width: 100%;
left: 0;
}
#maintopics.show #subtopics {
display: block;
}
#subtopics ul {
margin: 0;
padding: 0;
}
#subtopics 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*/
#mainmenu 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 {
position: absolute;
border-width: 30px 40px 30px 0px;
border-color: transparent gray transparent transparent;
left: 0;
margin-left: 300px;
}
#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;
}
.clicked {
background-color: #ff0000;
}
<!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="mainmenu">
<ul>
<li>Logo</li>
<li>Home</li>
<li id="maintopics">Topics
<div id="subtopics">
<div id="column1" class="columns">
<ul>
<li>example1</li>
<li>example2</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</nav>
<div id="slideshow">
<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-left" class="arrow"></div>
<div id="arrow-right" class="arrow"></div>
</div>
<script src="jquery.js"></script>
<script src="index.js"></script>
<script>
</script>
</body>
</html>
Then i changed position of functions
var toggleMenu = (function () {
var mainTopics = document.getElementById("maintopics");
mainTopics.addEventListener("click", function (e) {
e.preventDefault();
e.stopImmediatePropagation();
mainTopics.classList.toggle("show");
});
document.addEventListener("click", function (e) {
if (e.target.id !== 'arrow-right') {
mainTopics.classList.remove("show");
}
});
return {
toggleMenu: toggleMenu()
};
})();
var slideShow = (function () {
var slideImages = document.getElementsByClassName("slide");
var leftSide = document.getElementById("arrow-left");
var rightSide = document.getElementById("arrow-right");
var slideBullets = document.getElementsByClassName("bullets");
var current = 0;
function reset() {
for (let i = 0; i < slideImages.length; i++) {
slideImages[i].style.display = 'none';
slideBullets[i].classList.remove("clicked");
}
};
function showImages() {
for (let i = 0; i < slideImages.length; i++) {
slideImages[0].style.display = 'block';
slideBullets[current].classList.add("clicked");
}
};
function arrowSlide() {
leftSide.addEventListener("click", function () {
reset();
if (current === 0) {
current = slideImages.length;
}
slideImages[current - 1].style.display = 'block';
current--;
slideBullets[current].classList.add("clicked");
});
rightSide.addEventListener("click", function () {
reset();
if (current === slideImages.length - 1) {
current = - 1;
}
slideImages[current + 1].style.display = 'block';
current++;
slideBullets[current].classList.add("clicked");
});
};
function showBulletsImages() {
for (let i = 0; i < slideBullets.length; i++) {
slideBullets[i].addEventListener("click", function () {
reset();
slideImages[i].style.display = 'block';
slideBullets[i].classList.add("clicked");
current = i;
});
}
};
function autoSlide() {
setInterval(function () {
rightSide.click();
slideBullets[current].classList.add('clicked')
}, 2000);
};
return {
reset: reset(),
showImages: showImages(),
arrowSlide: arrowSlide(),
showBulletsImages: showBulletsImages(),
autoSlide: autoSlide()
};
})();

The issue seems to be with this
return {
toggleMenu: toggleMenu()
};
inside the toggleMenu immediately invoking function . This IIFE does not have any toggleMenu function
Beside return like
return {
reset: reset(),
showImages: showImages(),
arrowSlide: arrowSlide(),
showBulletsImages: showBulletsImages(),
autoSlide: autoSlide()
};
is not appropriate ,replace it with the following
There is no reason tha slideShow has to IIFE
return {
reset: reset,
showImages: showImages,
arrowSlide: arrowSlide,
showBulletsImages: showBulletsImages,
autoSlide: autoSlide
};
Here is a working demo at stackblitz

How to replace timer pagination with progress bars using slick slider

So, I'm trying to copy apple.com style of carousel. I wanted to have timer pagination so so far I have this much done: jsfiddle
How can I replace pagination buttons with progress bars? Here is what I have so far:
$(document).ready(function() {
var time = 2;
var $bar,
$slick,
isPause,
tick,
percentTime;
$slick = $('.slider');
$slick.slick({
draggable: true,
adaptiveHeight: false,
dots: true,
mobileFirst: true,
pauseOnDotsHover: true,
});
$bar = $('.slider-progress .progress');
$('.slider-wrapper').on({
mouseenter: function() {
isPause = true;
},
mouseleave: function() {
isPause = false;
}
})
function startProgressbar() {
resetProgressbar();
percentTime = 0;
isPause = false;
tick = setInterval(interval, 10);
}
function interval() {
if (isPause === false) {
percentTime += 1 / (time + 0.1);
$bar.css({
width: percentTime + "%"
});
if (percentTime >= 100) {
$slick.slick('slickNext');
startProgressbar();
}
}
}
function resetProgressbar() {
$bar.css({
width: 0 + '%'
});
clearTimeout(tick);
}
startProgressbar();
});
.slider-wrapper {
width: 600px;
}
.slider {
width: 600px;
height: 400px;
border: 1px solid #000;
}
.slide {
width: 100%;
height: 398px;
background: #ccc;
}
#slick-1 .slick-dots li {
width: 40px;
height: 5px;
background: #ccc;
}
#slick-1 .slick-dots li button {
width: 40px;
height: 5px;
}
#slick-1 .slick-dots li.slick-active,
#slick-1 .slick-dots li:hover {
background: #777;
}
#slick-1 .slick-dots li button,
#slick-1 .slick-dots li button:before {
color: transparent;
opacity: 0;
}
/* progress bar */
.slider-progress {
width: 100%;
height: 3px;
background: #eee;
}
.slider-progress .progress {
width: 0%;
height: 3px;
background: #000;
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" rel="stylesheet"/>
<div class="slider-wrapper" id="slick-1">
<div class="slider">
<div class="slide">slider #1</div>
<div class="slide">slider #2</div>
<div class="slide">slider #3</div>
</div>
<div class="slider-progress">
<div class="progress"></div>
</div>
</div>

Just had to do this for my company yesterday.
It was a bit trickier because slick is implemented on our website with 2 transitions : swipe if we use the mouse, fade if we don't..
Anyway, I remembered your post when i was digging a bit yesterday so I made it simpler here.
$(".slider").slick({
infinite: true,
arrows: false,
dots: false,
autoplay: false,
speed: 800,
slidesToShow: 1,
slidesToScroll: 1,
});
//ticking machine
var percentTime;
var tick;
var time = 1;
var progressBarIndex = 0;
$('.progressBarContainer .progressBar').each(function(index) {
var progress = "<div class='inProgress inProgress" + index + "'></div>";
$(this).html(progress);
});
function startProgressbar() {
resetProgressbar();
percentTime = 0;
tick = setInterval(interval, 10);
}
function interval() {
if (($('.slider .slick-track div[data-slick-index="' + progressBarIndex + '"]').attr("aria-hidden")) === "true") {
progressBarIndex = $('.slider .slick-track div[aria-hidden="false"]').data("slickIndex");
startProgressbar();
} else {
percentTime += 1 / (time + 5);
$('.inProgress' + progressBarIndex).css({
width: percentTime + "%"
});
if (percentTime >= 100) {
$('.single-item').slick('slickNext');
progressBarIndex++;
if (progressBarIndex > 2) {
progressBarIndex = 0;
}
startProgressbar();
}
}
}
function resetProgressbar() {
$('.inProgress').css({
width: 0 + '%'
});
clearInterval(tick);
}
startProgressbar();
// End ticking machine
$('.progressBarContainer div').click(function () {
clearInterval(tick);
var goToThisIndex = $(this).find("span").data("slickIndex");
$('.single-item').slick('slickGoTo', goToThisIndex, false);
startProgressbar();
});
h3 {
margin:5px 0;
}
.sliderContainer {
position: relative;
}
.slider {
width: 500px;
margin: 30px 50px 50px;
}
.slick-slide {
background: #3a8999;
color: white;
padding: 80px 0 120px;
font-size: 30px;
font-family: "Arial", "Helvetica";
text-align: center;
}
.slick-prev:before,
.slick-next:before {
color: black;
}
.slick-dots {
bottom: -30px;
}
.slick-slide:nth-child(odd) {
background: #e84a69;
}
.progressBarContainer {
position: absolute;
bottom: 20px;
width:300px;
left:150px;
}
.progressBarContainer div {
display: block;
width: 30%;
padding: 0;
cursor: pointer;
margin-right: 5%;
float: left;
color: white;
}
.progressBarContainer div:last-child {
margin-right: 0;
}
.progressBarContainer div span.progressBar {
width: 100%;
height: 4px;
background-color: rgba(255, 255, 255, 0.4);
display: block;
}
.progressBarContainer div span.progressBar .inProgress {
background-color: rgba(255, 255, 255, 1);
width: 0%;
height: 4px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.js"></script>
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick-theme.css" rel="stylesheet"/>
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css" rel="stylesheet"/>
<div class="sliderContainer">
<div class="slider single-item">
<div>Slide1</div>
<div>Slide2</div>
<div>Slide3</div>
</div>
<div class="progressBarContainer">
<div>
<h3>Slide 1</h3>
<span data-slick-index="0" class="progressBar"></span>
</div>
<div>
<h3>Slide 2</h3>
<span data-slick-index="1" class="progressBar"></span>
</div>
<div>
<h3>Slide 3</h3>
<span data-slick-index="2" class="progressBar"></span>
</div>
</div>
</div>
[codepen][1]
Regards,

I am not entirely entirely familiar with these, but it seems you have been able to get the progressbar running, so it should not be that hard to turn the pagination buttons to progressbars.
What might help is that each of them has an element id (first is "slick-slide00") and the active one has a class "slick-active".
So if you want a hacky solution it might be enough to retrieve "slick-active" element every time the the slide changes (there should be listenable event for that) and turn the element with "slick-active" class into a progress bar.
For a "cleaner" solution you might need to dig into framework itself as the feature doesn't seem to be supported as of now.

Hide images outside of view in image slider

I made an image slider but I have a problem. İf you click the next button, it doesn't hide the image on the left side of the slider.
The code is here :
http://codepen.io/ardazaman/pen/zBGMJX
HTML:
<section id="slider">
<div class="arrow">
<
>
</div>
<div class="slider">
<ul>
<li class="slides"><img src="resimler/resim1.jpg"></li>
<li class="slides"><img src="resimler/resim2.jpg"></li>
<li class="slides"><img src="resimler/resim3.jpg"></li>
<li class="slides"><img src="resimler/resim4.jpg"></li>
</ul>
</div>
</section>
CSS:
section#slider {
margin-left: 150px;
border: 3px solid #333;
width: 1004px;
height: 575px;
position: relative;
}
div.slider {
overflow: hidden;
width: 960px;
}
div.slider ul {
list-style-type: none;
overflow: hidden;
}
div.slider ul li {
width: 960px;
float: left;
}
div.slider ul li img {
width: 960px;
}
div.arrow {
font-size: 50px;
position: absolute;
top: 40%;
}
div.arrow a {
text-decoration: none;
background-color: #333;
color: #999;
display: inline-block;
width: 35px;
height: 70px;
line-height: 70px;
}
div.arrow a:nth-child(1) {
margin-left: 20px;
padding-left: 3px;
}
div.arrow a:nth-child(2) {
margin-left: 870px;
padding-left: 3px;
}
jQuery:
$(document).ready(function() {
var liWidth = $('div.slider ul li').width();
var toplamLi = $('div.slider ul li').length;
var toplamWidth = liWidth * toplamLi;
var liDeger = 0;
$('div.slider ul').css({
width: toplamWidth + "px"
});
$('div.arrow a:nth-child(2)').click(function() {
if (liDeger < toplamLi - 1) {
liDeger++;
toplamWidth = liDeger * liWidth;
$('div.slider ul').animate({
marginLeft: '-' + toplamWidth + "px"
}, 500);
}
return false;
});
$('div.arrow a:nth-child(1)').click(function() {
if (liDeger > 0) {
liDeger--;
toplamWidth = liDeger * liWidth;
$('div.slider ul').animate({
marginLeft: '-' + toplamWidth + "px"
}, 500);
}
return false;
});
});

Changes done only to CSS:
1.
div.slider ul {
margin: 0; padding: 0; //added
}
and 2.
div.slider {
margin: 14px auto 0; //added
}
rest is same
$(document).ready(function() {
var liWidth = $('div.slider ul li').width();
var toplamLi = $('div.slider ul li').length;
var toplamWidth = liWidth * toplamLi;
var liDeger = 0;
$('div.slider ul').css({
width: toplamWidth + "px"
});
$('div.arrow a:nth-child(2)').click(function() {
if (liDeger < toplamLi - 1) {
liDeger++;
toplamWidth = liDeger * liWidth;
$('div.slider ul').animate({
marginLeft: '-' + toplamWidth + "px"
}, 500);
}
return false;
});
$('div.arrow a:nth-child(1)').click(function() {
if (liDeger > 0) {
liDeger--;
toplamWidth = liDeger * liWidth;
$('div.slider ul').animate({
marginLeft: '-' + toplamWidth + "px"
}, 500);
}
return false;
});
});
section#slider {
margin-left: 150px;
border: 3px solid #333;
width: 1004px;
height: 575px;
position: relative;
}
div.slider {
overflow: hidden;
width: 960px;
margin: 14px auto 0;
}
div.slider ul {
list-style-type: none;
overflow: hidden;
margin: 0; padding: 0;
}
div.slider ul li {
width: 960px;
float: left;
}
div.slider ul li img {
width: 960px;
}
div.arrow {
font-size: 50px;
position: absolute;
top: 40%;
}
div.arrow a {
text-decoration: none;
background-color: #333;
color: #999;
display: inline-block;
width: 35px;
height: 70px;
line-height: 70px;
text-align:center;
}
div.arrow a:nth-child(1) {
margin-left: 20px;
padding-left: 3px;
}
div.arrow a:nth-child(2) {
margin-left: 870px;
padding-left: 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="slider">
<div class="arrow">
<a href="#">
‹ </a>
›
</div>
<div class="slider">
<ul>
<li class="slides"><img src="http://i.hizliresim.com/o78oE9.jpg"></li>
<li class="slides"><img src="http://i.hizliresim.com/l1rmEr.jpg"></li>
<li class="slides"><img src="http://i.hizliresim.com/VYXmEv.jpg"></li>
<li class="slides"><img src="http://i.hizliresim.com/nrmZEM.jpg"></li>
</ul>
</div>
</section>
And here's the codepen link on codepen

The easiest would be to keep track of which image you are showing, and hide the rest by CSS. You already know the index of the list item that contains it (liDeger), so you can use that to show the correct image and hide all the others.
The important part is that you want to show the new image as soon as the sliding starts, but only hide the previous one after the sliding ends.
So for example the "next" arrow:
$('div.arrow a:nth-child(2)').click(function() {
if (liDeger < toplamLi - 1) {
liDeger++;
// Add "active" class to next image
var activeLi = $('.slider li').eq(liDeger);
activeLi.addClass('active');
toplamWidth = liDeger * liWidth;
$('div.slider ul').animate({
marginLeft: '-' + toplamWidth + "px"
}, 500, function() {
// Remove "active" class from previous image after the animation
activeLi.prev().removeClass('active') ;
});
}
return false;
});
And the "previous" arrow goes the other way
$('div.arrow a:nth-child(1)').click(function() {
if (liDeger > 0) {
liDeger--;
// Add "active" class to previous image
var activeLi = $('.slider li').eq(liDeger);
activeLi.addClass('active');
toplamWidth = liDeger * liWidth;
$('div.slider ul').animate({
marginLeft: '-' + toplamWidth + "px"
}, 500, function() {
// Remove "active" class from next image after the animation
activeLi.next().removeClass('active') ;
});
}
return false;
});
Then all you need is some CSS to hide everything but the active image:
div.slider ul li {
visibility: hidden;
}
div.slider ul li.active {
visibility: visible;
}
And add a "active" class to the first list item in the HTML:
<div class="slider">
<ul>
<li class="slides active"><img src="resimler/resim1.jpg"></li>
...
</div>
Working example:
http://codepen.io/anon/pen/RRPEWg

How to create a slideshow timer and add functioning tabs

I've tried various different things to implement this but nothing seems to work for me i am trying to make the current progress bar have functionality e.g goes according to when each slide changes, and also add tabs that will allow a user to jump to a slide on click.
Demo Fiddle
Html
<div class="omega_player">
<ul class="omega_slides">
<li>SLIDE 1</li>
<li style="background: #aaa;">SLIDE 2</li>
<li>SLIDE 3</li>
<li style="background: #aaa;">SLIDE 4</li>
</ul>
<ul class="omega_controls">
<div class="omega_timer"><div class="progress"></div></div>
<div class="omega_set">
<a onclick="return false" class="control_prev"><i class="fa fa-angle-left"></i></a>
<a onclick="return false" class="control_play"><i class="fa fa-play"></i></a>
<a onclick="return false" class="control_pause"><i class="fa fa-pause"></i></a>
<a onclick="return false" class="control_next"><i class="fa fa-angle-right"></i></a>
</div>
</ul>
</div>
JS
jQuery(document).ready(function ($) {
timer = setInterval(function () {
moveRight();
}, 8000);
var slideCount = $('.omega_player>.omega_slides>li').length;
var slideWidth = $('.omega_player>.omega_slides>li').width();
var slideHeight = $('.omega_player>.omega_slides>li').height();
var sliderUlWidth = slideCount * slideWidth;
$('.omega_player').css({ width: slideWidth, height: slideHeight });
$('.omega_player>.omega_slides').css({ width: sliderUlWidth, marginLeft: - slideWidth });
$('.omega_player>.omega_slides>li:last-child').prependTo('.omega_player>.omega_slides');
function moveLeft() {
$('.omega_player>.omega_slides').animate({
left: + slideWidth
}, 200, function () {
$('.omega_player>.omega_slides>li:last-child').prependTo('.omega_player>.omega_slides');
$('.omega_player>.omega_slides').css('left', '');
});
};
function moveRight() {
$('.omega_player>.omega_slides').animate({
left: - slideWidth
}, 200, function () {
$('.omega_player>.omega_slides>li:first-child').appendTo('.omega_player>.omega_slides');
$('.omega_player>.omega_slides').css('left', '');
});
};
$('.omega_player>.omega_controls>.omega_set>.control_prev').click(function () {
clearInterval(timer);
$('.omega_player>.omega_controls>.omega_set>.control_play').show();
$('.omega_player>.omega_controls>.omega_set>.control_pause').hide();
moveLeft();
});
$('.omega_player>.omega_controls>.omega_set>.control_next').click(function () {
clearInterval(timer);
$('.omega_player>.omega_controls>.omega_set>.control_play').show();
$('.omega_player>.omega_controls>.omega_set>.control_pause').hide();
moveRight();
});
$('.omega_player>.omega_controls>.omega_set>.control_play').click(function () {
$('.omega_player>.omega_controls>.omega_set>.control_play').hide();
$('.omega_player>.omega_controls>.omega_set>.control_pause').show();
moveRight();
timer = setInterval(function () {
moveRight();
}, 8000);
});
$('.omega_player>.omega_controls>.omega_set>.control_pause').click(function () {
clearInterval(timer);
$('.omega_player>.omega_controls>.omega_set>.control_play').show();
$('.omega_player>.omega_controls>.omega_set>.control_pause').hide()
});
return timer;
});
CSS
.omega_player {
position: relative;
overflow: hidden;
margin: 0 auto;
width: 950px;
border-radius: 4px;
}
.omega_player>.omega_slides {
position: relative;
margin: 0;
padding: 0;
height: 450px;
list-style: none;
}
.omega_player>.omega_slides>li {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
width: 950px;
height: 450px;
background: #ccc;
text-align: center;
line-height: 300px;
}
.omega_player>.omega_controls {
bottom: 0;
left: 0;
right: 0;
height: 50px;
margin: 0;
padding: 0;
background: #333;
background: rgba(51,51,51,.8);
position: absolute;
z-index: 2;
width: 100%;
}
.omega_player>.omega_controls>.omega_set {
position: absolute;
right: 20px;
}
.omega_player>.omega_controls>li>.control_prev,
.omega_player>.omega_controls>li>.control_next {
position: absolute;
top: 40%;
z-index: 999;
display: block;
padding: 4% 3%;
width: auto;
height: auto;
background: #2a2a2a;
color: #fff;
text-decoration: none;
font-weight: 600;
font-size: 18px;
opacity: 0.8;
cursor: pointer;
}
.omega_player>.omega_controls>li>.control_prev:hover,
.omega_player>.omega_controls>li>.control_next:hover {
opacity: 1;
-webkit-transition: all 0.2s ease;
}
.omega_player>.omega_controls>li>.control_prev {
border-radius: 0 2px 2px 0;
}
.omega_player>.omega_controls>li>.control_next {
right: 0;
border-radius: 2px 0 0 2px;
}
.omega_player>.omega_controls>li>.control_play,
.omega_player>.omega_controls>li>.control_pause {
background-color: green;
color: #fff;
padding: 10px;
}
.omega_player>.omega_controls>li>.control_play {
display: none!important;
}
.omega_player>.omega_controls>.omega_set>a {
color: #FFF;
color: rgba(250,250,250,.95);
font-size: 20px;
vertical-align: middle;
padding: 10px;
display: inline-block;
cursor: pointer;
}
.omega_player>.omega_controls>.omega_set>:hover {
background: rgba(0,0,0,0.2);
color: #FFF;
}
.omega_player>.omega_controls>.omega_set>.control_prev,
.omega_player>.omega_controls>.omega_set>.control_next,
.omega_player>.omega_controls>.omega_set>.control_play,
.omega_player>.omega_controls>.omega_set>.control_pause {
font-size: 45px;
line-height: 0;
margin: 0;
height: 50px;
width: 50px;
padding: 0;
text-align: center;
transition: .1s ease-in-out;
border: 1px solid #FFF;
border-color: rgba(250,250,250,0.65);
border-top: 0;
border-bottom: 0;
float: left;
}
.omega_player>.omega_controls>.omega_set>.control_play,
.omega_player>.omega_controls>.omega_set>.control_pause {
border:0;
font-size: 25px;
line-height: 48px;
}
.omega_player>.omega_controls>.omega_set>.control_play {
display:none;
}
.omega_player>.omega_controls>.omega_timer {
background: #333;
background: rgba(51,51,51,.9);
height: 4px;
top: -4px;
position: absolute;
left: 0;
right: 0;
width: 100%;
}
.omega_player>.omega_controls>.omega_timer>.progress {
height: 4px;
display: inline-block;
background-color: #EB0000;
background: rgba(235, 0, 0, 0.86);
position: absolute;
width: 60%;
z-index: 999;
}
html,
body {margin:0;padding:0;font-family: sans-serif;font-size: 14px;}
Hope you can help thanks in advance!

Code with 4 Slides and Full Screen DEMO
Code with 8 Slides and Full Screen DEMO
Here you go. I have just written a function which will calculate progressbar's width based on number of elements present and active slide. Below is how the function looks like:
function progress(){
var activeElement=$('li:nth-child(2)').attr('data-slide');
//get the activeElement which will be always as 2nd child as per your code
var width=(increment*activeElement)+'%';
//increment variable will be based on `100/numberofslidespresent`
//each li should have a data-* property, say data-slide here, which will actually
//contain number in incremental order. Now multiply increment and activeElement
//and add % so that it will become something like 25%, 50% everytime.
$('.progress').animate({
'width':width //animate width of progressbar
},300);
}
Here is the complete code:
Html
<div class="omega_player">
<ul class="omega_slides">
<li data-slide="1">SLIDE 1</li>
<li data-slide="2" style="background: #aaa;">SLIDE 2</li>
<li data-slide="3">SLIDE 3</li>
<li data-slide="4" style="background: #aaa;">SLIDE 4</li>
<!--extra property added to each li which data-slide with incremental number-->
</ul>
<ul class="omega_controls">
<div class="omega_timer"><div class="progress"></div></div>
<div class="omega_set">
<a onclick="return false" class="control_prev"><i class="fa fa-angle-left"></i></a>
<a onclick="return false" class="control_play"><i class="fa fa-play"></i></a>
<a onclick="return false" class="control_pause"><i class="fa fa-pause"></i></a>
<a onclick="return false" class="control_next"><i class="fa fa-angle-right"></i></a>
</div>
</ul>
</div>
JS
var increment; // a global variable
jQuery(document).ready(function ($) {
timer = setInterval(function () {
moveRight();
}, 8000);
var slideCount = $('.omega_player>.omega_slides>li').length;
increment=100/slideCount; //get how much to increment parts should be
var slideWidth = $('.omega_player>.omega_slides>li').width();
var slideHeight = $('.omega_player>.omega_slides>li').height();
var sliderUlWidth = slideCount * slideWidth;
$('.omega_player').css({ width: slideWidth, height: slideHeight });
$('.omega_player>.omega_slides').css({ width: sliderUlWidth, marginLeft: - slideWidth });
$('.omega_player>.omega_slides>li:last-child').prependTo('.omega_player>.omega_slides');
progress();//call this function once prepended on page load
function moveLeft() {
$('.omega_player>.omega_slides').animate({
left: + slideWidth
}, 200, function () {
$('.omega_player>.omega_slides>li:last-child').prependTo('.omega_player>.omega_slides').addClass('active');
progress(); //after prepending call it once again
$('.omega_player>.omega_slides').css('left', '');
});
};
function moveRight() {
$('.omega_player>.omega_slides>li').removeClass('active')
$('.omega_player>.omega_slides').animate({
left: - slideWidth
}, 200, function () {
$('.omega_player>.omega_slides>li:first-child').appendTo('.omega_player>.omega_slides');
progress(); //after appending call it once again
$('.omega_player>.omega_slides').css('left', '');
});
};
//Your other functions here remains as it is so I haven't attached them
});
function progress(){
var activeElement=$('li:nth-child(2)').attr('data-slide');
var width=(increment*activeElement)+'%';
$('.progress').animate({
'width':width
},300);
}
CSS
On CSS part I just changed width mentioned for progressbar from 60% to
0%