Develop Reference

Javascript: Carousel slides out of the loop

I am currently building a carousel with vanilla JS and I've noticed that, unlike previous carousels I built before with jQuery, this one slides an extra slide out of the loop (which I defined with the .length property). The problem is happening in both directions.
Why is this happening and what can I do to fix it? Here's a quick example:
let currentSlide = 0
const holder = document.querySelector('.holder')
const totalSlides = holder.querySelectorAll('.holder-child')
const next = document.querySelector('.next')
const prev = document.querySelector('.prev')
const moveSlide = slide => {
const leftPosition = -slide * 100 + 'vw'
holder.style.left = leftPosition
}
const nextSlide = () => {
currentSlide = currentSlide + 1
moveSlide(currentSlide)
if (currentSlide > totalSlides.length - 1) {
currentSlide = 0
}
}
const prevSlide = () => {
currentSlide = currentSlide - 1
moveSlide(currentSlide)
if (currentSlide < 0) {
currentSlide = totalSlides.length - 1
}
}
next.addEventListener('click', () => {
nextSlide()
})
prev.addEventListener('click', () => {
prevSlide()
})
.flex {
display: flex;
}
.slideshow {
position: relative;
overflow: hidden;
width: 100vw;
}
.holder {
position: relative;
top: 0;
left: 0;
width: 500vw;
transition: left 1s;
}
.holder-child {
display: flex;
width: 100vw;
}
.speaker {
padding: 0 8vw 0 8vw;
}
.controls {
justify-content: space-between;
}
<h2>Test</h2>
<div class="slideshow">
<div class="controls flex">
<p class="prev pointer">prev</p>
<p class="next pointer">next</p>
</div>
<div class=" holder flex">
<div class="holder-child">
<p>slide 1</p>
</div>
<div class="holder-child">
<p>slide 2</p>
</div>
</div>
JSFiddle: https://jsfiddle.net/5f8cbxdr/

It looks like a minor logic issue caused by moveSlide() being called prior to the final calculation of currentSlide during your prevSlide() and nextSlide() methods.
Consider moving the call of moveSlide() to the end of your prevSlide() and nextSlide() functions. This will mean that when the edge cases occur (ie your currentSlide is at either end of the range of slides), the subsequent call to moveSlide() will cause the slides to be positioned base on the re-adjusted value of currentSlide:
let currentSlide = 0
const holder = document.querySelector('.holder')
const totalSlides = holder.querySelectorAll('.holder-child')
const next = document.querySelector('.next')
const prev = document.querySelector('.prev')
const moveSlide = slide => {
const leftPosition = -slide * 100 + 'vw'
holder.style.left = leftPosition
}
const nextSlide = () => {
currentSlide = currentSlide + 1
if (currentSlide > totalSlides.length - 1) {
currentSlide = 0
}
/* Final value for currentSlide now determined, so call moveSlide()
to position slides consistently with most up to date currentSlide
value */
moveSlide(currentSlide)
}
const prevSlide = () => {
currentSlide = currentSlide - 1
if (currentSlide < 0) {
currentSlide = totalSlides.length - 1
}
/* Final value for currentSlide now determined, so call moveSlide()
to position slides consistently with most up to date currentSlide
value */
moveSlide(currentSlide)
}
next.addEventListener('click', () => {
nextSlide()
})
prev.addEventListener('click', () => {
prevSlide()
})
.flex {
display: flex;
}
.slideshow {
position: relative;
overflow: hidden;
width: 100vw;
}
.holder {
position: relative;
top: 0;
left: 0;
width: 500vw;
transition: left 1s;
}
.holder-child {
display: flex;
width: 100vw;
}
.speaker {
padding: 0 8vw 0 8vw;
}
.controls {
justify-content: space-between;
}
<h2>Test</h2>
<div class="slideshow">
<div class="controls flex">
<p class="prev pointer">prev</p>
<p class="next pointer">next</p>
</div>
<div class=" holder flex">
<div class="holder-child">
<p>slide 1</p>
</div>
<div class="holder-child">
<p>slide 2</p>
</div>
</div>

from display:none to display:inline-block animation, image carousel

