Setinterval() function need to reset

Setinterval() function need to reset - javascript

I'm trying to create section with couple images.Idea is to dynamically change those images, but my problem is: when section is loaded and animation is complete whole process stop but it should continue all over again.
Can somebody help me to achieve that?
Thank you.
Here is my code so far:
$(document).ready(function(){
setInterval(function(){
var $slide = $('div.slideUp');
$slide.removeClass('slideUp');
$slide.next().addClass('slideUp');
},2000);
});
.slideSection{
background: #000;
float: left;
width: 100%;
padding: 25px;
position: relative;
overflow: hidden;
}
.block{
width: 100%;
float: left;
display: none;
}
.block img {
float: left;
width: 25%;
height: 100px;
padding: 10px;
margin: 0;
}
.slideUp{
display: block;
animation: slideUp 1s 1;
position: relative;
}
#keyframes slideUp{
from{
opacity: .0;
transform: translate(0, 300px);
}
to{
opacity: 1;
transform: translate(0, 0);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="slideSection">
<div class="block slideUp ">
<img src="img/css.png" alt="css">
<img src="img/js.png" alt="js">
<img src="img/css.png" alt="css">
<img src="img/query.png" alt="js">
</div>
<div class="block">
<img src="img/java.png" alt="css">
<img src="img/sql.png" alt="js">
<img src="img/js.png" alt="js">
</div>
<div class="block">
<img src="img/query.png" alt="js">
<img src="img/java.png" alt="css">
</div>
</section>

You could keep the interval running, but change the way you look for the next slide: check if there is a next one, if so, take it, otherwise pick the first one:
$slide = $slide.next().length ? $slide.next() : $slide.siblings(':first')
$slide.addClass('slideUp');

Your loop is not infinite because last element do not have next() elements. You should check for that to appear and then take first element of collection instead.
Check the snippet below.
$(document).ready(function(){
setInterval(function(){
var $slide = $('div.slideUp');
$slide.removeClass('slideUp');
var $nextSlide = $slide.next();
if(!$nextSlide.length) {
$nextSlide = $('div.block').eq(0);
}
$nextSlide.addClass('slideUp');
}, 2000);
});
.slideSection{
background: #000;
float: left;
width: 100%;
padding: 25px;
position: relative;
overflow: hidden;
}
.block{
width: 100%;
float: left;
display: none;
}
.block img {
float: left;
width: 25%;
height: 100px;
padding: 10px;
margin: 0;
}
.slideUp{
display: block;
animation: slideUp 1s 1;
position: relative;
}
#keyframes slideUp{
from{
opacity: .0;
transform: translate(0, 300px);
}
to{
opacity: 1;
transform: translate(0, 0);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="slideSection">
<div class="block slideUp ">
<img src="img/css.png" alt="css">
<img src="img/js.png" alt="js">
<img src="img/css.png" alt="css">
<img src="img/query.png" alt="js">
</div>
<div class="block">
<img src="img/java.png" alt="css">
<img src="img/sql.png" alt="js">
<img src="img/js.png" alt="js">
</div>
<div class="block">
<img src="img/query.png" alt="js">
<img src="img/java.png" alt="css">
</div>
</section>

Thank you all for help I appreciate that.
Here is the another function that working properly.
Sincerly
$(document).ready(function(){
var currentIndex = 0,
items = $('.block'),
itemAmt = items.length;
function cycleItems() {
var item = $('.block').eq(currentIndex);
items.removeClass('slideUp');
item.addClass('slideUp');
}
var autoSlide = setInterval(function() {
currentIndex += 1;
if (currentIndex > itemAmt - 1) {
currentIndex = 0;
}
cycleItems();
}, 2000);
});

Related

javascript img slide not fading

I have a javascript that changes the IMG every 5 seconds and it works fine. The issue is I tried to add a fade transition effect on it but it is not being applied to it. Where did I go wrong? Any help is appreciated. Thanks in advance.
let images = ['Img2.jpg', 'Img3.jpg', 'Img4.jpg', 'Img5.jpg'];
let index = 0;
const imgElement = document.querySelector('#mainDisplayImg');
function change() {
imgElement.src = images[index];
index > 1 ? index = 0 : index++;
}
window.onload = function() {
setInterval(change, 5000);
};
.mainDisplay {
display: flex;
justify-content: center;
position: absolute;
top: 2%;
}
.mainDisplay img {
width: 75%;
height: 600px;
}
.slide {
width: 100%;
height: 100%;
opacity: 0;
z-index: 1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
.active {
opacity: 1;
z-index: 2;
}
<div class="mainDisplay">
<img id="mainDisplayImg" src="Img1.jpg">
<img class="slide active" src="Img2.jpg" style="display: none">
<img class="slide" src="Img3.jpg" style="display: none">
<img class="slide" src="Img4.jpg" style="display: none">
<img class="slide" src="Img5.jpg" style="display: none">
</div>

First of all, if you want any kind of transitions, don't use display: none it just doesn't play nice. You can "hide" elements by placing them outside of view area instead;
Second since you already have predefined images in the html, you don't have to duplicate them in javascript, you can cycle through html elements instead and set active class:
let index = 0;
const imgElement = document.querySelector('#mainDisplayImg');
const slides = document.querySelectorAll(".mainDisplay .slide");
function change() {
if (++index >= slides.length)
index = 0;
for(let i = 0; i< slides.length; i++)
slides[i].classList.toggle("active", i == index);
}
window.onload = function() {
setInterval(change, 2000);
};
.mainDisplay {
display: flex;
justify-content: center;
position: absolute;
top: 2%;
}
.mainDisplay img {
width: 75%;
height: 600px;
}
.slide {
width: 100%;
height: 100%;
opacity: 0;
z-index: 1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
position: absolute;
top: -100wh; /* hide from view */
}
.active {
opacity: 1;
z-index: 2;
position: initial;
}
<div class="mainDisplay">
<img class="slide active" src="https://lh3.googleusercontent.com/IlhDxQVsR17dwwER5xYZJej867KrdSx0K5eyRP2RFP4eQJMD2pi0ZGBhrMOcajBUP9M54lpmIr90JecPUFGPaRe3sDZ82RvHBSw1rw-YJvQs7J8K3g=w1024-h683-n-l50-sg-rj">
<img class="slide" src="https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w1024-h683-n-l50-sg-rj">
<img class="slide" src="https://lh3.googleusercontent.com/dTH5_J82_TqXaLW_Hzq1rbMVqfzRWG9PkcKgHdjXphAy9M4MZF5Q7_cQZeM1kbqEYMysrBLlY4szACDZwIbP7Jm17BnGNjT0Tht8Qw=w1024-h683-n-l50-sg-rj">
<img class="slide" src="https://lh3.googleusercontent.com/fl-GT6w3Ls6RT4vYnbkuYUyLY3lZJH8VtZ7xzxiym9YYaoVRCnZehdz6Icd0oAf6i3H9-O5cCNs6eunlxWr_Csstgsb98DdzNdLFBOlhw9NUfHdyuQjI=w768-h1024-n-l50-sg-rj">
</div>

This should work for you.
const imgElement = document.querySelectorAll('.slide');
let i = 1;
window.onload = function () {
setInterval(function () {
i = i % 5;
imgElement[i].classList.add('active');
imgElement[i].previousElementSibling?.classList.remove('active');
if (i == 0 && imgElement[4].classList.contains('active')) {
imgElement[4].classList.remove('active');
}
i++;
}, 5000);
};
.mainDisplay {
display: flex;
justify-content: center;
position: absolute;
top: 2%;
}
.mainDisplay img {
width: 75%;
height: 600px;
}
.slide {
width: 100%;
height: 100%;
display: none;
}
.active {
display: block;
animation: fadeIn 1s;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="mainDisplay">
<!-- <img id="mainDisplayImg" src="./Img1.jpg" /> -->
<img class="slide active" src="./Img1.jpg" />
<img class="slide" src="./Img2.jpg" />
<img class="slide" src="./Img3.jpg" />
<img class="slide" src="./Img4.jpg" />
<img class="slide" src="./Img5.jpg" />
</div>

Pause jQuery On Hover

I just want the ability to be able to pause the animation on mouse hover. I trying to looking good way to do that, but there was some issues. I tested some hover/stop functions, but I can't get these working correctly.
jQuery(document).ready(function() {
setInterval(function() {
jQuery('#testimonials .slide').filter(':visible').fadeOut(1000, function() {
if (jQuery(this).next('.slide').size()) {
jQuery(this).next().fadeIn(1000);
} else {
jQuery('#testimonials .slide').eq(0).fadeIn(1000);
}
});
}, 5000);
});
#quote {
width: 100%;
height: 130px;
background-position: center bottom;
background-repeat: no-repeat;
margin-bottom: 65px;
overflow: hidden;
}
#testimonials .slide {
color: #555555;
}
#testimonials .testimonial-quote {
display: inline;
width: 600px;
height: 170px;
margin: 0;
padding: 0;
float: left;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="quote">
<div id="testimonials">
<div class="slide">
<div class="testimonial-quote">
<p>Text 1</p>
<h4 class="title">Title 1</h4>
</div>
</div>
</div>
</div>

You can achieve this by calling clearInterval() when the slide is hovered, then re-creating the interval again when the mouse leaves the slide, something like this:
jQuery(document).ready(function($) {
var $slides = $('#testimonials .slide');
function beginSlideInterval() {
return setInterval(function() {
$slides.filter(':visible').fadeOut(1000, function() {
var $next = $(this).next().length ? $(this).next() : $slides.first();
$next.fadeIn(1000);
});
}, 3000);
}
var slideInterval = beginSlideInterval();
$slides.on('mouseenter', function() {
clearInterval(slideInterval);
}).on('mouseleave', function() {
slideInterval = beginSlideInterval();
});
});
#quote {
width: 100%;
height: 130px;
background-position: center bottom;
background-repeat: no-repeat;
margin-bottom: 65px;
overflow: hidden;
}
#testimonials .slide {
color: #555555;
}
#testimonials .testimonial-quote {
display: inline;
width: 600px;
height: 170px;
margin: 0;
padding: 0;
float: left;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="quote">
<div id="testimonials">
<div class="slide">
<div class="testimonial-quote">
<p>Text 1</p>
<h4 class="title">Title 1</h4>
</div>
</div>
</div>
</div>
Note that I shortened the interval to make the effect more obvious.

