Develop Reference

I would like to know how to fix Touch-friendly slider

I'd like to use the script "touch-friendly slider" by KEVIN Foley. But there is a problem. When I add a 5 slide, I can't slide further. The script stops working at Transform: translate -600px
I've tried to find a solution for a long time, but I couldn't.
Original Code
https://css-tricks.com/the-javascript-behind-touch-friendly-sliders/
This my code (Edit)
https://codepen.io/anon/pen/KBbbmY
$(function(){
if (navigator.msMaxTouchPoints) {
$('#slider').addClass('ms-touch');
$('#slider').on('scroll', function() {
$('.slide-image').css('transform','translate3d(-300px,0,0)');
});
} else {
var slider = {
el: {
slider: $("#slider"),
holder: $(".holder"),
imgSlide: $(".slide-image")
},
slideWidth:300,
touchstartx: undefined,
touchmovex: undefined,
movex: undefined,
index: 0,
longTouch: undefined,
init: function() {
this.bindUIEvents();
},
bindUIEvents: function() {
this.el.holder.on("touchstart", function(event) {
slider.start(event);
});
this.el.holder.on("touchmove", function(event) {
slider.move(event);
});
this.el.holder.on("touchend", function(event) {
slider.end(event);
});
},
start: function(event) {
// Test for flick.
this.longTouch = false;
setTimeout(function() {
window.slider.longTouch = true;
}, 250);
// Get the original touch position.
this.touchstartx = event.originalEvent.touches[0].pageX;
// The movement gets all janky if there's a transition on the elements.
$('.animate').removeClass('animate');
},
move: function(event) {
// Continuously return touch position.
this.touchmovex = event.originalEvent.touches[0].pageX;
// Calculate distance to translate holder.
this.movex = this.index*this.slideWidth + (this.touchstartx - this.touchmovex);
// Defines the speed the images should move at.
var panx = 100-this.movex/6;
if (this.movex <= 2400) { // Makes the holder stop moving when there is no more content.
this.el.holder.css('transform','translate3d(-' + this.movex + 'px,0,0)');
}
if (panx < 100) { // Corrects an edge-case problem where the background image moves without the container moving.
this.el.imgSlide.css('transform','translate3d(-' + panx + 'px,0,0)');
}
},
end: function(event) {
// Calculate the distance swiped.
var absMove = Math.abs(this.index*this.slideWidth - this.movex);
// Calculate the index. All other calculations are based on the index.
if (absMove > this.slideWidth/2 || this.longTouch === false) {
if (this.movex > this.index*this.slideWidth && this.index < 2) {
this.index++;
} else if (this.movex < this.index*this.slideWidth && this.index > 0) {
this.index--;
}
}
// Move and animate the elements.
this.el.holder.addClass('animate').css('transform', 'translate3d(-' + this.index*this.slideWidth + 'px,0,0)');
// this.el.imgSlide.addClass('animate').css('transform', 'translate3d(-' + 100-this.index*50 + 'px,0,0)');
}
};
slider.init();
}
});
#import url(https://fonts.googleapis.com/css?family=Josefin+Slab:100);
.animate {
transition: transform 0.3s ease-out;
}
html,
body {
height: 100%;
}
body {
margin: 0;
padding: 0;
overflow: hidden;
}
.slider-wrap {
width: 300px;
height: 500px;
position: absolute;
left: 50%;
margin-left: -150px;
top: 50%;
margin-top: -225px;
}
.slider {
width: 100%;
height: 100%;
overflow: hidden;
}
.ms-touch.slider {
overflow-x: scroll;
overflow-y: hidden;
-ms-overflow-style: none;
/* Hides the scrollbar. */
-ms-scroll-chaining: none;
/* Prevents Metro from swiping to the next tab or app. */
-ms-scroll-snap-type: mandatory;
/* Forces a snap scroll behavior on your images. */
-ms-scroll-snap-points-x: snapInterval(0%, 100%);
/* Defines the y and x intervals to snap to when scrolling. */
}
.holder {
width: 1500px;
max-height: 500px;
height: 100%;
overflow-y: hidden;
}
.slide-wrapper {
width: 300px;
height: 100%;
float: left;
height: 500px;
position: relative;
overflow: hidden;
}
.slide {
height: 100%;
position: relative;
}
.temp {
position: absolute;
z-index: 1;
color: white;
font-size: 100px;
bottom: 15px;
left: 15px;
font-family: 'Josefin Slab', serif;
font-weight: 100;
}
.slide img {
position: absolute;
z-index: 0;
transform: translatex(-100px);
}
.slide:before {
content: "";
position: absolute;
z-index: 1;
bottom: 0;
left: 0;
width: 100%;
height: 40%;
background: linear-gradient(transparent, black);
}
.slide div {
width: 300px;
height: 500px;
z-index: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider-wrap">
<div class="slider" id="slider">
<div class="holder">
<div class="slide-wrapper">
<div class="slide"><img class="slide-image" src="http://farm8.staticflickr.com/7347/8731666710_34d07e709e_z.jpg" /></div>
<span class="temp">74</span>
</div>
<div class="slide-wrapper">
<div class="slide"><img class="slide-image" src="http://farm8.staticflickr.com/7384/8730654121_05bca33388_z.jpg" /></div>
<span class="temp">64</span>
</div>
<div class="slide-wrapper">
<div class="slide"><img class="slide-image" src="http://farm8.staticflickr.com/7382/8732044638_9337082fc6_z.jpg" /></div>
<span class="temp">82</span>
</div>
<div class="slide-wrapper">
<div class="slide"><img class="slide-image" src="http://farm8.staticflickr.com/7382/8732044638_9337082fc6_z.jpg" /></div>
<span class="temp">92</span>
</div>
<div class="slide-wrapper">
<div class="slide"><img class="slide-image" src="http://farm8.staticflickr.com/7382/8732044638_9337082fc6_z.jpg" /></div>
<span class="temp">102</span>
</div>
</div>
</div>
</div>
or
https://jsfiddle.net/nuengwispy/30dp4n8j/1/
when you test "F12" and "Ctrl+Shift+M"
I would like to know how to fix
"touch-friendly slider" until the end slide.

Finally, i choose to use the code of "weixhen" and i modified a bit.
when your test please: F12 and Ctrl+Shift+M
$(function() {
var width_container_touch_slide_recommend = 380;
var div_touch_slide_recommend = $("#touch_slide_recommend");
var items_touch_slide_recommend = $("#ul_touch_slide_recommend > li");
var length_touch_slide_recommend = items_touch_slide_recommend.length;
var star_touch_slide_recommend = 0;
var distance_touch_slide_recommend = 0;
var stop_touch_slide_recommend = 0;
var max_distance_recommend = ((items_touch_slide_recommend.length) * width_container_touch_slide_recommend) - width_container_touch_slide_recommend;
div_touch_slide_recommend.css("width", width_container_touch_slide_recommend + "px");
window.touch_slide_recommend.addEventListener("touchstart", function(e) {
star_touch_slide_recommend = e.touches[0].clientX;
window.ul_touch_slide_recommend.style.transition = '0ms';
});
window.touch_slide_recommend.addEventListener('touchmove', function(e) {
distance_touch_slide_recommend = stop_touch_slide_recommend + star_touch_slide_recommend - e.touches[0].clientX
window.ul_touch_slide_recommend.style.transform = 'translateX(' + (-distance_touch_slide_recommend) + 'px)';
});
window.touch_slide_recommend.addEventListener('touchend', function(e) {
fluentslide_recommend();
stop_touch_slide_recommend = distance_touch_slide_recommend;
});
var fluentslide_recommend = function() {
index = Math.round(distance_touch_slide_recommend / width_container_touch_slide_recommend);
if (distance_touch_slide_recommend % width_container_touch_slide_recommend !== 0) {
distance_touch_slide_recommend = index * width_container_touch_slide_recommend;
}
if (distance_touch_slide_recommend < 0) {
distance_touch_slide_recommend = 0;
}
if (distance_touch_slide_recommend > max_distance_recommend) {
distance_touch_slide_recommend = max_distance_recommend;
}
window.ul_touch_slide_recommend.style.transition = '500ms';
window.ul_touch_slide_recommend.style.transform = 'translateX(' + (-distance_touch_slide_recommend) + 'px)';
}
});
$(function() {
var width_container_touch_slide_best = 480;
var div_touch_slide_best = $("#touch_slide_best");
var items_touch_slide_best = $("#ul_touch_slide_best > li");
var length_touch_slide_best = items_touch_slide_best.length;
var star_touch_slide_best = 0;
var distance_touch_slide_best = 0;
var stop_touch_slide_best = 0;
var max_distance_best = ((items_touch_slide_best.length) * width_container_touch_slide_best) - width_container_touch_slide_best;
div_touch_slide_best.css("width", width_container_touch_slide_best + "px");
window.touch_slide_best.addEventListener("touchstart", function(e) {
star_touch_slide_best = e.touches[0].clientX;
window.ul_touch_slide_best.style.transition = '0ms';
});
window.touch_slide_best.addEventListener('touchmove', function(e) {
distance_touch_slide_best = stop_touch_slide_best + star_touch_slide_best - e.touches[0].clientX
window.ul_touch_slide_best.style.transform = 'translateX(' + (-distance_touch_slide_best) + 'px)';
});
window.touch_slide_best.addEventListener('touchend', function(e) {
fluentslide_best();
stop_touch_slide_best = distance_touch_slide_best;
});
var fluentslide_best = function() {
index = Math.round(distance_touch_slide_best / width_container_touch_slide_best);
if (distance_touch_slide_best % width_container_touch_slide_best !== 0) {
distance_touch_slide_best = index * width_container_touch_slide_best;
}
if (distance_touch_slide_best < 0) {
distance_touch_slide_best = 0;
}
if (distance_touch_slide_best > max_distance_best) {
distance_touch_slide_best = max_distance_best;
}
window.ul_touch_slide_best.style.transition = '500ms';
window.ul_touch_slide_best.style.transform = 'translateX(' + (-distance_touch_slide_best) + 'px)';
}
});
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0px;
}
[id^="touch_slide_"] {
margin-left: auto;
margin-right: auto;
overflow-x: hidden;
position: relative;
}
[id^="ul_touch_slide_"] {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h1>Recommend</h1>
<div id="touch_slide_recommend">
<ul id="ul_touch_slide_recommend">
<li><img src="http://placehold.it/380x285" alt=""></li>
<li><img src="http://placehold.it/380x285" alt=""></li>
<li><img src="http://placehold.it/380x285" alt=""></li>
<li><img src="http://placehold.it/380x285" alt=""></li>
<li><img src="http://placehold.it/380x285" alt=""></li>
</ul>
</div>
<h1>Best Seller</h1>
<div id="touch_slide_best">
<ul id="ul_touch_slide_best">
<li><img src="http://placehold.it/480x285" alt=""></li>
<li><img src="http://placehold.it/480x285" alt=""></li>
<li><img src="http://placehold.it/480x285" alt=""></li>
<li><img src="http://placehold.it/480x285" alt=""></li>
<li><img src="http://placehold.it/480x285" alt=""></li>
</ul>
</div>
of
http://jsfiddle.net/nuengwispy/0tmsLz2p/
original code: https://codepen.io/weixhen/pen/QggGVM (thanks weixhen)

Image slider: back an image

So I followed a tutorial on how to create image slider with jquery but he didn't show how to add next image and previous image, so I'm trying to do that my self. The next image part is working but I can't get previous image to work. https://jsfiddle.net/vmab7xk6/10/
//slider
var sliderWidth = 960;
var sliderSpeed = 1000;
var sliderPause = 5000;
var sliderCurrent = 1;
var sliderInterval;
var $sliderLocation = $(".slider");
var $sliderContainer = $sliderLocation.find(".slides");
var $sliderSlides = $sliderContainer.find(".slide");
// img slider
function startSlider() {
sliderInterval = setInterval(function() {
$sliderContainer.animate({'margin-left': '-='+sliderWidth}, sliderSpeed, function() {
sliderCurrent++;
if(sliderCurrent === $sliderSlides.length) {
sliderCurrent = 1;
$sliderContainer.css("margin-left", 0);
}
});
}, sliderPause);
}
function pauseSlider() {
clearInterval(sliderInterval);
}
function backSlider() {
$sliderContainer.animate({"margin-left": "+="+sliderWidth}, sliderSpeed, function() {
sliderCurrent--;
if(sliderCurrent === $sliderSlides.length) {
sliderCurrent = $sliderSlides.length - 1;
$sliderContainer.css("margin-left", "-1920");
}
});
}
function nextSlider() {
$sliderContainer.animate({"margin-left": "-="+sliderWidth}, sliderSpeed, function() {
sliderCurrent++;
if(sliderCurrent === $sliderSlides.length) {
sliderCurrent = 1;
$sliderContainer.css("margin-left", 0);
}
});
}
$("#sliderControllsLeft").on("click", function() {
backSlider();
console.log("left");
});
$("#sliderControllsPause").on("click", function() {
pauseSlider();
console.log("pause");
});
$("#sliderControllsStart").on("click", function() {
startSlider();
console.log("start");
});
$("#sliderControllsRight").on("click", function() {
nextSlider();
console.log("right");
});
startSlider();
<section class="slider">
<ul class="slides">
<li class="slide"><img src="img/slider_01.jpg"></li>
<li class="slide"><img src="img/slider_02.jpg"></li>
<li class="slide"><img src="img/slider_03.jpg"></li>
<li class="slide"><img src="img/slider_01.jpg"></li>
</ul>
<ul class="sliderControlls">
<li id="sliderControllsLeft"><</li>
<li id="sliderControllsPause">=</li>
<li id="sliderControllsStart">+</li>
<li id="sliderControllsRight">></li>
</ul>
</section>
section.slider {
width: 100%;
height: 500px;
overflow: hidden;
margin: 100px 0;
}
section.slider .slides {
display: block;
width: 6000px;
height: 400px;
margin: 0;
padding: 0;
}
section.slider .slide {
width: 960px;
height: 400px;
float: left;
list-style-type: none;
}
ul.sliderControlls {
list-style-type: none;
}
ul.sliderControlls li {
display: inline-block;
font-size: 60px;
color: #000;
text-decoration: none;
padding: 0 10px 0 10px;
}

You have a few syntax errors. See updated fiddle: jsfiddle
You needed to declare the jQuery shorthand $ before using it. I added a wrapper function that does that. On your JS, (at least on the fiddle), you did not include your slider variables - I added those.

Javascript Slider doesn't work correctly with transition end

I don't know why people's are not answering this question.I'm making a horizontal infinite loop slider. What approach i'm using is making a ul container which has 3 images, for example if there are 3 images then clone the first image and place it to the end of the slider, same with last image make clone and place it before the first image. So now total images are 5. Default slider translation always start from first image not from clone one. Here is an example. What i'm facing is, I want to reset the slider after slider comes to the last clone image with same continuous loop like a carousel slider. I try using addEventListener with the event name transitionend but that event doesn't perform correctly and showing unsatisfied behavior. Is there a way to fix this?
(function () {
var resetTranslation = "translate3d(-300px,0px,0px)";
var elm = document.querySelector('.Working');
elm.style.transform = resetTranslation;
var arr = document.querySelectorAll('.Working li');
var clonefirst,
clonelast,
width = 300;
index = 2;
clonefirst = arr[0].cloneNode(true);
clonelast = arr[arr.length - 1].cloneNode(true);
elm.insertBefore(clonelast, arr[0]);
arr[arr.length - 1].parentNode.insertBefore(clonefirst, arr[arr.length - 1].nextSibling);
//Update
arr = document.querySelectorAll('.Working li');
elm.style.transition = 'transform 1.5s ease';
setInterval(function () {
elm.style.transform = 'translate3d(-' + index * width + 'px,0px,0px)';
if (index == arr.length - 1) {
elm.addEventListener('transitionend', function () {
elm.style.transform = resetTranslation;
});
index = 1;
}
index++;
}, 4000)
})();
*{
box-sizing: border-box;
}
.wrapper{
position: relative;
overflow: hidden;
height: 320px;
width: 300px;
}
.Working{
list-style: none;
margin: 0;
padding: 0;
position: relative;
width: 3125%;
}
.Working li{
position: relative;
float: left;
}
img{
max-width: 100%;
display: block;
}
.SubContainer:after{
display: table;
clear: both;
content: "";
}
<div class="wrapper">
<ul class="SubContainer Working">
<li> <img class="" src="http://i.imgur.com/HqQb9V9.jpg" /></li>
<li><img class="" src="http://i.imgur.com/PMBBc07.jpg" /></li>
<li><img class="" src="http://i.imgur.com/GRrGSxe.jpg" /></li>
</ul>
</div>

I've messed around with your code to hack in a fix: https://jsfiddle.net/rap8o3q0/
The changed part:
var currentItem = 1;
setInterval(function () {
var getWidth = window.innerWidth;
if(len === currentItem){
i = 1;
currentItem = 1;
} else {
currentItem++;
i++;
}
var val = 'translate3d(-' + (i-1) * getWidth + 'px,0px,0px)';
UnorderedListElement.style.transform = val;
}, 3000);

Your transition end event is not immediately fire because last transition doesn't computed when last clone image appear. You can easily achieve this thing by using setTimeout function and pass number of milliseconds to wait, after that reset the translation. I don't know it's an efficient solution but i think its easily done by using this function.
Now I'm fixing your code with this.
(function () {
var elm = document.querySelector('.Working');
var arr = document.querySelectorAll('.Working li');
var clonefirst,
clonelast,
width = 300;
index = 2;
clonefirst = arr[0].cloneNode(true);
clonelast = arr[arr.length - 1].cloneNode(true);
elm.insertBefore(clonelast, arr[0]);
arr[arr.length - 1].parentNode.insertBefore(clonefirst, arr[arr.length - 1].nextSibling);
//Update
arr = document.querySelectorAll('.Working li');
setInterval(function () {
$(elm).css({
'transform': 'translate3d(-' + (index * width) + 'px,0px,0px)',
'transition': 'transform 1.5s ease'
});
if (index == arr.length - 1) {
setTimeout(function () {
$(elm).css({'transform': 'translate3d(-300px,0px,0px)', 'transition': 'none'});
index = 1;
}, 1400);
}
index++;
}, 2000)
})();
* {
box-sizing: border-box;
}
.wrapper {
position: relative;
overflow: hidden;
height: 320px;
width: 300px;
margin-top: 8px;
}
.Working {
list-style: none;
margin: 0;
padding: 0;
position: relative;
transform: translateX(-300px);
width: 3125%;
}
.Working li {
position: relative;
float: left;
}
img {
max-width: 100%;
display: block;
}
.SubContainer:after {
display: table;
clear: both;
content: "";
}
#checkboxer:checked + .wrapper {
overflow: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="checkboxer">Remove Overflow Hidden</label>
<input type="checkbox" id="checkboxer" name="checkboxer"/>
<div class="wrapper">
<ul class="SubContainer Working">
<li> <img class="" src="http://i.imgur.com/HqQb9V9.jpg" /></li>
<li><img class="" src="http://i.imgur.com/PMBBc07.jpg" /></li>
<li><img class="" src="http://i.imgur.com/GRrGSxe.jpg" /></li>
</ul>
</div>

To come back your slider in its first position, you need to trigger a transition end event after the last (3th) translation, That works only one time.
$(UnorderedListElement).one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", function ()
{
{
$(UnorderedListElement).css('transform', 'translate3d(0, 0, 0)');
}
});
But you need to make it to translate immediately. In link below you can see my slider that is very similar to yours, but works by absolute positioning and change the left property instead of transform.
Slider
Last thing: It is not a good idea to slide the hole of the image container. You must slide your images separately. In your way there is an obvious problem: When the page is sliding out the last image, there is not the next image to push it!

