Simple Carousel Slider start from second slide (javascript)

Simple Carousel Slider start from second slide (javascript) - javascript

I code a simple carousel slider. But I need some help. My carousel slider works well if I am start from first slide. But I want to start from second slide I also can do this with goToSlide(1) inside init function but I do not want to see my first slide sliding left. Here is the simple codepen link (https://codepen.io/ruslancik/pen/QWNKowx?editors=0010). Can someone please help me ?
const slideImage = document.querySelectorAll(".slide-image");
const slidesContainer = document.querySelector(".slides-container");
let slideWidth = slideImage[0].clientWidth;
let currentSlide = 0;
function init() {
slideImage.forEach((img, i) => {
img.style.left = i * 100 + "%";
});
slideImage[0].classList.add("active");
//want to start from second slide
goToSlide(1);
}
init()
function goToSlide(slideNumber) {
slidesContainer.style.transform =
"translateX(-" + slideWidth * slideNumber + "px)";
currentSlide = slideNumber;
}

const slidesContainer = document.querySelector(".slides-container");
const originalSlideImage = document.querySelectorAll(".slide-image");
let isRestored = false;
let isInitialSlideButtonClick = true;
function init() {
const slideImage = originalSlideImage;
let slideWidth = slideImage[0].clientWidth;
let currentSlide = 0;
slideImage.forEach((img, i) => {
img.style.left = i * 100 + "%";
});
let newSlideImage = [...slideImage];
swap(newSlideImage);
newSlideImage.forEach(img => {
slidesContainer.appendChild(img)
});
}
init();
function restoreOriginalSlides() {
if (!isRestored) {
slidesContainer.innerHTML = "";
originalSlideImage.forEach((img, i) => {
img.classList.remove('active')
img.style.left = i * 100 + "%";
slidesContainer.appendChild(img)
});
isRestored = true;
}
}
function swap(slideImageArray) {
let firstSlide = slideImageArray[0];
let desiredFirstSlideIndex = 1;
let desiredFirstSlide = slideImageArray[desiredFirstSlideIndex];
slidesContainer.innerHTML = ""
let tempSlide = firstSlide;
let firstLeftStyle = firstSlide.style.left
let desiredLeftStyle = desiredFirstSlide.style.left
firstSlide = desiredFirstSlide;
firstSlide.style.left = firstLeftStyle;
desiredFirstSlide = tempSlide;
desiredFirstSlide.style.left = desiredLeftStyle;
slideImageArray[0] = firstSlide;
slideImageArray[desiredFirstSlideIndex] = desiredFirstSlide;
}
function goToSlide(slideNumber) {
if (isInitialSlideButtonClick) {
restoreOriginalSlides();
isInitialSlideButtonClick = false;
}
const slideImage = document.querySelectorAll(".slide-image");
let slideWidth = slideImage[0].clientWidth;
let currentSlide = slideNumber;
slideImage.forEach((img, index) => {
index != currentSlide ? img.classList.remove('active') : img.classList.add('active');
})
slidesContainer.style.transform =
"translateX(-" + slideWidth * slideNumber + "px)";
}
body {
margin: 0;
box-sizing: border-box;
background: #222;
}
h1 {
text-align: center;
color: #eee;
font-family: "Roboto Thin", sans-serif;
text-transform: uppercase;
letter-spacing: 8px;
}
.wrapper {
width: 100%;
overflow: hidden;
}
.slides-container {
height: 500px;
transition: 900ms cubic-bezier(0.48, 0.15, 0.18, 1);
position: relative;
}
.slide-image {
height: 100%;
width: 100%;
position: absolute;
}
<div class="wrapper">
<div class="slides-container">
<div class="slide-image">
<h1>1</h1>
</div>
<div class="slide-image active">
<h1>2</h1>
</div>
<div class="slide-image">
<h1>3</h1>
</div>
<div class="slide-image">
<h1>4</h1>
</div>
<div class="slide-image">
<h1>5</h1>
</div>
</div>
</div>
<button onclick='goToSlide(0)'>slide 1</button>
<button onclick='goToSlide(1)'>slide 2</button>
<button onclick='goToSlide(2)'>slide 3</button>
<button onclick='goToSlide(3)'>slide 4</button>
<button onclick='goToSlide(4)'>slide 5</button>
</div>
<div class="navigation-dots"></div>

Related

Using setInterval to create a progress bar

I was hoping a kind soul might be able to assist.
I have a slideshow which auto-plays, my intention is to have the next button act as a visual aid, highlighting the when the next frame is coming in.
sync with the autoPlay interval.
Right now, the update func concludes too early, which is the best I have managed to do. Typically I have the clearInterval and setInterval conflicting creating shuddering animations.
What am I doing wrong?
<!doctype html>
<html lang="en">
<head>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
.carousel_wrapper {
height: 50vh;
width: 100%;
position: relative;
}
.carousel_frame {
width: 100%; height: 100%;
}
.carousel_controls {
position: absolute;
bottom: 0;
left: 0;
}
.prev, .next {
height: 50px;
width: 100px;
background: aqua;
display: inline-block;
}
.next {
background: linear-gradient(to right, white 0%, aqua);
}
.carousel_frame:nth-child(1) {
background: red;
}
.carousel_frame:nth-child(2) {
background: blue;
}
.carousel_frame:nth-child(3) {
background: green;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', () => {
const homepage_carousel = new carousel();
});
function carousel() {
const carousel = document.getElementsByClassName('.carousel_wrapper')[0];
const frames = [...document.getElementsByClassName('carousel_frame')];
const prev_button = document.getElementsByClassName('prev')[0];
const next_button = document.getElementsByClassName('next')[0];
this.frameIndex = 1;
prev_button.addEventListener('click', () => {
this.resetPlay();
this.move(-1);
})
next_button.addEventListener('click', () => {
this.resetPlay();
this.move(+1);
})
this.hideAll = () => {
frames.forEach((f) => {
f.style.display = 'none';
});
}
this.show = () => {
this.hideAll();
frames[this.frameIndex - 1].style.display = 'block';
this.update_bg();
}
this.move = (amount) => {
this.frameIndex += amount;
this.frameIndex = (this.frameIndex > frames.length ? 1 : (this.frameIndex < 1) ? frame.lengh : this.frameIndex);
this.show();
}
this.update_bg = () => {
let w = 1;
let test = setInterval(adjust, 10);
function adjust() {
if (w >= 100) {
clearInterval(test);
w = 0;
} else {
w++;
next_button.style.backgroundImage = `linear-gradient(to right, white ${w}%, aqua)`
}
}
setInterval(adjust, 3000);
}
this.autoPlay = () => {
this.move(+1)
this.update_bg();
}
this.resetPlay = () => {
// clearInterval(timer);
// timer = setInterval(this.autoPlay(), 4000);
}
this.show();
const timer = setInterval(this.autoPlay, 3000);
}
</script>
</head>
<body>
<div class='carousel_wrapper'>
<div class='carousel_frame'>
<span>Headline</span>
<span>Description</span>
<span>CTA</span>
</div>
<div class='carousel_frame'>
<span>Headline</span>
<span>Description</span>
<span>CTA</span>
</div>
<div class='carousel_frame'>
<span>Headline</span>
<span>Description</span>
<span>CTA</span>
</div>
<div class='carousel_controls'>
<span class='prev'>Previous</span>
<span class='next'>
Next
</span>
</div>
</div>
</body>
</html>