i need a new carousel for my website, for the mobile version.
so i created one using html css and javascript, but however, the switch between the images is way too "simple".
here is the code
The HTML
<div class="containerr">
<div style="display: inline-block;">
<img src="https://placeimg.com/400/200/people"/>
</div>
<div>
<img src="https://placeimg.com/400/200/any"/>
</div>
<div>
<img src="https://placeimg.com/400/200/nature"/>
</div>
<div>
<img src="https://placeimg.com/400/200/architecture"/>
</div>
<div>
<img src="https://placeimg.com/400/200/animals"/>
</div>
<div>
<img src="https://placeimg.com/400/200/people"/>
</div>
<div>
<img src="https://placeimg.com/400/200/tech"/>
</div>
</div>
CSS
}
.containerr {
max-width: 100%;
background-color: black;
margin: 0 auto;
text-align: center;
position: relative;
}
.containerr div {
background-color: white;
width: 100%;
display: inline-block;
display: none;
}
.containerr img {
width: 100%;
height: auto;
}
JS
var currentIndex = 0,
items = $('.containerr div'),
itemAmt = items.length;
function cycleItems() {
var item = $('.containerr div').eq(currentIndex);
items.hide();
item.css('display','inline-block');
}
var autoSlide = setInterval(function() {
currentIndex += 1;
if (currentIndex > itemAmt - 1) {
currentIndex = 0;
}
cycleItems();
}, 3000);
$('.next').click(function() {
clearInterval(autoSlide);
currentIndex += 1;
if (currentIndex > itemAmt - 1) {
currentIndex = 0;
}
cycleItems();
});
$('.prev').click(function() {
clearInterval(autoSlide);
currentIndex -= 1;
if (currentIndex < 0) {
currentIndex = itemAmt - 1;
}
cycleItems();
});
https://codepen.io/anon/pen/PmbrWj
looking for any tip to animate/transit the display:inline-block to display:none

You can build a fade in / out effect into your cycleItems() function:
function cycleItems() {
var visibleItem = items.filter(":visible");
var item = $('.containerr div').eq(currentIndex);
visibleItem.fadeOut(function() {
item.fadeIn();
});
}
The above code uses a jQuery filter to find the current visible item and calls fadeOut() on only that item. It then uses a callback function to execute fadeIn() on the current item after fadeOut() has completed.

Replace this items.hide();
with this items.fadeOut("slow");

Slideshows(Multiple) for HTML/Webpage