You can update your setInterval as
setInterval(function() {
var getWidth = window.innerWidth;
var val = 'translate3d(-' + i * getWidth + 'px,0px,0px)';
UnorderedListElement.style.transform = val;
i++;
if (i == 3) { //assuming three images here
i = 0
}
}, 3000)
var DomChanger;
(function() {
var listItem = document.querySelectorAll('.ah-slider li');
var len = listItem.length;
var getImage = document.querySelector('.ah-slider li img');
var UnorderedListElement = document.querySelector('.ah-slider');
var outerDiv = document.querySelector('.Slider');
UnorderedListElement.setAttribute('style', 'width:' + (len * 1000 + 215) + '%');
var i = 1;
DomChanger = function() {
for (var i = 0; i < len; ++i) {
listItem[i].setAttribute('style', 'width:' + window.innerWidth + 'px');
}
outerDiv.setAttribute('style', 'height:' + getImage.clientHeight + 'px');
};
setInterval(function() {
var getWidth = window.innerWidth;
var val = 'translate3d(-' + i * getWidth + 'px,0px,0px)';
UnorderedListElement.style.transform = val;
i++;
if (i == 3) {
i = 0
}
}, 3000)
})();
window.onload = function() {
DomChanger();
};
window.onresize = function() {
DomChanger();
};
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
background-color: #fff;
}
.Slider {
width: 100%;
margin: 50px 0 0;
position: relative;
overflow: hidden;
}
.ah-slider {
padding: 0;
margin: 0;
list-style: none;
position: relative;
transition: transform .5s ease;
}
.ah-slider li {
position: relative;
float: left;
}
.ah-slider li img {
max-width: 100%;
display: block;
}
.clearFix:after {
content: "";
display: table;
clear: both;
}
<div class="Slider">
<ul class="ah-slider clearFix">
<li>
<img class="" src="http://i.imgur.com/L9Zi1UR.jpg" title="" />
</li>
<li>
<img class="" src="http://i.imgur.com/FEcEwFs.jpg" title="" />
</li>
<li><img class="" src=http://i.imgur.com/hURSKNa.jpg" title="" /></li>
</ul>
</div>