ResCarousel Active item how to

I want to change the active starting item to 3 instead of 1s. In short instead of number 1s is active. I want to change it to number 3 staring item or anything if I add active on a class. How Can I achieve that stuff. I'm all over the internet but nothing happens.
Please see below sample of my code html and javascript.
//Small carosel code set here
$(document).ready(function() { ResCarouselOnInit(); });
$(window).resize(function() {
var r = new Date();
setTimeout(function() {
ResCarouselResize(r);
}, 200);
});
function ResCarouselOnInit() {
ResCarouselSize();
$(document).on('click', '.leftRs, .rightRs', function() {
ResCarousel(this);
});
$(document).on("mouseenter", ".ResHover", function() {
$(this).addClass("ResHovered");
});
$(document).on("mouseleave", ".ResHover", function() {
$(this).removeClass("ResHovered");
});
}
// Rescarousel Auto Slide
function ResCarouselSlide(e) {
var thiss = $(e).find(".rightRs");
var dataInterval = $(e).attr('data-interval');
!isNaN(dataInterval) && $(e).addClass("ResHover") && setInterval(function() {
!(thiss.parent().hasClass("ResHovered")) && ResCarousel(thiss);
}, +(dataInterval));
}
function ResCarouselResize() {
function myfunction() {
console.log("resize Works");
//var r = $('body').width();
$('.resCarousel').each(function() {
var divValue = $(this).attr('data-value');
var itemWidth = $(this).find('.item').width();
$(this).find(".resCarousel-inner").scrollLeft(divValue * itemWidth);
//var itemsSplit = $(this).attr("data-items").split(',');
//var it = r >= 1200 ? itemsSplit[3] : r >= 992 ? itemsSplit[2] : r >= 768 ? itemsSplit[1] : itemsSplit[0];
//$(this).attr("data-itm", it);
});
}
//var ResTimeout = setTimeout(function() { myfunction() }, 3000);
//clearTimeout(ResTimeout);
//ResTimeout = setTimeout(function() { myfunction() }, 3000);
//console.log(ResTimeout);
myfunction();
}
//this function define the size of the items
function ResCarouselSize() {
var t0 = performance.now();
// styleCollector0 = styleCollector1 = styleCollector2 = styleCollector3 = "";
$('.resCarousel').each(function(index) {
var itemsSplit = $(this).attr("data-items").split('-');
$(this).addClass("ResSlid" + index);
for (var i = 0; i < 4; i++) {
if (i == 0) {
var styleCollector0 = ".ResSlid" + index + " .item {width: " + 100 / itemsSplit[i] + "%}";
} else if (i == 1) {
var styleCollector1 = ".ResSlid" + index + " .item {width: " + 100 / itemsSplit[i] + "%}";
} else if (i == 2) {
var styleCollector2 = ".ResSlid" + index + " .item {width: " + 100 / itemsSplit[i] + "%}";
} else if (i == 3) {
var styleCollector3 = ".ResSlid" + index + " .item {width: " + 100 / itemsSplit[i] + "%}";
}
}
$(this).attr("data-value", "0");
//var r = $('body').width();
//var it = r >= 1200 ? itemsSplit[3] : r >= 992 ? itemsSplit[2] : r >= 768 ? itemsSplit[1] : itemsSplit[0];
//$(this).attr("data-itm", it);
var styleCollector = "#media (max-width:767px){" + styleCollector0 + "}" +
"#media (min-width:768px){" + styleCollector1 + "}" +
"#media (min-width:992px){" + styleCollector2 + "}" +
"#media (min-width:1200px){" + styleCollector3 + "}";
//$(this).append("<div class=\"ResStyleManager\"></div>")
$(this).find("style").remove();
$(this).append("<style>" + styleCollector + "</style>");
ResCarouselSlide(this);
});
//console.log(styleCollector);
//$("body").append("<div class=\"ResStyleManager\"></div>")
//$('.ResStyleManager').html(null).append("<style>" + styleCollector + "</style>");
var t1 = performance.now();
console.log('Took', (t1 - t0).toFixed(4), 'milliseconds to Size');
}
//this function used to move the items
function ResCarousel(Btn) {
//var t0 = performance.now();
var parent = $(Btn).parent(),
slide = +parent.attr("data-slide"),
itemsDiv = parent.find('.resCarousel-inner'),
//divValueq = +parent.attr('data-value'),
itemSpeed = +parent.attr("data-speed"),
itemLoad = +parent.attr("data-load"),
//animi = parent.attr("data-animator"),
translateXval = '',
currentSlide = "",
itemLenght = itemsDiv.find(".item").length,
itemWidth = itemsDiv.find('.item').outerWidth(),
dataItm = +Math.round(itemsDiv.outerWidth() / itemWidth),
cond = $(Btn).hasClass("leftRs"),
divValue = Math.round(itemsDiv.scrollLeft() / itemWidth);
//console.log(dataItm + "," + Math.abs(dataItmq));
//console.log(divValue + "," + divValueq);
//console.log(cond);
//console.log(typeof + parent.attr("data-slide"))
itemSpeed = !isNaN(itemSpeed) ? itemSpeed : 400;
slide = slide < dataItm ? slide : dataItm;
if (cond) {
currentSlide = divValue - slide;
translateXval = currentSlide * itemWidth;
var MoveSlide = currentSlide + slide;
//console.log(itemloop);
if (divValue == 0) {
currentSlide = itemLenght - slide;
translateXval = currentSlide * itemWidth;
currentSlide = itemLenght - dataItm;
itemSpeed = 400;
//console.log(currentSlide + "," + translateXval);
} else if (slide >= MoveSlide) {
currentSlide = translateXval = 0;
}
} else {
currentSlide = divValue + slide;
translateXval = currentSlide * itemWidth;
var MoveSlide = currentSlide + slide;
//console.log(itemLenght + "," + (MoveSlide + "," + slide + "," + dataItm));
//console.log(itemLenght + "," + (MoveSlide - slide + dataItm));
//console.log((divValue + dataItm) + "," + itemLenght);
if (divValue + dataItm == itemLenght) {
currentSlide = translateXval = 0;
itemSpeed = 400;
} else if (itemLenght <= (MoveSlide - slide + dataItm)) {
currentSlide = itemLenght - slide;
translateXval = currentSlide * itemWidth;
currentSlide = itemLenght - dataItm;
}
// resCarouselAnimator(itemsDiv, currentSlide + 1, currentSlide + slide);
}
//console.log(slide + "," + itemWidth);
parent.attr("data-animator") == "lazy" && resCarouselAnimator(itemsDiv, cond ? 0 : 1, currentSlide + 1, currentSlide + dataItm, itemSpeed, (slide * itemWidth));
//console.log(itemsDiv.scrollLeft() + "," + translateXval)
//console.log(itemSpeed);
if (!isNaN(itemLoad)) {
itemLoad = itemLoad >= slide ? itemLoad : slide;
//console.log((itemLenght - itemLoad) <= currentSlide + dataItm);
//console.log((itemLenght - itemLoad) + " ," + (currentSlide + dataItm) + " ," + (itemLenght - dataItm));
(itemLenght - itemLoad) <= (currentSlide + dataItm) && ResCarouselLoad1(itemsDiv);
}
itemsDiv.animate({ scrollLeft: translateXval }, itemSpeed);
parent.attr("data-value", currentSlide);
//var t1 = performance.now();
//console.log('Took', (t1 - t0).toFixed(4), 'milliseconds to generate');
}
function ResCarouselLoad1(e) {
//console.log(e.attr("id"));
$("#" + e.attr("id")).trigger("ResCarouselLoad");
}
function resCarouselAnimator(parent, direction, start, end, speed, length) {
//console.log(parent + "," + start + "," + end);
var val = 5;
if (direction == 0) {
for (var i = start - 1; i < end + 1; i++) {
val = val * 2;
}
val = -val;
}
//console.log(length);
//if (direction == 1) {
// for (var i = start - 1; i < end + 1; i++) {
// length = length / 2
// console.log(length);
// }
// //val = val;
//}
//val = direction == 1 ? length : -length;
for (var i = start - 1; i < end; i++) {
val = direction == 0 ? val / 2 : val * 2;
//console.log(val);
//console.log(parent.find(".item").eq(i).find("h1").text());
parent.find(".item").eq(i).css("transform", "translateX(" + val + "px)");
}
setTimeout(function() {
parent.find(".item").attr("style", "");
}, speed - 70);
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>ResCarousel</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
body {
font-family: 'Trirong', serif;
background: #eee;
}
.p0 {
padding: 0;
}
.resCarousel-inner .item {
/*border: 4px solid #eee;*/
/*vertical-align: top;*/
text-align: center;
}
.resCarousel-inner .item .tile div,
.banner .item div {
display: table;
width: 100%;
min-height: 250px;
text-align: center;
/*box-shadow: 0 1px 1px rgba(0, 0, 0, .1);*/
}
.resCarousel-inner .item h1 {
display: table-cell;
vertical-align: middle;
color: white;
}
.banner .item div {
background: url('demoImg.jpg') center top no-repeat;
background-size: cover;
min-height: 550px;
}
.item .tile div {
background: url('demoImg.jpg') center center no-repeat;
background-size: cover;
height: 200px;
color: white;
}
.item div h1 {
background: rgba(0, 0, 0, .4);
}
/*resCarousel Css*/
.outt {
display: none;
}
.leftRs {
position: absolute;
margin: auto;
top: 0;
bottom: 0;
z-index: 100;
left: 0;
width: 50px;
height: 50px;
box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, .3);
border-radius: 999px;
}
.rightRs {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
z-index: 100;
width: 50px;
height: 50px;
box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, .3);
border-radius: 999px;
}
.resCarousel {
/*float: left;
overflow: hidden;*/
width: 100%;
position: relative;
}
.resCarousel-inner {
overflow-x: hidden;
white-space: nowrap;
font-size: 0;
vertical-align: top;
}
.resCarousel-inner .item {
display: inline-block;
font-size: 14px;
white-space: initial;
}
/*banner*/
.banner {
overflow: hidden !important;
}
/*tile css*/
.resCarousel-inner .item .tile {
background: white;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
margin: 5px;
}
/*animation*/
.resCarousel[data-animator="lazy"] .item {
transition: .6s ease all;
}
#media (max-width: 767px) {
.leftRs,
.rightRs {
/*display: none;*/
}
.resCarousel-inner {
overflow-x: auto;
}
}
/*resCarousel Css End*/
</style>
</head>
<body>
<!-- test -->
<!--home-->
<div class="container p8">
<div class="resCarousel carousel" id="puta" data-type="multi" data-items="2-4-4-4" data-slide="4" data-interval="false" data-value="8">
<div class="resCarousel-inner">
<div class="item">
<div class="tile">
<div>
<h1>1s</h1>
</div>
<h3>Title</h3>
<p>content</p>
</div>
</div>
<div class="item">
<div class="tile">
<div>
<h1>2</h1>
</div>
<h3>Title</h3>
<p>content</p>
</div>
</div>
<div class="item active">
<div class="tile">
<div>
<h1>3</h1>
</div>
<h3>Title</h3>
<p>content</p>
</div>
</div>
<div class="item">
<div class="tile">
<div>
<h1>4</h1>
</div>
<h3>Title</h3>
<p>content</p>
</div>
</div>
<div class="item">
<div class="tile">
<div>
<h1>5</h1>
</div>
<h3>Title</h3>
<p>content</p>
</div>
</div>
<div class="item">
<div class="tile">
<div>
<h1>6</h1>
</div>
<h3>Title</h3>
<p>content</p>
</div>
</div>
<div class="item">
<div class="tile">
<div>
<h1>7</h1>
</div>
<h3>Title</h3>
<p>content</p>
</div>
</div>
<div class="item">
<div class="tile">
<div>
<h1>8</h1>
</div>
<h3>Title</h3>
<p>content</p>
</div>
</div>
<div class="item">
<div class="tile">
<div>
<h1>9</h1>
</div>
<h3>Title</h3>
<p>content</p>
</div>
</div>
<div class="item">
<div class="tile">
<div>
<h1>10</h1>
</div>
<h3>Title</h3>
<p>content</p>
</div>
</div>
<div class="item">
<div class="tile">
<div>
<h1>11</h1>
</div>
<h3>Title</h3>
<p>content</p>
</div>
</div>
<div class="item">
<div class="tile">
<div>
<h1>12</h1>
</div>
<h3>Title</h3>
<p>content</p>
</div>
</div>
<div class="item">
<div class="tile">
<div>
<h1>13</h1>
</div>
<h3>Title</h3>
<p>content</p>
</div>
</div>
<div class="item">
<div class="tile">
<div>
<h1>14</h1>
</div>
<h3>Title</h3>
<p>content</p>
</div>
</div>
</div>
<button class='btn btn-default leftRs'><</button>
<button class='btn btn-default rightRs'>></button>
</div>
</div>
<hr>
<script src="js/resCarousel.js"></script>
</body>
</html>