I am attempting to put two slideshows on the same page, both of which would be ran by the same css, and java script. My issue is that I can not seem to figure out why my second slideshow is pushing one of the images down. Notice in the photo provided that the second slideshow is pushing the image of a white circle vertically down and to the left of the page. If anyone can explain what I have done wrong, I would appreciate it and any other advice as well! Thank you
The Image of the result of my slideshows( two of them)
<script>
//1. set ul width
//2. image when click prev/next button
var ul;
var li_items;
var imageNumber;
var imageWidth;
var prev, next;
var currentPostion = 0;
var currentImage = 0;
function init(){
ul = document.getElementById('image_slider');
li_items = ul.children;
imageNumber = li_items.length;
imageWidth = li_items[0].children[0].clientWidth;
ul.style.width = parseInt(imageWidth * imageNumber) + 'px';
prev = document.getElementById("prev");
next = document.getElementById("next");
//.onclike = slide(-1) will be fired when onload;
/*
prev.onclick = function(){slide(-1);};
next.onclick = function(){slide(1);};*/
prev.onclick = function(){ onClickPrev();};
next.onclick = function(){ onClickNext();};
}
function animate(opts){
var start = new Date;
var id = setInterval(function(){
var timePassed = new Date - start;
var progress = timePassed / opts.duration;
if (progress > 1){
progress = 1;
}
var delta = opts.delta(progress);
opts.step(delta);
if (progress == 1){
clearInterval(id);
opts.callback();
}
}, opts.delay || 17);
//return id;
}
function slideTo(imageToGo){
var direction;
var numOfImageToGo = Math.abs(imageToGo - currentImage);
// slide toward left
direction = currentImage > imageToGo ? 1 : -1;
currentPostion = -1 * currentImage * imageWidth;
var opts = {
duration:1000,
delta:function(p){return p;},
step:function(delta){
ul.style.left = parseInt(currentPostion + direction * delta * imageWidth * numOfImageToGo) + 'px';
},
callback:function(){currentImage = imageToGo;}
};
animate(opts);
}
function onClickPrev(){
if (currentImage == 0){
slideTo(imageNumber - 1);
}
else{
slideTo(currentImage - 1);
}
}
function onClickNext(){
if (currentImage == imageNumber - 1){
slideTo(0);
}
else{
slideTo(currentImage + 1);
}
}
window.onload = init;
</script>
/* Silent Auction */
/* SLIDESHOW */
.container2{
width:800px;
height:400px;
padding:5px;
border:1px solid #E6E6FA;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
background: #E6E6FA;
}
.slider_wrapper{
overflow: hidden;
position:relative;
height:500px;
top:auto;
}
#image_slider{
position: relative;
height: auto;
list-style: none;
overflow: hidden;
float: left;
/*Chrom default padding for ul is 40px */
padding:0px;
margin:0px;
}
#image_slider li{
position: relative;
float: left;
}
.nvgt{
position:absolute;
top: 120px;
height: 50px;
width: 30px;
opacity: 0.6;
}
.nvgt:hover{
opacity: 0.9;
}
#prev{
background: #000 url('https://dl.dropboxusercontent.com/u/65639888/image/prev.png') no-repeat center;
left: 0px;
}
#next{
background: #000 url('https://dl.dropboxusercontent.com/u/65639888/image/next.png') no-repeat center;
right: 0px;
}
h1.slideshowtitle{
font-style: italic;
font-size: 50px;
font-family: cursive;
color: black;
<h1> Silent Auction </h1>
<!-First Slideshow->
<div class="container2">
<div class="slider_wrapper">
<ul id="image_slider">
<li><img src=""></li>
<li><img src=""></li>
<li><img src=""></li>
</ul>
<span class="nvgt" id="prev"></span>
<span class="nvgt" id="next"></span>
</div>
</div>
<!-Second slide show ->
<div class="container2">
<div class="slider_wrapper">
<ul id="image_slider">
<li><img src=""></li>
<li><img src=""></li>
<li><img src=""></li>
</ul>
<span class="nvgt" id="prev"></span>
<span class="nvgt" id="next"></span>
</div>
</div>

Ids should be unique within the document, but you are styling w/ id selectors and multiple elements with the same id. Switch to classes. E.g. -
Use
class="image_slider"
and
.image_slider { <yourcss> }

JQuery image slider stuck to the first image

i'm trying to use this code to make an images slider, but the container is stuck to the first image and the jQuery slide dosen't work. I can't find the problem the code seems correct...
Script & CSS
<script type="text/javascript">
'use strict';
$(function() {
//settings for slider
var width = 720;
var animationSpeed = 1000;
var pause = 3000;
var currentSlide = 1;
//cache DOM elements
var $slider = $('#slider');
var $slideContainer = $('.slides', $slider);
var $slides = $('.slide', $slider);
var interval;
function startSlider() {
interval = setInterval(function() {
$slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function() {
if (++currentSlide === $slides.length) {
currentSlide = 1;
$slideContainer.css('margin-left', 0);
}
});
}, pause);
}
function pauseSlider() {
clearInterval(interval);
}
$slideContainer
.on('mouseenter', pauseSlider)
.on('mouseleave', startSlider);
startSlider();
});
</script>
<style type="text/css">
#slider {
width: 720px;
height: 400px;
overflow: hidden;
}
#slider .slides {
display: block;
width: 6000px;
height: 400px;
margin: 0;
padding: 0;
}
#slider .slide {
float: left;
list-style-type: none;
width: 720px;
height: 400px;
}
/* helper css, since we don't have images */
.slide1 {background: red;}
.slide2 {background: blue;}
.slide3 {background: green;}
.slide4 {background: purple;}
.slide5 {background: pink;}
</style>
Here the HTML
<body>
<div id="container">
<div id="header">
<?php include ("includes/header.php") ?>
</div>
<div id="sidebar">
<?php include ("includes/sidebar.php") ?>
</div>
<div id="contentMaster">
<div class="container">
<div class="header">
</div>
<div id="slider">
<ul class="slides">
<li class="slide slide1">slide1</li>
<li class="slide slide2">slide2</li>
<li class="slide slide3">slide3</li>
<li class="slide slide4">slide4</li>
<li class="slide slide5">slide5</li>
<li class="slide slide1">slide1</li>
</ul>
</div>
</div>
</div>
<div id="footer">
<?php include ("includes/footer.php") ?>
</div>
</div>
</body>

