I have the following code to display a slideshow. It works fine, but what I would like to have happen is have the 1st image fade out, there be a delay of a second or 2, and then have the next image fade in. I have this with 2 images right now, but will have multiple images when I finish. Just did 2 for testing right now.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(5000)
.next()
.fadeIn(5000)
.end()
.appendTo('#slideshow');
}, 8000);
</script>
<style>
#slideshow {
margin: 50px auto;
position: relative;
width: 240px;
height: 240px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
.myslides{
display: none
}
</style>
<div id="slideshow">
<div>
<img src="images/IMG_5434.JPG" width="240" height="240">
</div>
<div class="myslides">
<img src="images/IMG_5435.JPG" width="240" height="240">
</div>
</div>
Any thoughts or ideas are appreciated.
Thanks
Use .delay(7000) in the chain. It sets a timer to delay execution of subsequent items in the queue.
Here 7000ms will give you a delay of 2 seconds as your image is fading out in 5000ms.
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(5000)
.next()
.delay(10000)
.fadeIn(5000)
.end()
.appendTo('#slideshow');
}, 8000);
#slideshow {
margin: 50px auto;
position: relative;
width: 240px;
height: 240px;
padding: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}
#slideshow>div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
.myslides {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slideshow">
<div>
<img src="https://imagejournal.org/wp-content/uploads/bb-plugin/cache/23466317216_b99485ba14_o-panorama.jpg" width="240" height="240">
</div>
<div class="myslides">
<img src="https://www.w3schools.com/howto/img_fjords.jpg" width="240" height="240">
</div>
</div>
Related
My question is regarding sizing of images into a section, which I think is called a container. Does anybody happen to know how to do this.
I've included the code of the aspects involved.
HTML
<div id="slideshow">
<div>
<img src="Img1.jpg">
</div>
<div>
<img src="Img2.jpg">
</div>
<div>
<img src="Img3.jpg">
</div>
</div>
CSS
img {
width: 100%;
height: auto;
display: block;
}
#slideshow {
margin: 80px auto;
position: absolute;
top: 20%;
left: 22%;
width: 350px;
height: 350px;
padding: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}
.slideshow {
height: 300px;
width: 300px;
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
JS
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
});
</script>
First of all, I love your energy man, amazing. :)
You are only couple of lines from the result you want.
One of the errors was that you didnt actually target the slideshow div in your css, you were targeting it as .slideshow, and that is wrong because slideshow is an ID, so you should say #slideshow in your css.
And the last thing that you gotta do is make your images always fully fit your container, you can do this by using width : 100%; height: 100%; object-fit: cover;
Just replace your current css with this one, and it should work :)
img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
#slideshow {
margin: 80px auto;
position: absolute;
top: 20%;
left: 22%;
width: 350px;
height: 350px;
padding: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}
#slideshow {
height: 300px;
width: 300px;
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
I'm new to javascript/jquery, and I'm building an image slider. I can't seem to get the images to animate. I'm not sure what's wrong here.
What I've been trying to do is to get the active slide then slide the next sibling and animate it, but all I get in result is that the first image animate then it stops.
Here is the code: https://jsfiddle.net/6qntgg5z/
<div id="container">
<header>
header is here
</header>
<div id="carousel">
<div class="sliderbuttons">
<input type="button" name="next" id="next" value=" > ">
<input type="button" name="next" id="prev" value=" < ">
</div>
<div class="slides">
<img src="http://www.planwallpaper.com/static/images/4-Nature-Wallpapers-2014-1_ukaavUI.jpg" alt="image1" class="slide active">
<img src="http://www.mrwallpaper.com/wallpapers/green-Rice-1600x900.jpg" alt="image2" class="slide">
<img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-10.jpg" alt="image3" class="slide">
</div>
</div>
</div>
CSS
html,body {
height: 100%;
position: relative;
}
*{
box-sizing: border-box;
}
#container {
width: 90%;
margin: 0 auto;
height: 100%;
}
header {
background: black;
height: 20px;
padding: 1.5em;
color: white;
}
#carousel {
position: relative;
margin: 0 auto;
width: 45%;
margin-top: 15px;
height: 100%;
}
.slide {
position: absolute;
max-width: 100%;
z-index: 0;
}
.sliderbuttons {
}
#prev,#next {
position: absolute;
background-color: rgba(255, 148, 41, 0.68);
box-shadow: 2px white;
border:none;
font-size: 2em;
color: white;
font-weight: bold;
/* font-family: 'Baloo Tamma', cursive;
*/ padding:10px;
top:15%;
width: 10%;
/*making the prev,next on top of content*/
z-index: 2;
}
#prev {
left:0;
}
#next {
right:0;
}
.active {
z-index: 1;
}
Javascript
$(document).ready(function(){
setInterval(animateSlider(), 5000);
});
//configuration
var currentSlide=activeSlide();
var slides=$("#carousel .slides .slide");
//get active slide index
function activeSlide(){
var activeSlide=$("#carousel .slides .active").index();
return activeSlide;
}
function animateSlider() {
var $current=slides.eq(activeSlide());
var $next= $(".slides img:first");
$next.addClass('active');
$current.animate({opacity: 0.0}, 1000,
function () {
$current.removeClass('active');
$current.css({opacity: 1.0});
});
try this fiddle (does what you need but has other flaws i think). in your html you used the '<' and '>' characters as your button text, this breaks the flow of the html so you should instead use character codes:
< becomes < and
> becomes > www.w3schools.com/html/html_entities.asp
also your js was missing a closing } and the jsfiddle was missing aa jquery library call (I wish jsfiddle would make it faster to integrate libraries). hope it helps.
$(document).ready(function(){
setInterval(function(){ animateSlider() }, 5000);
});
//configuration
var currentSlide = activeSlide();
var slides = $("#carousel .slides .slide");
//get active slide index
function activeSlide(){
var activeSlide=$("#carousel .slides .active").index();
return activeSlide;
}
function animateSlider() {
//remove active class from previous element and assign it to the current one then animate it using animate() function
var $current=slides.eq(activeSlide());
var $next= $(".slides img:first");
$next.addClass('active');
$current.animate({opacity: 0.0}, 1000, function () {
$current.removeClass('active');
$current.css({opacity: 1});
});
}
html,body {
height: 100%;
position: relative;
}
*{
box-sizing: border-box;
}
#container {
width: 90%;
margin: 0 auto;
height: 100%;
}
header {
background: black;
height: 20px;
padding: 1.5em;
color: white;
}
#carousel {
position: relative;
margin: 0 auto;
width: 45%;
margin-top: 15px;
height: 100%;
}
.slide {
position: absolute;
max-width: 100%;
z-index: 0;
}
.sliderbuttons {
}
#prev,#next {
position: absolute;
background-color: rgba(255, 148, 41, 0.68);
box-shadow: 2px white;
border:none;
font-size: 1em;
color: white;
font-weight: bold;
/* font-family: 'Baloo Tamma', cursive;
*/ padding:10px;
top:15%;
width: 10%;
/*making the prev,next on top of content*/
z-index: 2;
}
#prev {
left:0;
}
#next {
right:0;
}
.active {
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="container">
<header>
header is here
</header>
<div id="carousel">
<div class="sliderbuttons">
<input type="button" name="next" id="next" value=">">
<input type="button" name="next" id="prev" value="<">
</div>
<div class="slides">
<img src="http://www.planwallpaper.com/static/images/4-Nature-Wallpapers-2014-1_ukaavUI.jpg" alt="image1" class="slide active">
<img src="http://www.mrwallpaper.com/wallpapers/green-Rice-1600x900.jpg" alt="image2" class="slide">
<img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-10.jpg" alt="image3" class="slide">
</div>
</div>
</div>
i was trying to make a section of website, responsive by giving heights and widths in % instead of pixels, but it is not working so please help to make it responsive.
while changing resolution it is not working, i want the ending border with it also while it goes to different resolution..
HTML
<section class="banner ik">
<div class="img_box">
<div class="fadein">
<img src="banner/b1_03.jpg">
<img src="banner/ban2_03.jpg">
<img src="banner/ban3_03.jpg">
</div>
</div>
</section>
JS
<script type="text/javascript">
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){
$('.fadein :first-child').fadeOut()
.next('img').fadeIn()
.end().appendTo('.fadein');},
3000);
});
</script>
CSS
.banner{
width: 100%;
height: auto;
border-bottom: solid 1px black;
margin: 0 auto;
}
.ik {
z-index: -1;
position: absolute;
height: 405px;
}
.img_box{
width: 100%;
overflow: hidden;
}
.fadein {
position: relative;
width: 100%;
height: 420px;
}
.fadein img { position:absolute; left:0; top:0; width: 100%; }
I have a jquery slider , when i load the page all div coming together and after sometime it working perfectly .pls try my code....please
This is the html code i have
is there any way to make this slider as a slide in left type slider instead of fadeout?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
</script>
</head>
<body>
<style>
#slider_one_img{
float: left;
background-image: url('one.jpg');
width: 84px;
height: 86px;
}
#slider_two_img{
float: left;
background-image: url('two.png');
width: 84px;
height: 86px;
}
#slider_three_img{
float: left;
background-image: url('three.jpg');
width: 84px;
height: 86px;
}
#slider_one_text{
width:70%;
text-align: left;
margin-top: 3%;
float: left;
}
#slideshow {
margin: 68px auto;
position: relative;
width: 68%;
height: 120px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
margin-left: 2%;
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
</style>
<div id="slideshow">
<div>
<div id="slider_one_text">My first text</div>
<div id="slider_one_img"></div>
</div>
<div>
<div id="slider_one_text">My second text...erewrew.r.ewr.eqwr.ewrweqrqewrqwerwerwer
</div>
<div id="slider_two_img"></div>
</div>
<div>
<div id="slider_one_text">My third text skjsndgnsdkjgndnskgnksngk</div>
<div id="slider_three_img"></div>
</div>
</div>
</body>
</html>
please help
Wrap your code inside $(document).ready(function(){}). Your code works fine.
Refer jQuery Slide Effect for sliding left or right.
Example:
$(document).ready(function () {
$("#slideshow > div:gt(0)").hide();
setInterval(function () {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
});
Demo: http://jsfiddle.net/lotusgodkk/y5C4G/7/
My Html Code for slider
<div id="slideshow">
<div>
<img src="5658667829_2bb7d42a9c_m.jpg">
</div>
<div>
<img src="5638093881_a791e4f819_m.jpg">
</div>
My Css Code for slider
#slideshow {
margin: 50px auto;
position: relative;
width: 240px;
height: 240px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
My Jquery Code for slider
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
This is my code for slider which is not working please help for this.
its working for me.
You miss the closing tag of slideshow div.
Whatever it is my code is belove
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>slider</title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
});
</script>
<style>
#slideshow {
margin: 50px auto;
position: relative;
width: 240px;
height: 240px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
</style>
</head>
<body>
<div id="slideshow">
<div>
<img src="123.jpg">
</div>
<div>
<img src="321.jpg">
</div>
</div>
</body>
</html>
Try use document ready for your jquery code