Is it possible to simplify this matrix-like column selecting built with javascript?

I have a grid and when selecting an item in it, i want to add different classes to every column that is before or after the current item. I came up with the following function to do this, but wondering if theres an easier and simpler way to do this:
var items = document.querySelectorAll('.item');
var bodyWidth = 200;
var itemWidth = 50;
var itemsInRow = Math.floor(bodyWidth/itemWidth);
var activeItemIndexInRow;
var directionClass;
var otherItemIndexInRow;
var removeClasses = function(){
items.forEach(function (item, i) {
item.className = 'item';
});
}
items.forEach(function (selectedItem, selectedItemIndex) {
selectedItem.addEventListener('click', function(event) {
removeClasses();
activeItemIndexInRow = selectedItemIndex-Math.floor(selectedItemIndex/itemsInRow)*itemsInRow;
selectedItem.classList.add('active');
items.forEach(function (otherItem, otherItemIndex) {
otherItemIndexInRow = otherItemIndex-Math.floor(otherItemIndex/itemsInRow)*itemsInRow;
if(otherItemIndexInRow < activeItemIndexInRow) directionClass = 'green';
if(otherItemIndexInRow === activeItemIndexInRow) directionClass = 'red';
if(otherItemIndexInRow > activeItemIndexInRow) directionClass = 'blue';
otherItem.classList.add(directionClass);
});
});
});
* {
margin:0;
padding:0;
}
#wrapper {
width: 400px;
}
.item {
width:25%;
background:gray;
text-align:center;
height:100px;
line-height:100px;
color:#fff;
font-size:30px;
float:left;
}
.item.green {background:green}
.item.red {background:red}
.item.blue {background:blue}
.item.active {background:black}
<div id="wrapper">
<div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div><div class="item">9</div><div class="item">10</div>
</div>