how to set jquery slider on auto instead of click or hover on thumbs

i am new learner of jquery and javaScript.
i want to create a slider with a big image section and a section of thumbs.
slider should slide automatically i have coded so far is working on click or hover but i dont know how to set it on auto please help me how to modify my code. code and slider screen shoot is given below.
slider image
$("document").ready(function()
{
$("#thumbs a").mouseenter(function()
{
var smallimgpath = $(this).attr("href");
$("#bigimage img").fadeOut(function()
{
$("#bigimage img").attr("src",smallimgpath);
$("#bigimage img").fadeIn();
});
return false;
});
});
</script>
#imagereplacement{
border: 1px solid red;
width:98%;
height:400px;
margin:auto;
padding-top:8px;
padding-left:10px;
}
#imagereplacement p{
text-align:inline;
}
#bigimage{
/* border: 1px solid green; */
margin:auto;
text-align:center;
float: left;
}
#thumbs{
/*border: 1px solid yellow;*/
margin: 110px 10px;
text-align:center;
width:29%;
float: right;
}
#thumbs img{
height:100px;
width:100px;
}
//This is where all the JQuery code will go
</head>
<body>
<div id="imagereplacement">
<p id="bigimage">
<img src="images/slider1.jpg">
</p>
<p id="thumbs">
<img src="images/slider1.jpg">
<img src="images/slider2.jpg">
<img src="images/slider3.jpg">
</p>

