I'm a newbie when it comes to jQuery and I'm fiddling around with a slider of sorts that loads images from a array and posts the result to a div. The way I have it set up it loads the image tag and image source and places it to an empty div. Now any animations in jQuery that I've seen what work in conjunction with an array have been formatted much differently. I should mention that I'm not looking for elegant, but just code that works.
Basically, is it possible to incorporate transitions with the way I'm doing it now? And if so, how? Nothing fancy, just a fade or swipe effect.
jsFiddle so far
var imgArray =
['<img src="http://placehold.it/400x300/cf5">',
'<img src="http://placehold.it/400x300/555">',
'<img src="http://placehold.it/400x300/f0f">',
'<img src="http://placehold.it/400x300/05b">']
counter = -1;
$('#nextimage').click(function () {
counter = (counter + 1) % imgArray.length;
console.log(imgArray[counter]);
document.getElementById("result1").innerHTML = (imgArray[counter]);
});
$('#previmage').click(function () {
counter = (counter - 1);
console.log(imgArray[counter]);
document.getElementById("result1").innerHTML = (imgArray[counter]);
});
html
<div class="container">
<div class="slider_wrapper">
<div id="slider">
<div class="img-wrap">
<div id="result1"></div>
</div>
</div>
</div>
</div>
<div id="footer">
<img title="Previous Image" alt="prev image" src="https://dl.dropboxusercontent.com/u/65639888/image/prev.png">
<img title="Next Image" alt="next image" src="https://dl.dropboxusercontent.com/u/65639888/image/next.png">
</div>
css
body {
background-color:black;
}
.container{
padding:5px;
border:1px dashed black;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
background: black;
}
.slider_wrapper{
overflow:hidden;
position:relative;
max-width:100%;
height:auto;
top:auto;
border-style: dashed;
border-color: white;
}
#slider{
position: relative;
list-style: none;
overflow: hidden;
margin:0px;
border-style: solid;
border-color: green;
}
#slider img{
width: 100%;
height:auto;
position: relative;
float: left;
}
.nvgt{
position:absolute;
top: 0px;
height: 100%;
width: 50%;
opacity: 0;
}
#footer {
position: fixed;
bottom: 0;
width: 100%;
background: BLACK;
line-height: 2;
text-align: center;
color: #FFFFFF;
font-size: 14px;
font-weight: bold;
text-shadow: 0 1px 0 #84BAFF;
box-shadow: 0 0 15px #FFFFFF;
opacity: 0.1;
padding:0;
margin:0;
}
#footer img {
padding-top:10px;
padding-bottom: 5px;
padding-right:20px;
padding-left:20px;
height: 30px;
}
#footer:hover {
opacity: 1;
}
ul, menu, dir, html, body {
-webkit-margin-end: 0px;
-webkit-padding-start: 0px;
margin:0px;
}
The trick is to wait until the image has been loaded.
var imgArray =
['<img src="http://placehold.it/400x300/cf5">',
'<img src="http://placehold.it/400x300/555">',
'<img src="http://placehold.it/400x300/f0f">',
'<img src="http://placehold.it/400x300/05b">']
counter = -1;
function imgTransition() {
$('#result1').fadeOut(300, function() {
$('#result1').html(imgArray[counter]);
$('#result1 > img').on('load', function() {
$('#result1').fadeIn(500);
});
});
};
$('#nextimage').click(function () {
counter = (counter + 1) % imgArray.length;
console.log(imgArray[counter]);
imgTransition();
});
$('#previmage').click(function () {
counter = (counter - 1);
console.log(imgArray[counter]);
imgTransition();
});
JSFiddle
see jsfiddle
var imgArray =
['<img src="http://placehold.it/400x300/cf5">',
'<img src="http://placehold.it/400x300/555">',
'<img src="http://placehold.it/400x300/f0f">',
'<img src="http://placehold.it/400x300/05b">'],
counter = -1;
var animate = false; //stopping invalid click during animation
function animatable() {
$('#result1').slideUp(300, function() {
$('#result1').html(imgArray[counter]);
$('#result1 > img').on('load', function() {
//$('#result1').fadeIn(500);
$( '#result1' ).animate({
height: "toggle"
}, 1000 , function(){
animate = false;
});
});
});
};
function next(){
if(!animate){
animate = true;
counter = (counter + 1) % imgArray.length;
console.log(counter);
$("#result1").fadeIn().html(imgArray[counter]);
animatable();
}
};
next();
$('#nextimage').click(next);
$('#previmage').click(function () {
if(!animate){
animate = true;
if(counter=='0'){
counter= imgArray.length;
}
counter = (counter - 1);
console.log(imgArray[counter]);
$("#result1").html(imgArray[counter]);
animatable();
}
});
update with animatable
Previous and next button working properly with fade out effect
var imgArray = ['<img src="http://placehold.it/400x300/cf5">',
'<img src="http://placehold.it/400x300/555">',
'<img src="http://placehold.it/400x300/f0f">',
'<img src="http://placehold.it/400x300/05b">']
counter = -1;
function imgTransition() {
$('#result1').fadeOut(300, function() {
$('#result1').html(imgArray[counter]);
$('#result1 > img').on('load', function() {
$('#result1').fadeIn(500);
});
});
};
function next() {
counter = (counter + 1) % imgArray.length;
console.log(counter);
imgTransition();
};
next();
$('#nextimage').click(next);
$('#previmage').click(function() {
if (counter == '0') {
counter = imgArray.length;
}
counter = (counter - 1);
console.log(imgArray[counter]);
imgTransition();
});
JSFIIDLE
Related
Ok, i'm stuck.
I need to implement animation on my slider over the jQuery. So far i done arrows (navigation) functionality but, can't figure it out how to add sliding effect (1, 2 seconds) after clicking the "next" and "prev" buttons.
Anyone have idea?
$(document).ready(function() {
$('.next').on('click', function() {
var currentImg = $('.current');
var nextImg = currentImg.next();
if(nextImg.length == 0) {
nextImg = $('.slider-secondary img').first();
}
currentImg.removeClass('current');
nextImg.addClass('current');
});
$('.previous').on('click', function() {
var currentImg = $('.current');
var prevImg = currentImg.prev();
if(prevImg.length == 0) {
prevImg = $('.slider-secondary img').last();
}
currentImg.removeClass('current');
prevImg.addClass('current');
});
});
<div class="container">
<div class="slider-primary">
<img src="Assets/arrow-blue-left.png" class="previous" alt="Prev">
<div class="slider-secondary">
<img src="Assets/slider-image-1.jpg" class="current">
<img src="Assets/slider-image-2.jpg">
<img src="Assets/slider-image-3.jpg">
<img src="Assets/slider-image-4.jpg">
<img src="Assets/slider-image-5.jpg">
<img src="Assets/slider-image-6.jpg">
<img src="Assets/slider-image-7.jpg">
<img src="Assets/slider-image-8.jpg">
<img src="Assets/slider-image-9.jpg">
</div>
<img src="Assets/arrow-blue-right.png" class="next" alt="Next">
</div>
</div>
Thanks a lot guys for your help and references. I appreciate it.
Slider must not be automatic, it can work only on arrows(navigation) click, which are (and must be) images/icons.
Also it's not alowed to use any existing scripts, plugins, etc.. so i tried to implement some further logic having in mind and considering all of the conditions above.
It's actually one part of the code test. And must be in jQuery in which i don't flow so well obviously.
Here is the css part also
*{
margin: 0;
padding: 0;
}
.container, .slider-primary{
width:100%;
margin:auto;
overflow: hidden;
position: relative;
}
.slider-secondary{
width:100%;
height:600px;
position:relative;
overflow:hidden;
float:left;
}
.slider-secondary img{
display:none;
width:100%;
height:100%;
}
.slider-secondary img.current{
display:inline-block;
}
.previous, .next{
float:left;
cursor: pointer;
position: absolute;
top: 45%;
width: 30px;
height: 40px;
}
.previous{
margin-left:35px;
z-index:100;
}
.next{
margin-left:-65px;
z-index:100;
}
You can use jQuery animate() Method. Here is the link to the documentation.
But I would suggest using any jQuery lightweight library for the same.
You can go for Responsive and Flexible Mobile Touch Slider - Swiper
Demo of the same!
Here is one working example. Hope it'll help you. for the full reference visit codepen
$('.slider').each(function() {
var $this = $(this);
var $group = $this.find('.slide_group');
var $slides = $this.find('.slide');
var bulletArray = [];
var currentIndex = 0;
var timeout;
function move(newIndex) {
var animateLeft, slideLeft;
advance();
if ($group.is(':animated') || currentIndex === newIndex) {
return;
}
bulletArray[currentIndex].removeClass('active');
bulletArray[newIndex].addClass('active');
if (newIndex > currentIndex) {
slideLeft = '100%';
animateLeft = '-100%';
} else {
slideLeft = '-100%';
animateLeft = '100%';
}
$slides.eq(newIndex).css({
display: 'block',
left: slideLeft
});
$group.animate({
left: animateLeft
}, function() {
$slides.eq(currentIndex).css({
display: 'none'
});
$slides.eq(newIndex).css({
left: 0
});
$group.css({
left: 0
});
currentIndex = newIndex;
});
}
function advance() {
clearTimeout(timeout);
timeout = setTimeout(function() {
if (currentIndex < ($slides.length - 1)) {
move(currentIndex + 1);
} else {
move(0);
}
}, 4000);
}
$('.next_btn').on('click', function() {
if (currentIndex < ($slides.length - 1)) {
move(currentIndex + 1);
} else {
move(0);
}
});
$('.previous_btn').on('click', function() {
if (currentIndex !== 0) {
move(currentIndex - 1);
} else {
move(3);
}
});
$.each($slides, function(index) {
var $button = $('<a class="slide_btn">•</a>');
if (index === currentIndex) {
$button.addClass('active');
}
$button.on('click', function() {
move(index);
}).appendTo('.slide_buttons');
bulletArray.push($button);
});
advance();
});
Try below way.
I have created a demo for you.
Please Find below code:
Html:
<h1>Incredibly Basic Slider</h1>
<div id="slider">
>
<
<ul>
<li>SLIDE 1</li>
<li style="background: #aaa;">SLIDE 2</li>
<li>SLIDE 3</li>
<li style="background: #aaa;">SLIDE 4</li>
</ul>
</div>
<div class="slider_option">
<input type="checkbox" id="checkbox">
<label for="checkbox">Autoplay Slider</label>
</div>
Css:
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
html {
border-top: 5px solid #fff;
background: #58DDAF;
color: #2a2a2a;
}
html, body {
margin: 0;
padding: 0;
font-family: 'Open Sans';
}
h1 {
color: #fff;
text-align: center;
font-weight: 300;
}
#slider {
position: relative;
overflow: hidden;
margin: 20px auto 0 auto;
border-radius: 4px;
}
#slider ul {
position: relative;
margin: 0;
padding: 0;
height: 200px;
list-style: none;
}
#slider ul li {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
width: 500px;
height: 300px;
background: #ccc;
text-align: center;
line-height: 300px;
}
a.control_prev, a.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;
}
a.control_prev:hover, a.control_next:hover {
opacity: 1;
-webkit-transition: all 0.2s ease;
}
a.control_prev {
border-radius: 0 2px 2px 0;
}
a.control_next {
right: 0;
border-radius: 2px 0 0 2px;
}
.slider_option {
position: relative;
margin: 10px auto;
width: 160px;
font-size: 18px;
}
Js:
jQuery(document).ready(function ($) {
$('#checkbox').change(function(){
setInterval(function () {
moveRight();
}, 3000);
});
var slideCount = $('#slider ul li').length;
var slideWidth = $('#slider ul li').width();
var slideHeight = $('#slider ul li').height();
var sliderUlWidth = slideCount * slideWidth;
$('#slider').css({ width: slideWidth, height: slideHeight });
$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
$('#slider ul li:last-child').prependTo('#slider ul');
function moveLeft() {
$('#slider ul').animate({
left: + slideWidth
}, 200, function () {
$('#slider ul li:last-child').prependTo('#slider ul');
$('#slider ul').css('left', '');
});
};
function moveRight() {
$('#slider ul').animate({
left: - slideWidth
}, 200, function () {
$('#slider ul li:first-child').appendTo('#slider ul');
$('#slider ul').css('left', '');
});
};
$('a.control_prev').click(function () {
moveLeft();
});
$('a.control_next').click(function () {
moveRight();
});
});
I hope this will help you.
Let me know if you have any query.
Thank you.
I am trying to do a slideshow with images that I insert.
I already can do the insert but I can´t fix the eliminate issue.
The issue is that when i delete an image the selected image is deleted but when I am going to delete another one I delete 2 images and then 3 images and 4 images...
$(document).ready(function() {
var p = 0;
//Check File API support
if (window.File && window.FileList && window.FileReader) {
$('#filePhoto').change(function(event) {
var files = event.target.files; //FileList object
var output = document.getElementById("result");
var slides = document.getElementsByClassName("teste");
var column = document.getElementById("column");
var _i = 1;
var x = 0;
if (slides.length == 0) {
_i = 1;
} else {
_i = slides.length + 1;
}
for (var i = 0; i < files.length; i++) {
var file = files[i];
//Only pics
// if(!file.type.match('image'))
if (file.type.match('image.*')) {
if (this.files[0].size < 2097152) {
// continue;
var picReader = new FileReader();
picReader.addEventListener("load", function(event) {
var picFile = event.target;
var divs = document.createElement("div");
divs.className = "teste";
$(divs).attr('id', _i);
if (slides.length == 0) {
divs.style.cssText = 'display:block;';
} else {
divs.style.cssText = 'display:none;';
}
divs.innerHTML = "<img class='thumbnail' id=" + (_i + 1) + "_img src='" + picFile.result + "'" +
"title='' />" + "<button class='eli' id='eliminar'><i class='remove icon'></i>x</button>"
output.insertBefore(divs, null);
plusSlides(+1);
var divs2 = document.createElement("div");
for (x = 1; x <= slides.length; x++) {
console.log(slides);
divs2.className = "column2";
$(divs2).attr('id', x + "_");
divs2.innerHTML = "<img class='demo' src='" + picFile.result + "'" +
"title='' onclick='currentSlide(" + x + ")'/>"
column.insertBefore(divs2, null);
}
_i++;
});
//Read the image
$('#clear, #result').show();
picReader.readAsDataURL(file);
} else {
alert("Image Size is too big. Minimum size is 2MB.");
$(this).val("");
}
} else {
alert("You can only upload image file.");
$(this).val("");
}
}
});
$('#eliminar').click(function() {
var a = $(this).parent().attr('id');
// alert(a);
$("#" + a).remove();
console.log($("#" + a));
$("#" + a + "_").remove();
plusSlides(-1);
var elms = $("#column");
var sd = $(".teste");
//console.log($(elms.children()).attr("id"));
$.each(elms.children(), function(k, v) {
$(v).attr("id", (k + 1) + "_");
$(v).attr("onclick", "currentSlide(" + (k + 1) + ")");
});
$.each(sd, function(k1, v1) {
$(v1).attr("id", k1 + 1);
});
});
} else {
console.log("Your browser does not support File API");
}
});
var slides = document.getElementsByClassName("teste");
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("teste");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
if(slides.length!=''){
slides[slideIndex-1].style.display = "block";
}
if(slides.length>1){
$("#next").css("display", "block");
$("#prev").css("display", "block");
}else {
$("#next").css("display", "none");
$("#prev").css("display", "none");
}
}
.thumbnail{
width: 100%;
margin:0 auto !important;
float: left;
height:400px !important;
}
#clear{
display:none;
}
.result {
margin:0 auto;
float: left;
width: 100% !important;
position:relative;
overflow:hidden;
width:auto;
height:400px !important;
background:transparent;
border:2px dashed #e8e8e8;
cursor:pointer;
padding:5px;
color:#555;
z-index:3;
font-family:'Segoe UI';
font-weight:bold;
}
.eli{
color: black;
border:1px solid black;
background: none;
position: absolute;
top:30px;
right:5px;
outline: inherit;
margin-bottom: -10px !important;
z-index: 2000000;
}
.column2 {
float: left;
width: 25%;
}
.column {
left:0;
width:1200px;
}
.bstimeslider {
width:500px;
height:40px;
background:#ccc;
position:relative;
}
#leftArrow {
width:40px;
height:40px;
background:#ff0000;
position:absolute;
left:0px;
}
#rightArrow {
width:40px;
height:40px;
background:#ff0000;
position:absolute;
right:0px;
}
/* Next & previous buttons */
.prev,
.next {
display: none;
cursor: pointer;
position: absolute;
width: auto;
padding: 16px;
top:42%;
color: black;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select:none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev {
left: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.demo {
opacity: 0.6;
float: left;
width: 100% !important;
}
.active,
.demo:hover {
opacity: 1;
}
.blok{
display: block !important;
}
.nonee{
display: none!important;
}
.uploader {
position:relative;
overflow:hidden;
width:auto;
height:400px;
background:transparent;
border:2px dashed #e8e8e8;
cursor:pointer;
padding:5px;
color:#555;
z-index:3;
font-family:'Segoe UI';
font-weight:bold;
}
#filePhoto{
display:none;
}
.lol{
position:absolute;
width:100%;
height:402px;
top:-1px;
left:-1px;
border:none;
background-color: #eee;
}
.uploadd {
padding:10px !important;
margin-top:90px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div class="uploadd">
<div id="uploader" class="uploader ">
<output id="result" class=" lol" />
<label for="filePhoto">
<span id="butao" class="circular ui icon button file-button"
style="position:absolute;top:43%;left:47%;margin-left:3.500
!important;border-radius:100%;background:#2185d0;">
<i style="margin:0 auto;text-align:center;font-size:24px;color:white;"
class="plus icon xa">Add</i>
</span>
</label>
<input class="file" type="file" name="filePhoto" id="filePhoto" multiple/>
<a class="prev" name="prev" id="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" name="next" id="next" onclick="plusSlides(1)">❯</a>
</div>
<output class="column" id="column" name="column" />
</div>
I have built a really simple carousel but there is one issue. In my carousel i have three slides, a previous button and a next button. What I want is when I click the next button and is on the last slide to go to the first slide. Moreover, when i click the previous button and is on the first slide to go to the last slide. How can i achieve it?
Thanks
//Main Container
var carouseContainer = document.querySelector("#carousel-container");
//Carousel Container
var carousel = document.querySelector("#carousel");
//Carousel Children
var carouselChildren = document.querySelector("#carousel").children;
//Carousel Slides
var carouselOne = document.querySelector("#carousel-one")
var carouseTwo = document.querySelector("#carousel-two")
var carouselThree = document.querySelector("#carousel-three")
//Buttons
var buttonPrev = document.querySelector("#button-left");
var buttonNext = document.querySelector("#button-right");
buttonNext.addEventListener("click", function(){
for ( i = 0; i < carouselChildren.length; i++) {
carouselChildren[i].style.transform +="translateX(-300px)";
carouselChildren[i].style.transition +="all 2s ease";
}
});
buttonPrev.addEventListener("click", function(){
for ( i = 0; i < carouselChildren.length; i++) {
carouselChildren[i].style.transform +="translateX(300px)";
carouselChildren[i].style.transition +="all 2s ease";
}
});
* {
margin:0px;
padding:0px;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
#carousel-container {
width:300px;
height:300px;
overflow: hidden;
margin: 0 auto;
border:1px solid black;
}
#carousel {
width:900px;
height:300px;
}
#carousel-one, #carousel-two,#carousel-three {
width:300px;
height:300px;
float:left;
}
#carousel-one {
background:red;
}
#carousel-two {
background:green;
}
#carousel-three {
background:blue;
}
#buttons {
text-align: center;
margin-top:20px;
}
button {
border:none;
color:#fff;
padding:10px 20px;
display: inline-block;
margin-right:20px;
cursor: pointer;
}
<div id="carousel-container">
<div id="carousel">
<div id="carousel-one">
<h1>Carousel One Main Heading</h1>
<h2>Carousel One Sub Heading</h2>
</div>
<div id="carousel-two"></div>
<div id="carousel-three"></div>
</div>
</div>
<div id="buttons">
<button id="button-left">Previous</button>
<button id="button-right">Next</button>
</div>
Here's a working example from your code:
//Main Container
var carouseContainer = document.querySelector("#carousel-container");
//Carousel Container
var carousel = document.querySelector("#carousel");
//Carousel Children
var carouselChildren = document.querySelector("#carousel").children;
//Carousel Slides
var carouselOne = document.querySelector("#carousel-one")
var carouseTwo = document.querySelector("#carousel-two")
var carouselThree = document.querySelector("#carousel-three")
//Buttons
var buttonPrev = document.querySelector("#button-left");
var buttonNext = document.querySelector("#button-right");
var current = 0,
total = 3;
function moveTo(count) {
var translate = 'translateX(' + (-300 * current) + 'px)';
for (i = 0; i < carouselChildren.length; i++) {
carouselChildren[i].style.transform = translate;
}
}
buttonNext.addEventListener("click", function() {
current++;
if (current > total - 1) {
current = 0;
}
moveTo(current);
});
buttonPrev.addEventListener("click", function() {
current--;
if (current < 0) {
current = total - 1;
}
moveTo(current);
});
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
#carousel-container {
width: 300px;
height: 300px;
overflow: hidden;
margin: 0 auto;
border: 1px solid black;
}
#carousel {
width: 900px;
height: 300px;
}
#carousel-one,
#carousel-two,
#carousel-three {
width: 300px;
height: 300px;
float: left;
transition: all 2s ease;
}
#carousel-one {
background: red;
}
#carousel-two {
background: green;
}
#carousel-three {
background: blue;
}
#buttons {
text-align: center;
margin-top: 20px;
}
button {
border: none;
color: #fff;
padding: 10px 20px;
display: inline-block;
margin-right: 20px;
cursor: pointer;
}
<div id="carousel-container">
<div id="carousel">
<div id="carousel-one" class="slide">
<h1>Carousel One Main Heading</h1>
<h2>Carousel One Sub Heading</h2>
</div>
<div id="carousel-two" class="slide"></div>
<div id="carousel-three" class="slide"></div>
</div>
</div>
<div id="buttons">
<button id="button-left">Previous</button>
<button id="button-right">Next</button>
</div>
This is an example, however, I think you can improve a lot your code :-) . Once I did a carousel and the magic was with the active class and the animation, I mean if you can apply the translate to the active class and identify the direction according to the prev or next button, you will achieve it.
//Main Container
var carouseContainer = document.querySelector("#carousel-container");
//Carousel Container
var carousel = document.querySelector("#carousel");
//Carousel Children
var carouselChildren = document.querySelector("#carousel").children;
//Carousel Slides
var carouselOne = document.querySelector("#carousel-one")
var carouseTwo = document.querySelector("#carousel-two")
var carouselThree = document.querySelector("#carousel-three")
//Buttons
var buttonPrev = document.querySelector("#button-left");
var buttonNext = document.querySelector("#button-right");
buttonNext.addEventListener("click", function(){
var activeSlide = 0,
translate = 'translateX(-300px)';
for ( i = 0; i < carouselChildren.length; i++) {
if (carouselChildren[i].className) {
activeSlide = i;
}
carouselChildren[i].style.transform += translate;
carouselChildren[i].style.transition +="all 2s ease";
}
// remove the active class for the current slide
carouselChildren[activeSlide].className = '';
if(activeSlide + 1 >= carouselChildren.length){
carouselChildren[0].className = 'active';
for ( i = 0; i < carouselChildren.length; i++) {
carouselChildren[i].style.transform = 'translateX(0px)';
}
} else{
carouselChildren[++activeSlide].className = 'active';
}
});
buttonPrev.addEventListener("click", function(){
console.log(carouselChildren.length);
for ( i = 0; i < carouselChildren.length; i++) {
carouselChildren[i].style.transform +="translateX(300px)";
carouselChildren[i].style.transition +="all 2s ease";
}
});
* {
margin:0px;
padding:0px;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
#carousel-container {
width:300px;
height:300px;
overflow: hidden;
margin: 0 auto;
border:1px solid black;
}
#carousel {
width:900px;
height:300px;
}
#carousel-one, #carousel-two,#carousel-three {
width:300px;
height:300px;
float:left;
}
#carousel-one {
background:red;
}
#carousel-two {
background:green;
}
#carousel-three {
background:blue;
}
#buttons {
text-align: center;
margin-top:20px;
}
button {
border:none;
color:#fff;
padding:10px 20px;
display: inline-block;
margin-right:20px;
cursor: pointer;
}
<div id="carousel-container">
<div id="carousel">
<div id="carousel-one" class="active">
<h1>Carousel One Main Heading</h1>
<h2>Carousel One Sub Heading</h2>
</div>
<div id="carousel-two"></div>
<div id="carousel-three"></div>
</div>
</div>
<div id="buttons">
<button id="button-left">Previous</button>
<button id="button-right">Next</button>
</div>
Use a variable to keep track of the current slide and change the transform property based on it. I have made the function for the next button and you can use the same concept for the previous button as well.
var currentSlide = 1; // is in first slide
buttonNext.addEventListener("click", function(){
if(currentSlide == 3){
currentSlide = 0;
}
for ( i = 0; i < carouselChildren.length; i++) {
carouselChildren[i].style.transform="translateX("+(currentSlide*-300)+"px)";
carouselChildren[i].style.transition ="all 2s ease"; // you don't need to do this as well if you define it in css file once
}
currentSlide++;
});
P.S. It's a bad practice to add transform property to existing css transform property like you did in your code as you are adding further calculations that needs to happen in order to animate (translate) the divs. Always replace them.
Having a slider with images implementation from array, cant figure out why images dont want to be shown up from array, tryed to make a path but it didnt work.I want this code to reflect this image every time a push the button: fpoimg.com/100x100.
Im trying to fix it only with clean javascript.
Here is a sandbox
var slider = {
slides: ['100x100', '100x100', '100x100', '100x100'],
frame:0,
set:function(image){
path = path || 'http://fpoimg.com/';
document.getElementById('scr').style.backgroundImage ="url ("+path+ image+")";
},
init:function() {
this.set(this.slides[this.frame]);
},
left:function() {
this.frame--;
if(frame < 0) this.frame = this.slides.length - 1;
this.set(this.slides[this.frame]);
},
right:function() {
if(this.frame == this.slides.length) this.frame = 0;
this.set(this.slides[this.frame]);
}
};
window.onload = function() {
slider.init();
setInterval(function() {
slider.right();
},5000);
};
.scr {
margin:20px auto;
width: 600px;
height: 320px;
margin-top:20px;
background-color: white;
background-size:cover;
}
button {
position: absolute;
top: 150px;
width: 25px;
height: 150px;
font-size: 30px;
text-align: center;
background:none;
border:none;
}
.left {
left:25px;
}
.right {
right:25px;
}
<body>
<button class="left" onclick="slider.left();"><</button>
<div class="scr"></div>
<button class="right" onclick="slider.right();">></button>
</body>
On Line 6 of your Javascript, you have used getElementById('scr'). You have no element with an Id or scr, you needed to use getElementsByClassName('scr')
Your new code:
var slider = {
slides: ['100x100', '100x100', '100x100', '100x100'],
frame: 0,
set: function(image) {
path = path || 'http://fpoimg.com/';
document.getElementsByClassName('scr').style.backgroundImage = "url (" + path + image + ")";
},
init: function() {
this.set(this.slides[this.frame]);
},
left: function() {
this.frame--;
if (frame < 0) this.frame = this.slides.length - 1;
this.set(this.slides[this.frame]);
},
right: function() {
if (this.frame == this.slides.length) this.frame = 0;
this.set(this.slides[this.frame]);
}
};
window.onload = function() {
slider.init();
setInterval(function() {
slider.right();
}, 5000);
};
.scr {
margin: 20px auto;
width: 600px;
height: 320px;
margin-top: 20px;
background-color: white;
background-size: cover;
}
button {
position: absolute;
top: 150px;
width: 25px;
height: 150px;
font-size: 30px;
text-align: center;
background: none;
border: none;
}
.left {
left: 25px;
}
.right {
right: 25px;
}
<body>
<button class="left" onclick="slider.left();">
</button>
<div class="scr"></div>
<button class="right" onclick="slider.right();"></button>
</body>
It seems you've got getElementById() when you meant getElementsByClassName()
I have been trying to use this fading slideshow code that I have found from this website.. http://blog.crondesign.com/2012/01/free-javascript-for-rotating-website.html
My main problem is that my divs will not stack on top of each other and I have researched of different ways like z-indexing and position:absolute and none of them seem to work. Can someone please have a look at my code to see what isn't working!
HTML:
<div id="slideshow_container">
<div id="banner2" class="banner"></div>
<div id="banner3" class="banner"></div>
<div id="banner4" class="banner"></div>
<div id="banner5" class="banner"></div>
<div id="banner1" class="banner"></div>
</div>
CSS
#slideshow_container
{
height:486px;
width: 806px;
margin-top: 0%;
margin:auto;
background-color:green;
display:block;
}
.banner
{
z-index:1;
height:486px;
width:806px;
top:0px;
background:#FFF;
border:solid 1px #CCC
position: absolute;
}
#banner1
{
background:green;
z-index: 5;
}
#banner2
{
background: blue;
z-index:6;
}
#banner3
{
background:#F90;
}
#banner4
{
background:#FFC;
}
#banner5
{
background:#99CCFF;
}
#slideshow_container
{
height:486px;
width: 806px;
margin-top: 0%;
margin:auto;
background-color:green;
display:block;
}
.banner
{
z-index:1;
height:486px;
width:806px;
top:0px;
background:#FFF;
border:solid 1px #CCC
position: absolute;
}
#banner1
{
background:green;
z-index: 5;
}
#banner2
{
background: blue;
z-index:6;
}
#banner3
{
background:#F90;
}
#banner4
{
background:#FFC;
}
#banner5
{
background:#99CCFF;
}
Javascript
var imageCount = 5; //how many images in total?
var changeSpeed = 3; //how many seconds between fades?
var fadeSpeed = 0.5; //how many seconds should the fade take?
var fps = 25; //animation frames per second
//BANNER FUNCTIONS:
var topImgID
var changeInterval
function $(id)
{
return(document.getElementById(id));
}
function changeOpac(obj, opacity)
{
obj = obj.style;
obj.opacity = (opacity / 100);
obj.MozOpacity = (opacity / 100);
obj.KhtmlOpacity = (opacity / 100);
obj.filter = "alpha(opacity=" + opacity + ")";
}
function changeImage()
{
var nextImgID = ( topImgID+1 <= imageCount ? topImgID+1 : 1 ); //get id number of next image in list
var nextImg = $('banner'+nextImgID);
var lastImg = $('banner'+topImgID);
var opac = 0;
changeOpac( nextImg, opac) //make next image invisible, then bring it to the top:
lastImg.style.zIndex = 2;
nextImg.style.zIndex = 3;
var fadeInterval = setInterval(function()
{
if(opac < 100)
{
opac += Math.ceil(100/(fadeSpeed*fps));
changeOpac(nextImg, opac);
}
else
{
lastImg.style.zIndex = 1;
clearInterval(fadeInterval);
}
}, 1000/fps);
topImgID = nextImgID;
}
function startBanner(firstImageID)
{
topImgID = (firstImageID==undefined ? 1+Math.floor(Math.random()*(imageCount)) : firstImageID);
$('banner'+topImgID).style.zIndex = 2;
changeInterval = setInterval(changeImage, changeSpeed*1000);
}
you forgot to close your border styles, so position:absolute isn't being read:
.banner
{
z-index:1;
height:486px;
width:806px;
top:0px;
background:#FFF;
border:solid 1px #CCC <----------- missing ';'
position: absolute;
}