This should work.
var items = document.querySelectorAll('.item');
var itemsInRow = 4;
items.forEach(function(selectedItem, selectedItemIndex) {
selectedItem.addEventListener('click', function(event) {
var directionClass;
selectedItem.classList.add('active');
var selectedCol = selectedItemIndex % itemsInRow;
items.forEach(function(otherItem, otherItemIndex) {
otherItem.className = 'item';
var otherCol = otherItemIndex % itemsInRow;
if (otherItemIndex === selectedItemIndex) directionClass = 'active';
else if (otherCol === selectedCol) {
directionClass = 'red';
} else {
directionClass = selectedCol < otherCol ? 'blue' : 'green'
}
otherItem.classList.add(directionClass);
});
});
});
* {
margin: 0;
padding: 0;
}
#wrapper {
width: 400px;
}
.item {
width: 25%;
background: gray;
text-align: center;
height: 100px;
line-height: 100px;
color: #fff;
font-size: 30px;
float: left;
}
.item.green {
background: green
}
.item.red {
background: red
}
.item.blue {
background: blue
}
.item.active {
background: black
}
<div id="wrapper">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>

Javascript Slideshow with play pause and Next Prev button

I'm making a slideshow in Javascript with a Play / Pause and Next / Prev. I have manage to slideshow working with play/pause button, but now i wanted to add Next and Prev button to it. Can some one please help me how can i do that.
Here's my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple HTML Slideshow</title>
<style type="text/css">
#slideshow {
margin: 50px auto;
position: relative;
width: 900px;
height: 450px;
padding: 10px;
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
#slideshow > div > img {
width: 100%;
}
#button { text-align: center; }
</style>
<noscript>
Sorry...JavaScript is needed to go ahead.
</noscript>
</head>
<body>
<div id="slideshow">
<div>
<img name="slide" id="imgSlideshow" src="http://themarklee.com/wp-content/uploads/2013/12/snowying.jpg">
</div>
</div>
<div id="button">
Prev
Play/Pause
Next
</div>
</body>
</html>
Here is JavaScript:
<script language="javascript" type="text/javascript">
var i = 0;
var path = new Array();
//var timer = setInterval("slide()",2000);
var timer;
// LIST OF IMAGES
path[0] = "http://themarklee.com/wp-content/uploads/2013/12/snowying.jpg";
path[1] = "http://themarklee.com/wp-content/uploads/2013/12/starlight.jpg";
path[2] = "http://themarklee.com/wp-content/uploads/2013/12/snowstorm.jpg";
path[3] = "http://themarklee.com/wp-content/uploads/2013/12/misty-winter-afternoon.jpg";
function slide() {
document.getElementById("imgSlideshow").src = path[i];
i = (i + 1)%path.length;
//console.log(i);
}
function setTimer(){
if (timer) {
// stop
clearInterval( timer );
timer=null;
}
else {
timer = setInterval("slide()",2000);
}
}
var imgNumber = 1;
var numberOfImg = path.length;
function previousImage() {
if(imgNumber > 1) {
imgNumber--;
}
else {
imgNumber = numberOfImg;
}
document.getElementById("imgSlideshow").src = path[imgNumber-1];
changeCounter(imgNumber, numberOfImg);
}
function nextImage(){
if(imgNumber < numberOfImg){
imgNumber++
}
else{
imgNumber = 1
}
document.getElementById("imgSlideshow").src = path[imgNumber-1];
changeCounter(imgNumber, numberOfImg);
}
function changeCounter(cur, total) {
document.getElementById("counter").innerHTML = cur + "/" + total;
}
document.getElementById("counter").innerHTML = 1 + "/" + path.length;
</script>
Any Help is appreciated and thanks in advance.