try with this example, please let me know in case of any more question from you :
$("document").ready(function(){
var pages = $('#container li'),
current = 0;
var currentPage, nextPage;
var timeoutID;
var buttonClicked = 0;
var handler1 = function() {
buttonClicked = 1;
$('#container .button').unbind('click');
currentPage = pages.eq(current);
if ($(this).hasClass('prevButton')) {
if (current <= 0)
current = pages.length - 1;
else
current = current - 1;
nextPage = pages.eq(current);
nextPage.css("marginLeft", -604);
nextPage.show();
nextPage.animate({
marginLeft: 0
}, 800, function() {
currentPage.hide();
});
currentPage.animate({
marginLeft: 604
}, 800, function() {
$('#container .button').bind('click', handler1);
});
} else {
if (current >= pages.length - 1)
current = 0;
else
current = current + 1;
nextPage = pages.eq(current);
nextPage.css("marginLeft", 604);
nextPage.show();
nextPage.animate({
marginLeft: 0
}, 800, function() {});
currentPage.animate({
marginLeft: -604
}, 800, function() {
currentPage.hide();
$('#container .button').bind('click', handler1);
});
}
}
var handler2 = function() {
if (buttonClicked == 0) {
$('#container .button').unbind('click');
currentPage = pages.eq(current);
if (current >= pages.length - 1)
current = 0;
else
current = current + 1;
nextPage = pages.eq(current);
nextPage.css("marginLeft", 604);
nextPage.show();
nextPage.animate({
marginLeft: 0
}, 800, function() {});
currentPage.animate({
marginLeft: -604
}, 800, function() {
currentPage.hide();
$('#container .button').bind('click', handler1);
});
timeoutID = setTimeout(function() {
handler2();
}, 4000);
}
}
$('#container .button').click(function() {
clearTimeout(timeoutID);
handler1();
});
timeoutID = setTimeout(function() {
handler2();
}, 4000);
});
* {
margin: 0;
padding: 0;
}
#container {
width: 604px;
height: 453px;
position: relative;
}
#container .prevButton {
height: 72px;
width: 68px;
position: absolute;
background: url('http://vietlandsoft.com/images/buttons.png') no-repeat;
top: 50%;
margin-top: -36px;
cursor: pointer;
z-index: 2000;
background-position: left top;
left: 0
}
#container .prevButton:hover {
background-position: left bottom;
left: 0;
}
#container .nextButton {
height: 72px;
width: 68px;
position: absolute;
background: url('http://vietlandsoft.com/images/buttons.png') no-repeat;
top: 50%;
margin-top: -36px;
cursor: pointer;
z-index: 2000;
background-position: right top;
right: 0
}
#container .nextButton:hover {
background-position: right bottom;
right: 0;
}
#container ul {
width: 604px;
height: 453px;
list-style: none outside none;
position: relative;
overflow: hidden;
}
#container li:first-child {
display: list-item;
position: absolute;
}
#container li {
position: absolute;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<center>
<h1>HTML Slideshow AutoPlay (Slide Left/Slide Right)</h1>
<br />
<br />
<div id="container">
<ul>
<li><img src="http://vietlandsoft.com/images/picture1.jpg" width="604" height="453" /></li>
<li><img src="http://vietlandsoft.com/images/picture2.jpg" width="604" height="453" /></li>
<li><img src="http://vietlandsoft.com/images/picture3.jpg" width="604" height="453" /></li>
</ul>
<span class="button prevButton"></span>
<span class="button nextButton"></span>
</div>
</center>

