I've made a simple image slider that fades-in an image, fades it out and than another one fades-in, an infinite loop. But, this doesn't work right away. It only works after it made a full circle. Which means: all the 6 images have been seen. Then the loop starts again at image one and the fade-in effect works. Why?
This is the HTML:
<body onload="Slider();">
<div id="container">
<div id="slider">
<img id="img1" src="photos/everything/slide1.jpg" border="0"/>
<img id="img2" src="photos/everything/slide2.jpg" border="0"/>
<img id="img3" src="photos/everything/slide3.jpg" border="0"/>
<img id="img4" src="photos/everything/slide4.jpg" border="0"/>
<img id="img5" src="photos/everything/slide5.jpg" border="0"/>
<img id="img6" src="photos/everything/slide6.jpg" border="0"/>
</div>
</div>
</body>
And this is the javascript:
function Slider() {
$("#slider #img1").show("fade", 500);
$("#slider #img1").delay(5500).hide("fade", 500);
var sc=$("#slider img").size();
var count=2;
setInterval(function(){
$("#slider #img"+count).show("fade",500);
$("#slider #img"+count).delay(5500).hide("fade", 500);
if(count==sc){
count=1;
}else{
count = count + 1;
}
},6500);
}
And the CSS used for this page:
#slider{
height: 600px;
overflow: hidden;
margin: 0 auto;
padding-top: 10px;
}
#slider img{
height: 100%;
max-width: none;
display: block;
border-radius: 10px;
margin: 0 auto;
}
The fading effect is not working at first because all of your images are visible, and then you fade them out.
To avoid that, use display:none; in your css.
Then you can create a function nextSlide() that will call itself every XX milliseconds.
For example:
var sc=$("#slider img").size();
// Set count to 0 so that it goes to 1 on first call
var count=0;
// Call it for the first time
nextSlide();
function nextSlide(){
// Go forward or back to the beginning?
count=count==sc?1:++count;
// FadeIn, wait, fadeOut
$("#slider #img"+count).fadeIn(500).delay(1500).fadeOut(500);
// Do the same thing in 2500 milliseconds
setTimeout(nextSlide,2500);
}
JS Fiddle Demo
Related
The slideshow on the Homepage is too fast when coming back from another tab. I tried a few other solutions from the site but it did not work in my case. Hope someone can really help. Thanks much.
Here's the Javascript:
Blockquote
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 5000);
Blockquote
HTML Code:
Blockquote
<div id="slideshow">
<div>
<img src="abc.png">
</div>
<div>
<img src="def.png">
</div>
<div>
<img src="ghi.png">
</div>
<div>
<img src="jkl.png">
</div>
</div>
Blockquote
Blockquote
/*Slideshow */
#slideshow > div {
width: 970px;
height: 500px;
display: block;
float: left;
position: absolute;
top: 200px;
right: auto;
background-repeat: no-repeat;
margin-left: 15px;
line-height: 180px;
}
Blockquote
If it's too fast, just increase the time to fadeOut() and fadeIn(). Use $(window).focus() and $(window).blur() to check when a user left the tab and clear the slideshow interval. When the user comes back, set the interval again.
$("#slideshow > div:gt(0)").hide();
var slideshow = setInterval(function() {
beginSlideshow();
}, 5000);
function beginSlideshow(){
$('#slideshow > div:first')
.fadeOut(2000)//time doubled from 1000 to 2000 milliseconds
.next()
.fadeIn(2000)//time doubled from 1000 to 2000 milliseconds
.end()
.appendTo('#slideshow');
}
$(window).focus(function() {
if (slideshow==null){
//Use came back to the tab
slideshow = setInterval(function(){
beginSlideshow();
}, 5000);
}
});
$(window).blur(function() {
//User left tab
clearInterval(slideshow);
slideshow = null;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slideshow">
<div>
<img src="test9/SitePage_9dArip.png">
</div>
<div>
<img src="test9/SitePage_9dCand.png">
</div>
<div>
<img src="test9/SitePage_9dfinalOK.png">
</div>
<div>
<img src="test9/SitePage_9dPrav.png">
</div>
</div>
JSFiddle：http://jsfiddle.net/1vk3fqr8/3/
guys. Trying to create my own gallery slider. But I have no idea how I can prevent the scrollbars. I know I have overflow: visible on both the wrapper and the images, but if I make it hiddenthen I won't see the images and they will get cropped off. What would be the best option here? Thanks.
<div id="wrapper" class="slider">
<img src="http://netdna.webdesignerdepot.com/uploads/2008/12/stock-microstock.jpg" class="slide" width="30%" alt="logo-work-example-barcelona"></img>
<img src="http://netdna.webdesignerdepot.com/uploads/2008/12/stock-microstock.jpg" class="slide" width="30%" alt="logo-work-example-apple-elephant"></img>
<img src="http://netdna.webdesignerdepot.com/uploads/2008/12/stock-microstock.jpg" class="slide" width="30%" alt="logo-work-example-animal-protect"></img>
<img src="http://netdna.webdesignerdepot.com/uploads/2008/12/stock-microstock.jpg" class="slide" width="30%" alt="logo-work-example-barcelona"></img>
<img src="http://netdna.webdesignerdepot.com/uploads/2008/12/stock-microstock.jpg" class="slide" width="30%" alt="logo-work-example-barcelona"></img>
<img src="http://netdna.webdesignerdepot.com/uploads/2008/12/stock-microstock.jpg" class="slide" width="30%" alt="logo-work-example-barcelona"></img>
</div>
#wrapper {
text-align: left;
display: inline-block;
/*background-color: */;
white-space: nowrap;
position: relative;
left: -1150px;
overflow: visible;
}
#wrapper img {
margin-left: 20px;
white-space: nowrap;
overflow: visible;
}
var currentSlide = 2;
var slider = $(".slide");
setInterval(function() {
$(".slider").animate({position: "relative", left: "+=400px"}, 2000, function () {
currentSlide++;
/*$("#wrapper").css("overflow", "hidden");*/
if (currentSlide === (slider.length - 1)) {
currentSlide = 1;
$(".slider").css("left", "-1150px");
}
});
}, 5000);
My codepen: http://codepen.io/Limpuls/pen/pRbZKe
Simplest solution (and actually often (always?) used when you have this type of slider) is to add one more div as container, set 100% (desired) width, and add overflow hidden to it:
#container {
width:100%; //if 100%, you can even remove this line, 100% is default width
overflow:hidden;
}
Demo: http://codepen.io/anon/pen/YNWjOM
Your wrapper is pushed left too far, and can be even more, depending on number of images, and you have to hide overflow somehow.
I need help with my previous button for my slideshow. My next button works just fine but everytime I press previous it does a kind of shuffle mode and retrieves the pictures in a random order. If anyone could please help that would be great! I'm fairly new to JavaScript so please be patient and clear.
HTML
<div class="container">
<header>
<nav class="clearfix">
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Before/After</li>
<li>Facilities</li>
<li>Contact</li>
<li>Staff</li>
</ul>
</div>
<p id="menu">Menu</p>
<div class="site-wrapper">
<div class="header">
<a><div class="menu-trigger" title="Menu"></div></a>
</div>
</div>
<script src="script.js" type="text/javascript"></script>
</nav>
<img src="img/logoBRB.png"/>
<h1>Brad's Auto Body</h1>
<p id="quote"><i>"Dedicated To Perfection"</i></p>
</header>
<section class="slideshow" id="slideshow">
<figure>
<img class="mySlides" src="img/corengine.jpg" width="100%">
</figure>
<figure>
<img class="mySlides" src="img/corseat.jpg" width="100%">
</figure>
<figure>
<img class="mySlides" src="img/blah.jpg" width="100%">
</figure>
<figure>
<img class="mySlides" src="img/blah2.jpg" width="100%">
</figure>
<figure class="show">
<img class="mySlides" src="img/cor.jpg" width="100%">
</figure>
<span class="prev">«</span> <span class="next">»</span>
</section>
<footer>
<div class="social">
<ul>
<li>
<i class="fa fa-facebook fa-2x" id="fa"></i>
</li>
</ul>
</div>
<p>©Copyright 2016. Brad’s Auto Body. All Rights Reserved.</p>
<p>Web Design by<img class="logo" src="img/logoJJC.png">JJC Web Developers</p>
</footer>
<script src="slideshow.js"></script>
<script src="https://code.jquery.com/jquery-2.2.1.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js" type="text/javascript"></script>
<script src="https://github.com/mattbryson/TouchSwipe-Jquery-Plugin" type="text/javascript"></script>
</div>
JavaScript
var counter = 0, // to keep track of current slide
$items = $('.slideshow figure'), // a collection of all of the slides, caching for performance
numItems = $items.length; // total number of slides
// this function is what cycles the slides, showing the next or previous slide and hiding all the others
var showCurrent = function() {
var itemToShow = Math.abs(counter % numItems); // uses remainder (aka modulo) operator to get the actual index of the element to show
$items.removeClass('show'); // remove .show from whichever element currently has it
$items.eq(itemToShow).addClass('show');
};
// add click events to prev & next buttons
$('.next').on('click', function() {
showCurrent();
counter++;
});
$('.prev').on('click', function() {
showCurrent();
counter--;
});
// if touch events are supported then add swipe interactions using TouchSwipe https://github.com/mattbryson/TouchSwipe-Jquery-Plugin
var $el = $('#slideshow');
$el.slideshow({
duration: 400,
delay: 3000,
selector: '> img',
transition: 'push(up)',
autoPlay: true,
show: function(params) {
var nextIndex = params.next.index;
if (nextIndex > 2) {
// do something awesome when the slide is after the third slide.
}
},
complete: function(params) {
// do something awesome when a transition finishes
}
});
// get the slideshow object if you want it
var slideshow = $el.data('slideshow');
// show the third slide
$el.slideshow('show', 2); // Element API
slideshow.show(2); // object API
// show the next slide
slideshow.show('next');
// pause and play
slideshow.stop();
slideshow.play();
CSS
#slideshow {
background-color: solid transparent;
padding: 0;
}
.slideshow {
position: relative;
display: block;
overflow: hidden;
height: 500px;
width: auto;
}
.show {
transition: opacity 2s;
opacity: 1;
position: relative;
zoom: 110%;
}
.mySlides {
height: 500px;
}
figure {
transition: opacity 0;
opacity: 0;
position: absolute;
margin: 0;
}
.next, .prev {
color: #fff;
position: absolute;
background: rgba(0,0,0,.6);
top: 50%;
z-index: 1;
font-size: 2em;
margin-top: -.75em;
opacity: .3;
user-select: none;
}
.next:hover, .prev:hover {
cursor: pointer;
opacity: 1;
}
.next {
right: 0;
padding: 10px 5px 15px 10px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.prev {
left: 0;
padding: 10px 10px 15px 5px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
Im really not sure how your slider even works by selecting the figure using modulo. I would suggest you to keep track of the figure element that has the show class and change the counter based on that.
First, when Javascript is loaded, you should set the counter variable to the index of the figure which has the show class. This can be achived with the following function (or just add it straigth to the variable declaration):
function getShowIndex() {
return $('#slideshow figure').index($('.show'));
}
Then, change to next or previous image by adding or subtracting from the counter. Though, there are two exceptions:
When going from the last image to the first the counter value should be changed to 0.
Likewise from the firt to the last the counter value should be changed to [ammount of figure elements] - 1 aka index of the last figure element.
This can be achieved by somethin like this:
// Remove .show from whichever element currently has it and place it to
// figure that has index 'counter'
function showCurrent() {
$items.removeClass('show');
$items.eq(counter).addClass('show');
}
function showNext() {
if (counter == numItems - 1) {
counter = 0;
} else {
counter++;
}
showCurrent();
}
function showPrev() {
if (counter == 0) {
counter = numItems - 1;
} else {
counter--;
}
showCurrent();
}
// Add click events to prev & next buttons
$('.next').on('click', function() {
showNext();
});
$('.prev').on('click', function() {
showPrev();
});
Minimal JSFiddle demo
I removed TouchSwipe from the demo as its implementation didn't seem to be finished.
On a side note: you seem to have two versions of jQuery, 2.2.1 and 2.1.3. Consider removing the latter and placing all of your JS files at the end of body tag. This way the JS files are loaded last. The order of the files also matters, it should be:
jQuery
jQueryUI
TouchSwipe
Your own files
I am looking to take a set of screenshots and make them into a walk through tutorial.
The end product I am aiming for is a slide show where on each screen shot the image makes it clear where on the screen shot to advance to the next shot. When the user clicks that area the show will advance.
I found this jsfiddle from another post on slide shows:
http://jsfiddle.net/rCd26/2/
var interval = undefined;
$(document).ready(function () {
interval = setInterval(getNext, 2000); // milliseconds
$('#next').on('click', getNext);
$('#prev').on('click', getPrev);
});
function getNext() {
var $curr = $('.slideshow img:visible'),
$next = ($curr.next().length) ? $curr.next() : $('.slideshow img').first();
transition($curr, $next);
}
function getPrev() {
var $curr = $('.slideshow img:visible'),
$next = ($curr.prev().length) ? $curr.prev() : $('.slideshow img').last();
transition($curr, $next);
}
function transition($curr, $next) {
clearInterval(interval);
$next.css('z-index', 2).fadeIn('slow', function () {
$curr.hide().css('z-index', 0);
$next.css('z-index', 1);
});
}
.slideshow {
position: relative;
/* necessary to absolutely position the images inside */
width: 500px;
/* same as the images inside */
height: 100px;
}
.slideshow img {
position: absolute;
display: none;
}
.slideshow img:first-child {
display: block;
/* overrides the previous style */
}
<div class="slideshow">
<img src="http://placehold.it/500x100/0000CD&text=1" width="500" height="100" alt="first image">
<img src="http://placehold.it/500x100/008000&text=2" width="500" height="100" alt="second image">
<img src="http://placehold.it/500x100/B22222&text=3" width="500" height="100" alt="third image">
<img src="http://placehold.it/500x100/F4A460&text=4" width="500" height="100" alt="fourth image">
</div>
<button id="prev">Prev</button>
<button id="next">Next</button>
I think there are 3 things I need to do to make it work for me:
Be able to position the next button within the image.
Be able to change the size of the next button (creating different size hotspots).
Be able to change the location of the hotspot by image.
Thanks for your input!
You have a .slideview element which is relatively positioned in the document, so images can be absolutely positioned inside of it. We'll be using the same technique for positioning your buttons. Let's create a new "global" container:
<div class="global_container">
<div class="slideshow">
<img src="http://placehold.it/500x100/0000CD&text=1" width="500" height="100" alt="first image">
<img src="http://placehold.it/500x100/008000&text=2" width="500" height="100" alt="second image">
<img src="http://placehold.it/500x100/B22222&text=3" width="500" height="100" alt="third image">
<img src="http://placehold.it/500x100/F4A460&text=4" width="500" height="100" alt="fourth image">
</div>
<button id="prev">Prev</button>
<button id="next">Next</button>
</div>
Now in your CSS add this class:
.global_container { /* selector for a class called global_container */
position: relative;
width: 500px; /* same width as your slider, probably use a couple pixels more */
height: 100px; /* whatever height you want, usually more than your slider height or equal */
}
Now, as your global container has position: relative;, you can position elements inside (adding a position: absolute; to their CSSes). So add to your CSS:
#prev { /* selector for the element with id="prev" */
position: absolute;
top: 45px; /* button will be positioned 45px from the top of the global container */
left: 10px; /* and 10px from the left of the global container */
}
#next {
position: absolute;
top: 45px; /* same as before */
right: 10px; /* same as before, but from the right of the global container */
/* you could even set the size of the buttons */
width: 40px;
height: 10px;
}
Hope this helps.
I want to make a simple slide show that automatically plays when the page is loaded. Here is my code so far:
HTML:
<div id="slideshow">
<div>
<img src="slide_1.png">
</div>
<div>
<img src="slide_2.png">
</div>
<div>
<img src="slide_3.png">
</div>
</div>
CSS:
#slideshow {
position: relative;
width: 900px;
height: 450px;
}
#slideshow > div {
position: absolute;
}
If possible, can someone please provide me with a JavaScript code that will automatically play the slide show, as well as change the slides by using a slide transition, and also have it replay infinite amount of times while the user is still of the page? Also, maybe a navigation that has numbers in the bottom right corner. Here is an example of what I am looking for: (http://www.http://www.suprafootwear.com/). The large slideshow up top is what I want, the only difference is that I want the transition to be a linear slide motion instead of the fade transition. Please maintain the 900px x 450px size. Any help is appreciated. Thank you in advance!
Try this simple javascript code to make image slider.
(function() {
var imgLen = document.getElementById('imgGallary');
var images = imgLen.getElementsByTagName('img');
var counter = 1;
if (counter <= images.length) {
setInterval(function() {
images[0].src = images[counter].src;
console.log(images[counter].src);
counter++;
if (counter === images.length) {
counter = 1;
}
}, 4000);
}
})();
.container {
position: relative;
width: 100%;
height: 300px;
border-radius: 5px;
border: 1px solid red;
overflow: hidden;
}
<div id="imgGallary" class="container">
<img src="http://www.examiningcalvinism.com/kingdavid.jpg" alt="" width="100%" height="300" />
<img src="http://www.kingjamesbibleonline.org/1611-Bible/1611-King-James-Bible-Introduction.jpg" alt="" width="100%" height="300" />
<img src="http://biblestudyoutlines.org/wp-content/uploads/2012/07/the-triump-of-david-over-king-hadadezer-of-zobah-1024x729.jpg" alt="" width="100%" height="300" />
<img src="http://www.cgu.edu/Images/news/Flame%20Winter12/KJV-BibleBW.jpg" alt="" width="100%" height="300" />
</div>
$("#slideshow > div:gt(0)").hide();
setInterval(function() { $('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow'); }, 3000);