jQuery CSS - Slider swipe animation

UPDATE: Updated the code and added a better example to clearify what I want to achieve.
I have built a slider with jQuery.
I give each element the class .active which displays the hidden elements.
Now I want a swipe animation, so that the images come from left to right.
The problem is that I already have a complex code and I don't know how to achieve that.
Here is an example what I want to achieve: https://bootsnipp.com/snippets/Padax
Here is the code
https://codepen.io/Insane415/pen/NggLxe
<div class="slider">
<div class="row">
<div class="col-md-4">
<div class="image-holder">
<img src="http://via.placeholder.com/350x150" style="display:none;" class="active">
<img src="http://via.placeholder.com/350x150" style="display:none;">
<img src="http://via.placeholder.com/350x150" style="display:none;">
<img src="http://via.placeholder.com/350x150" style="display:none;">
</div>
<div class="bullet-points">
•
•
•
•
</div>
</div>
<div class="col-md-2">
<div class="thumbnails">
<img src="http://via.placeholder.com/350x150" class="active-thumbnail">
<img src="http://via.placeholder.com/350x150">
<img src="http://via.placeholder.com/350x150">
<img src="http://via.placeholder.com/350x150">
</div>
</div>
<div class="col-md-6 center-me" style="height:100%;">
<div class="text-holder">
<div class="text active">
<p>Lorem Ipsum</p>
<h2>Giant Heading 1</h2>
<p>Just some more text</p>
zur Preisübersicht
</div>
<div class="text">
<p>Lorem Ipsum</p>
<h2>Giant Heading 2</h2>
<p>Some more text</p>
zur Preisübersicht
</div>
<div class="text">
<p>Lorem Ipsum</p>
<h2>Giant Heading 3</h2>
<p>Some more text</p>
zur Preisübersicht
</div>
<div class="text">
<p>Lorem Ipsum</p>
<h2>Giant Heading 4</h2>
<p>Some more text</p>
zur Preisübersicht
</div>
</div>
</div>
</div>
.text-holder .text p{margin: 0!important;}
.slider{
padding: 15px;
margin-top: 50px;
background: url('/images/content/slider/Banner_Hintergrund_telbes-01.jpg');
background-repeat: no-repeat!important;
background-size: cover!important;
display: inline-block;
width: 100%;
border: 1px solid #ddd;
}
.slider .bullet-points a{
color: #ccc;
}
.thumbnails{
height: 195.11px;
margin-left: -25px;
}
.thumbnails img{
display:block;
max-height: 31.65%;
margin-bottom: 5px;
}
.thumbnails img:hover{
cursor: pointer;
}
.text-holder{
margin-left: 0px;
height: 100%;
}
.text-holder .text{
display: none;
}
/*display active image*/
.active{
display: block!important;
}
/*hide thumbnail when image is active*/
.active-thumbnail{
display: none!important;
}
.bullet-points{
display: block;
text-align: center;
margin-top: 15px;
}
.bullet-points a{
font-size: 40px;
text-decoration: none;
color: #ccc;
}
.active-bullet{
color: #E22C26!important;
}
/*.image-holder{
max-width: 350px!important;
}
.image-holder img{
max-width: 350px!important;
}*/
.image-holder img{
/* text-align: center!important; */
margin: 0 auto;
}
.bullet-points a:hover{
color: #E22C26!important;
}
.center-me{
margin-top: 4%;
}
.text-holder a{
margin-top: 15px;
padding: 10px 20px 10px 20px;
}
.text-holder a:hover{
padding:10px 20px 10px 20px;
}
.text-holder{
font-size: 130%;
color: inherit;
}
.text-holder h2{
font-size: 200%;
}
$(document).ready(function() {
var images = [$(".image-holder img:first-child"), $(".image-holder img:nth-of-type(2)"), $(".image-holder img:nth-of-type(3)"), $(".image-holder img:last-child")];
var thumbnails = [$(".thumbnails img:first-child"), $(".thumbnails img:nth-of-type(2)"), $(".thumbnails img:nth-of-type(3)"), $(".thumbnails img:last-child")];
var text = [$(".text-holder .text:first-child"), $(".text-holder .text:nth-of-type(2)"), $(".text-holder .text:nth-of-type(3)"), $(".text-holder .text:last-child")];
var backgrounds = ["url('/images/content/slider/Banner_Hintergrund_telbes-01.jpg')", "url('/images/content/slider/Banner_Hintergrund_telbes-02.jpg')", "url('/images/content/slider/Banner_Hintergrund_telbes-03.jpg')", "url('/images/content/slider/Banner_Hintergrund_telbes-04.jpg')"];
var bullets = [$(".bullet-points a:first-child"), $(".bullet-points a:nth-of-type(2)"), $(".bullet-points a:nth-of-type(3)"), $(".bullet-points a:last-child")];
var i = 1;
var currentSlide = 1;
var time = 3000;
var sliderTimer = setInterval(slider, time);
// slider navigation
$('.bullet-points a, .thumbnails img').click(function(e) {
e.preventDefault();
var pos = $(this).index();
clearInterval(sliderTimer); // stop auto slideshow
sliderTimer = false;
slider(pos);
});
function slider(pos) {
currentSlide = i;
if (typeof(pos) !== 'undefined') {
i = pos;
images[currentSlide - 1].removeClass("active").addClass('transition');
text[currentSlide - 1].removeClass("active");
thumbnails[currentSlide - 1].removeClass("active-thumbnail");
bullets[currentSlide - 1].removeClass("active-bullet");
}
if (i != 0) {
images[i - 1].removeClass("active").addClass('transition');
text[i - 1].removeClass("active");
thumbnails[i - 1].removeClass("active-thumbnail");
bullets[i - 1].removeClass("active-bullet");
}
if (i == images.length) { i = 0 }
images[i].addClass("active");
setTimeout(function() {
$(".image-holder img").removeClass('transition');
},1000);
text[i].addClass("active");
thumbnails[i].addClass("active-thumbnail");
bullets[i].addClass("active-bullet");
i++;
if (!sliderTimer) {
sliderTimer = setInterval(slider, time); // start auto slideshow
}
}
});