Here an example i've created that create an auto slider CodePen Demo and JSFiddle Demo
I've used an object literal pattern to create slide variable just to avoid creating many global function and variable. Inside document.ready i've initialised my slider just by calling slide.init({....}) this way it makes it easy to reuse and work like plugin.
$.extend(slide.config,option)
this code in simple words override you're default configuration defined in config key
as i mentioned in my above comment make a function slider() and place seTimeout(slide,1000) at bottom of your function before closing
Here in this code its done in animate key of slide object it is passed with two parameter cnt and all image array, If cnt is greater then image array length then cnt is set to 0 i.e if at first when cnt keeps on increment i fadeout all image so when i make it 0 the next time the fadeToggle acts as switch
if On then Off
if Off the On
and calling function slider after a delay makes it a recursive call its just one way for continuously looping there are many other ways i guess for looping continuous you can try
well i haven't check if all images Loaded or not which is most important in slider well that you could try on your own.
var slide = {
'config': {
'container': $('#slideX'),
'delay': 3000,
'fade': 'fast',
'easing': 'linear'
},
init: function(option) {
$.extend(slide.config, option);
var imag = slide.getImages();
slide.animate(0, imag);
},
animate: function(cnt, imag) {
if (cnt >= imag.length) {
cnt = 0;
}
imag.eq(cnt).fadeToggle(slide.config.fade, slide.config.easing);
setTimeout(function() {
slide.animate(++cnt, imag);
}, slide.config.delay);
},
getImages: function() {
return slide.config.container.find('img');
}
};
$(document).ready(function() {
slide.init({
'contianer': $('#slideX'),
'delay': 3000,
'fade': 'fast',
'easing': 'swing'
});
})
body {
margin: 0;
padding: 0;
}
.contianer {
width: 100%;
height: 100%;
position: relative;
}
.container > div,
.container > div >img {
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" id="slideX">
<div id="img1">
<img src="http://imgs.abduzeedo.com/files/articles/magical-animal-photography-gregory-colbert/5.jpg" />
</div>
<div id="img2">
<img src="http://cdn-5.webdesignmash.com/trial/wp-content/uploads/2010/10/great-dog-photography-016.jpg" />
</div>
<div id="img3">
<img src="http://onlybackground.com/wp-content/uploads/2014/01/marble-beautiful-photography-1920x1200.jpg" />
</div>
</div>

Loop Carousel horizontaly javascript/jquery

I was wondering if somebody could help me write a loop for this carousel? at the moment the carousel just scrolls to the right every 3 seconds then scrolls back to the left afterwards and resets itself, I would just like it to contiuously loop infinitly so it looks cleaner, could somebody point me in the right direction or help me? i know its simpler but i'm not much of a js developer! (this is for google sites html box otherwise i would have used a jquery plugin)
<style>
.carousel {
width: 1080px;
height: 220px;
position: relative;
overflow: hidden;
background-color:white;
margin-bottom: 20px;
margin-top: 20px;
margin-left: 70px;
}
.items {
width: 1080px;
position: absolute;
}
.items > div {
font-size: 20px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.items > div > img {
padding: 10px;
}
.nav {
position: absolute;
bottom: 5px;
right: 15px;
}
.button {
cursor: pointer;
font-weight: bold;
color: #fff;
}
</style>
<div class="carousel" style="display:none;">
<div class="items">
<div>
<img src="http://i59.tinypic.com/etisye.png" border="0" alt="Alkamai Logo">
</div>
<div>
<img src="http://i59.tinypic.com/ouukxu.png" border="0" alt="AWS Logo">
</div>
<div>
<img src="http://i61.tinypic.com/16k3t43.png" border="0" alt="cover-it-live">
</div>
<div>
<img src="http://i60.tinypic.com/23wljxh.png" border="0" alt="escenic">
</div>
<div>
<img src="http://i58.tinypic.com/sbiqu1.png" border="0" alt="Livefire">
</div>
<div>
<img src="http://i58.tinypic.com/do9wep.jpg" border="0" alt="ooyala">
</div>
<div>
<img src="http://i61.tinypic.com/24werue.png" border="0" alt="varnish">
</div>
<div>
<img src="http://i60.tinypic.com/2ij14rd.png" border="0" alt="wordpress">
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"> </script>
<script>
var current_slide = 0; // zero-based
var slide_count = 4;
var slide_size = 1080;
var Direction = {
LEFT: -1,
RIGHT: 1
};
/**
* Moves to the next slide using the direction (dx) parameter.
*/
var nextSlide = function(dx) {
current_slide = (current_slide + slide_count + dx) % slide_count;
// Calculate the new value for css 'left' property and animate.
var left_offset = '-' + (current_slide * slide_size) + 'px';
$('.items').animate({'left': left_offset}, 1080);
};
$('.carousel').show();
setInterval(function(){
nextSlide(Direction.RIGHT);
}, 3000);
</script>

A slight modification to your current script can make it move forward continuously.
The changes are:
current_slide is always 1 (so as to always move forward only)
When we move .items X pixels to the left, we move the corresponding number of items to the end (the number that fits inside X pixels in width)
Updated Demo: http://jsfiddle.net/techfoobar/dWy9R/4/
Code:
var parent = $('.items');
var nextSlide = function (dx) {
// NOTE: always move forward only
current_slide = 1; //(current_slide + slide_count + dx) % slide_count;
// Calculate the new value for css 'left' property and animate.
var ileft_offset = current_slide * slide_size,
left_offset = '-' + ileft_offset + 'px',
iWidth = 0;
parent.animate({
'left': left_offset
}, 'slow', function() { // called when animation is done
iWidth = parent.find('> div:first').width();
while(ileft_offset > iWidth) {
parent.find('> div:first').appendTo(parent);
ileft_offset -= iWidth;
parent.css('left', '-' + ileft_offset + 'px');
}
});
};
A modified version that doesn't pause in between. Just goes on.
Demo: http://jsfiddle.net/techfoobar/dWy9R/5/
var nextSlide = function () {
parent.animate({
'left': '-' + slide_size + 'px'
}, 4000, 'linear', function() { // called when animation is done
var ileft_offset = slide_size,
iWidth = parent.find('> div:first').width();
while(ileft_offset > iWidth) {
parent.find('> div:first').appendTo(parent);
ileft_offset -= iWidth;
parent.css('left', '-' + ileft_offset + 'px');
iWidth = parent.find('> div:first').width();
}
nextSlide();
});
};
nextSlide(); // start it off!