Only minor changes in the logic.
var imgNumber = 0;
var path = ["http://themarklee.com/wp-content/uploads/2013/12/snowying.jpg",
"http://themarklee.com/wp-content/uploads/2013/12/starlight.jpg",
"http://themarklee.com/wp-content/uploads/2013/12/snowstorm.jpg",
"http://themarklee.com/wp-content/uploads/2013/12/misty-winter-afternoon.jpg"
];
var numberOfImg = path.length;
var timer = null;
function slide() {
imgNumber = (imgNumber + 1) % path.length;
console.log(imgNumber);
document.getElementById("imgSlideshow").src = path[imgNumber];
changeCounter(imgNumber + 1, numberOfImg);
}
function setTimer() {
if (timer) {
clearInterval(timer);
timer = null;
} else {
timer = setInterval(slide, 2000);
}
return false;
}
function previousImage() {
--imgNumber;
if (imgNumber < 0) {
imgNumber = numberOfImg - 1;
}
document.getElementById("imgSlideshow").src = path[imgNumber];
changeCounter(imgNumber + 1, numberOfImg);
return false;
}
function nextImage() {
++imgNumber;
if (imgNumber > (numberOfImg - 1)) {
imgNumber = 0;
}
document.getElementById("imgSlideshow").src = path[imgNumber];
changeCounter(imgNumber + 1, numberOfImg);
return false;
}
function changeCounter(cur, total) {
document.getElementById("counter").innerHTML = cur + "/" + total;
}
document.getElementById("counter").innerHTML = 1 + "/" + path.length;
#slideshow {
margin: 50px auto;
position: relative;
width: 900px;
height: 450px;
padding: 10px;
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
#slideshow > div > img {
width: 100%;
}
#button {
text-align: center;
}
<div id="slideshow">
<div>
<img name="slide" id="imgSlideshow" src="http://themarklee.com/wp-content/uploads/2013/12/snowying.jpg">
</div>
</div>
<div id="button">
Prev
Play/Pause
Next
</div>
<div id="counter"></div>