You can do something like this using using CSS3,
Give each image an absolute position and give each image a width & height value.
Set the image container height so your slider pager sit below the images.
I use both #keyframes and transition to demonstrate how you can achieve the effect.
And in your javascript slider function, I added a function to add and remove the transition.
$(document).ready(function() {
var images = [$(".image-holder img:first-child"), $(".image-holder img:nth-of-type(2)"), $(".image-holder img:nth-of-type(3)"), $(".image-holder img:last-child")];
var thumbnails = [$(".thumbnails img:first-child"), $(".thumbnails img:nth-of-type(2)"), $(".thumbnails img:nth-of-type(3)"), $(".thumbnails img:last-child")];
var text = [$(".text-holder .text:first-child"), $(".text-holder .text:nth-of-type(2)"), $(".text-holder .text:nth-of-type(3)"), $(".text-holder .text:last-child")];
var bullets = [$(".bullet-points a:first-child"), $(".bullet-points a:nth-of-type(2)"), $(".bullet-points a:nth-of-type(3)"), $(".bullet-points a:last-child")];
var i = 1;
var currentSlide = 1;
var time = 3000;
var sliderTimer = setInterval(slider, time);
// slider navigation
$('.bullet-points a, .thumbnails img').click(function(e) {
e.preventDefault();
var pos = $(this).index();
clearInterval(sliderTimer); // stop auto slideshow
sliderTimer = false;
slider(pos);
});
function slider(pos) {
currentSlide = i;
if (typeof(pos) !== 'undefined') {
i = pos;
images[currentSlide - 1].removeClass("active").addClass('transition');
text[currentSlide - 1].removeClass("active");
thumbnails[currentSlide - 1].removeClass("active-thumbnail");
bullets[currentSlide - 1].removeClass("active-bullet");
}
if (i != 0) {
images[i - 1].removeClass("active").addClass('transition');
text[i - 1].removeClass("active");
thumbnails[i - 1].removeClass("active-thumbnail");
bullets[i - 1].removeClass("active-bullet");
}
if (i == images.length) { i = 0 }
images[i].addClass("active");
setTimeout(function() {
$(".image-holder img").removeClass('transition');
},1000);
text[i].addClass("active");
thumbnails[i].addClass("active-thumbnail");
bullets[i].addClass("active-bullet");
i++;
if (!sliderTimer) {
sliderTimer = setInterval(slider, time); // start auto slideshow
}
}
});
/*how I could allign the images in one row*/
.image-holder {
display: inline-block;
width: 100%;
height: 220px;
}
.image-holder img {
display: block;
width: 200px;
height: 200px;
margin: 0;
opacity: 0;
top: 0;
left: 100%;
transition: left ease 1s;
position: absolute;
}
.image-holder img.transition {
animation: moveSlider ease 2s;
opacity: 1;
}
#keyframes moveSlider {
0% {
left: 50%;
}
50% {
left: -100%;
}
100% {
opacity: 0;
left: 100%;
}
}
.image-holder img.active {
left: 50%;
transform: translateX(-50%);
opacity: 1;
}
/*END image row allignment*/
.text-holder p{margin: 0;}
.slider{
padding:15px;
margin-top: 50px;
/*background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTHzNrZnq-4-FItozqSu2ZWCBXW4LjWKTlkOOgDlZFj-JtdTuclVQ');*/
background-color: blue;
background-repeat: no-repeat;
background-size: 100% 100%;
display: inline-block;
width: 100%;
}
.thumbnails {
height: 100%;
}
.thumbnails img {
width: 100%;
height: auto;
display: block;
margin-bottom: 5px;
}
.thumbnails img:hover{
cursor: pointer;
}
.text-holder .text {
display: none;
}
.text-holder .text.active {
display: block;
}
/*display active image*/
.active {
}
.active-bullet{
color: #E22C26!important;
}
/*hide thumbnail when image is active*/
.active-thumbnail{
display: none!important;
}
.bullet-points{
display: block;
text-align: center;
}
.bullet-points a{
font-size: 40px;
text-decoration: none;
color: #ccc;
}
.bullet-points a:hover{
color: #E22C26!important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
<div class="row">
<div class="col-md-4">
<div class="image-holder">
<img src="https://res.cloudinary.com/somestuff/image/upload/v1497993474/money_gsliha.jpg" class="active">
<img src="https://res.cloudinary.com/somestuff/image/upload/v1497993472/rap_zduqat.jpg">
<img src="https://res.cloudinary.com/somestuff/image/upload/v1497993471/rauch_oikfed.jpg">
<img src="https://res.cloudinary.com/somestuff/image/upload/v1497993471/girls_x07ay8.jpg">
</div>
<div class="bullet-points">
•
•
•
•
</div>
</div>
<div class="col-md-1">
<div class="thumbnails">
<img src="https://res.cloudinary.com/somestuff/image/upload/v1497993474/money_gsliha.jpg" class="active-thumbnail">
<img src="https://res.cloudinary.com/somestuff/image/upload/v1497993472/rap_zduqat.jpg">
<img src="https://res.cloudinary.com/somestuff/image/upload/v1497993471/rauch_oikfed.jpg">
<img src="https://res.cloudinary.com/somestuff/image/upload/v1497993471/girls_x07ay8.jpg">
</div>
</div>
<div class="col-md-7">
<div class="text-holder">
<div class="text active">
<p>Lorem Ipsum</p>
<h1>Giant Heading 1</h1>
<p>Some more text</p>
</div>
<div class="text">
<p>Lorem Ipsum</p>
<h1>Giant Heading 2</h1>
<p>Some more text</p>
</div>
<div class="text">
<p>Lorem Ipsum</p>
<h1>Giant Heading 3</h1>
<p>Some more text</p>
</div>
<div class="text">
<p>Lorem Ipsum</p>
<h1>Giant Heading 4</h1>
<p>Some more text</p>
</div>
</div>
</div>
</div>
</div>

How can I create an overlay with slider?

I want to create something like that with slick slider:
This overlay with slider should appear after clicking on button. I think that i should use the slick slider's center mode. I know how to style colors, widths and so on, but i can't to implement the above-described structure.

There are multiple way to achieve this, following is a example I created using lightbox, you can get the idea from here, check the JSfiddle
CSS
#pageOverLay {
background: #fff none repeat scroll 0 0;
margin-left: 43%;
margin-top: 10%;
position: absolute;
width: 500px;
z-index: 1001;
visibility:hidden;
}
#pageOverLay-shadow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
filter: alpha(opacity=75);
-moz-opacity: 0.75;
-khtml-opacity: 0.75;
opacity: 0.75;
z-index: 1000;
visibility: hidden;
}
#pageOverLayCloseBtn {
position:absolute;
top:0;
right:0;
}
.slick-slider {
margin: 30px auto 50px;
}
.slick-slider {
-moz-user-select: none;
box-sizing: border-box;
display: block;
position: relative;
}
JQuery
$("#openLB").on("mousedown","",showLightBox);
function showLightBox() {
$("#pageOverLay-shadow").css("visibility", "visible");
$("#pageOverLay").css("visibility", "visible");
}
$("#pageOverLayCloseBtn").on("mousedown","",pageOverLayClose);
function pageOverLayClose() {
$("#pageOverLay-shadow").css("visibility", "hidden");
$("#pageOverLay").css("visibility", "hidden");
}
var disqus_shortname = 'slickcarousel';
(function () {
var dsq = document.createElement('script');
dsq.type = 'text/javascript';
dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
HTML
<a id="openLB" href="#">Click Here to show lightbox</a>
<div id="pageOverLay-shadow"></div>
<div id="pageOverLay">
<div id="pageOverLayCloseBtn">X </div>
<h2>Images</h2>
<div class="slider fade">
<div>
<div class="image"> <img src="http://wowslider.com/sliders/demo-94/data1/images/photo1427806208781b36531cb09ef.jpg" /> </div>
</div>
<div>
<div class="image"> <img src="http://wowslider.com/sliders/demo-94/data1/images/photo142855067022515f007f6f1ba.jpg" /> </div>
</div>
<div>
<div class="image"> <img src="http://wowslider.com/sliders/demo-94/data1/images/photo1428452788387375d846a8ab4.jpg" /> </div>
</div>
</div>
</div>

Transistions in swapping images

I just made a very simple "imageslider" but it does not slide, so lets call it a "imageswapper".
Alright. My question is now, how can I make it slide in and slide out so its smooth.
JSFIDDLE
[JS]
document.getElementById('atwo').style.display = "none";
function ImgSwap(){
if(document.getElementById('one').style.display == "block"){
document.getElementById('one').style.display = "none";
document.getElementById('two').style.display = "block";
}else{
document.getElementById('two').style.display = "none";
document.getElementById('one').style.display = "block";
}
}
[HTML]
<div id="wrapper">
<a onclick="ImgSwap()" id="aone"><img src="one.jpg" alt="one" class="img" id="one" /></a>
<a onclick="ImgSwap()" id="atwo"><img src="two.gif" alt="two" class="img" id="two" /></a>
</div>
[CSS]
img.img
{
height: 200px;
width: 300px;
}
#one
{
display: block;
}
#two
{
display:none;
}
a:hover
{
cursor: pointer;
}
div#wrapper
{
width: 300px;
}

There are many ways to achieve this effect, one way to do this is by applying css transition to your css class. You can change the opacity and position of the image to create the slides in effect.
function ImgSwap() {
document.getElementById('one').classList.toggle('show');
document.getElementById('two').classList.toggle('show');
}
div#wrapper {
width: 300px;
height: 200px;
position: relative;
background-color: black;
}
.img {
height: 200px;
width: 300px;
position: absolute;
top: 0;
left: -300px;
opacity: 0;
}
a:hover {
cursor: pointer;
}
.show {
left: 0;
opacity: 1;
transition: left 1s;
}
<div id="wrapper">
<a onclick="ImgSwap()" id="aone">
<img src="https://c2.staticflickr.com/6/5120/5824578555_d239d42195_b.jpg" alt="one" class="img show" id="one" />
</a>
<a onclick="ImgSwap()" id="atwo">
<img src="http://petsadviser.supercopyeditors.netdna-cdn.com/wp-content/uploads/2012/06/why-is-cat-scared-rain-thunder.png" alt="two" class="img" id="two" />
</a>
</div>

We Keep Coding

JavaScript is the programming language of the Web.

Setinterval() function need to reset - javascript

You could keep the interval running, but change the way you look for the next slide: check if there is a next one, if so, take it, otherwise pick the first one: $slide = $slide.next().length ? $slide.next() : $slide.siblings(':first') $slide.addClass('slideUp');

Related

javascript img slide not fading

Pause jQuery On Hover

jQuery CSS - Slider swipe animation

How can I create an overlay with slider?

Transistions in swapping images

Categories

Resources