You can use $( document ).ready()
$(document).ready(function() {
//settings for slider
var width = 720;
var animationSpeed = 1000;
var pause = 3000;
var currentSlide = 1;
//cache DOM elements
var $slider = $('#slider');
var $slideContainer = $('.slides', $slider);
var $slides = $('.slide', $slider);
var interval;
function startSlider() {
interval = setInterval(function() {
$slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function() {
if (++currentSlide === $slides.length) {
currentSlide = 1;
$slideContainer.css('margin-left', 0);
}
});
}, pause);
}
function pauseSlider() {
clearInterval(interval);
}
$slideContainer
.on('mouseenter', pauseSlider)
.on('mouseleave', startSlider);
startSlider();
});

Carousel with button controls

I am working on this carousel.
I have the carousel moving the way i want now i am trying to add some controls below it, small buttons to link with the carousel images.
So whenever one is active corresponding carousel is active as well.
i am not sure why it is not working..
Any help
here is the code HTML
<div id="carousel">
<div class="clear"></div>
<div class="slider">
<li>
<img src="http://s3.amazonaws.com/contemporaryartgroup/wp-content/uploads/2012/02/HZ_GCC_VUE3.jpg">
</li>
<li>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ_wMcqVx7UDxoNz7YGodjI7IkO7dLREESp0RHRHIGc9bsgGFTkYg">
</li>
<li>
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRelq6Cmc_PV3FHGS4rzISfaL8FtjTAa0w1BXu3wR6GlDR7mLTiMw">
</li>
<li>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRivHTJU30bZXeFRoyemfX5ZHrkd-iP9hAydsoZ9onvFE8cTcmS">
</li>
<div class="clear"></div>
</div>
</div>
<div class="buttons">
<li></li>
<li></li>
<li></li>
<li></li>
<div class="clear"></div>
</div>
jquery
$(document).ready(function () {
// settings
var $slider = $('.slider');
var $slide = 'li';
var $transition_time = 1000; // 1 second
var $time_between_slides = 4000; // 4 seconds
var $btn = $('.buttons');
var $buttonanchor = 'li';
function slides() {
return $slider.find($slide);
}
slides().fadeOut();
// set active classes
slides().first().addClass('active');
slides().first().fadeIn($transition_time);
//set buttons
function button() {
return $btn.find($buttonanchor);
}
button().first().removeClass('btnnotactive');
button().first().addClass('btnactive');
button().first().fadeIn($transition_time);
$interval = setInterval(
function () {
var $i = $slider.find($slide + '.active').index();
slides().eq($i).removeClass('active');
slides().eq($i).fadeOut($transition_time);
if (slides().length == $i + 1) $i = -1; // loop to start
slides().eq($i + 1).fadeIn($transition_time);
slides().eq($i + 1).addClass('active');
var $j = $btn.find($buttonanchor + '.btnnotactive').index();
button().eq($j).removeClass('.btnactive');
if (button().length == $j + 1) $j = -1;
button().eq($j + 1).fadeIn($transition_time);
button().eq($j + 1).addClass('btnnotactive');
}
, $transition_time + $time_between_slides
);
});
CSS
<style type="text/css">
#carousel
{
min-width: 255px;
min-height: 290px;
margin: 0 auto;
}
.slider
{
margin: 10px 0;
width: 580px; /* Update to your slider width */
height: 250px; /* Update to your slider height */
position: relative;
overflow: hidden;
}
.slider li
{
display: none;
position: absolute;
top: 0;
left: 0;
list-style: none;
}
.buttons
{
/*padding:0 0 5px 0;*/
}
.buttons li
{
display: inline;
background-image: url("http://www.iconmay.com/thumbnails/detail/3/violet%20button%20violet%20dot%20circle%20blank%20empty%20violet%20button%20icon.png");
background-repeat:no-repeat;
}
.btnactive
{
background:url(http://www.iconmay.com/thumbnails/detail/3/green%20button%20green%20dot%20circle%20blank%20empty%20green%20button%20icon.png);
background-repeat:no-repeat;
}
here is the fiddle link
https://jsfiddle.net/wjstowL1/13/