How do I pass arguments to a 'setTimeout' function?

How can I make these functions use variables for the id? I can't get the setTimeout to work when I do.
<script type="text/javascript">
function changeBarAWidth() {
var bar = document.getElementById('firstbar');
bar.style.width = lengthA + "px";
}
function increaseBarA() {
if (lengthA < fullBarA) {
changeBarAWidth();
lengthA = (lengthA + 2);
setTimeout("increaseBarA()", 10); // <-- How do I pass "firstbar"?
}
}
function resetLengthA() {
lengthA = 0;
changeBarAWidth();
}
var barA = 'firstbar';
var percentA = 80;
var fullBarA = (percentA * 2);
var lengthA = 0;
</script>
<style type="text/css">
ul {
list-style-type: none;
}
.bar {
width: 50px;
height: 5px;
background-color: red;
}
.back {
background-color: black;
height: 5px;
width: 200px;
}
</style>
</head>
<body onload="increaseBarA()">
<ul>
<li class="back">
<p class="bar" id="firstbar"></p>
</li>
</ul>
<button onClick="increaseBarA()">Test Change</button>
<button onClick="resetLengthA()">Reset</button>

I had to use a setTimeout(function() { YourFuncwith(params); }, 10);.
Here is the script. If anybody would like copy, please do:
// functions to show poll reults, div width increase every tenth of a second,
// looks like poll is sliding.
// length is name of global length variable you declare, mine are at bottom of script
// I will use php to dynaimcally give variable values based on poll results.
function changeBarWidth(id, length) {
var bar = document.getElementById(id);
bar.style.width = length + "px";
}
/* max is how long you want the poll to slide to, my background is 200px
* so I set to (percent*2);
*/
function increaseBar(id, max, length) {
var full = max;
if (length < full) {
changeBarWidth(id, length);
length = (length + 2);
setTimeout(function() {
increaseBar(id, max, length);
}, 10);
}
}
var barA = 'firstbar';
var percentA = 80;
var fullBarA = (percentA * 2);
var lengthA = 0;
var lengthB = 0;
ul {
list-style-type: none;
}
.bar {
width: 50px;
height: 5px;
background-color: red;
}
.back {
background-color: black;
height: 5px;
width: 200px;
}
<body onload="increaseBar(barA, percentA, lengthA)">
<div id="pollresults">
<ul>
<li class="back">
<p class="bar" id="firstbar"></p>
</li>
<li class="back">
<p class="bar" id="secondbar"></p>
</li>
</ul>
</div>
<button onClick="increaseBar('secondbar',fullBarA,lengthB)">Test Change</button>
</body>

We Keep Coding

JavaScript is the programming language of the Web.

Simple Carousel Slider start from second slide (javascript) - javascript

Related

Using setInterval to create a progress bar

ResCarousel Active item how to

Is it possible to simplify this matrix-like column selecting built with javascript?

Javascript Slideshow with play pause and Next Prev button

How do I pass arguments to a 'setTimeout' function?

Categories

Resources