The issue with this code is on the previous button. When the user press previous on the first slide there is a blank slider for a few seconds and then the last slide appears. Would you know how to make this slide action smooth, thanks for reading...
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="/scripts/SliderControl.js"></script>
<link href="/Styles/Sliders.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="header">
<h1 class="text-muted">jQuery Basic Slider</h1>
</div>
<div id="slider">
<ul class="slides">
<li class="slide">
<img src="Images/Image1.jpg" alt="About Us" width="720" height="400" />
</li>
<li class="slide">
<img src="Images/Image2.jpg" alt="About Us" width="720" height="400" />
</li>
<li class="slide">
<img src="Images/Image3.jpg" alt="About Us" width="720" height="400" />
</li>
<li class="slide">
<img src="Images/Image4.jpg" alt="About Us" width="720" height="400" />
</li>
<li class="slide">
<img src="Images/Image6.jpg" alt="About Us" width="720" height="400" />
</li>
<li class="slide">
<img src="Images/Image1.jpg" alt="About Us" width="720" height="400" />
</li>
</ul>
</div>
<img id="Next" src="Images/RightArrow.png"
class="img-responsive NextButton" />
<img id="Previous" src="Images/LeftArrow.png"
class="img-responsive PreButton" />
</div>
</body>
</html>
#slider {
width: 720px;
height: 400px;
overflow: hidden;
}
#slider .slides {
display: block;
width: 6000px;
height: 400px;
margin: 0;
padding: 0;
}
#slider .slide {
float: left;
list-style-type: none;
width: 720px;
height: 400px;
}
#Next
{
opacity: 0.4;
filter: alpha(opacity=20);
}
#Next:hover
{
cursor: pointer;
opacity: 0.8;
filter: alpha(opacity=80);
}
#Previous
{
opacity: 0.4;
filter: alpha(opacity=20);
}
#Previous:hover
{
cursor: pointer;
opacity: 0.8;
filter: alpha(opacity=80);
}
#slider .NextButton
{
position: absolute;
top: 50%;
right: 2%;
}
#slider .PreButton
{
position: absolute;
top: 50%;
left: 2%;
}
'use strict';
$(function () {
//settings for slider
var width = 720;
var animationSpeed = 1000;
var pause = 3000;
var currentSlide = 1;
//cache DOM elements
var $slider = $('#slider');
var $slideContainer = $('.slides', $slider);
var $slides = $('.slide', $slider);
var interval;
function startSlider() {
interval = setInterval(function () {
$slideContainer.animate({ 'margin-left': '-=' + width }, animationSpeed, function () {
if (++currentSlide === $slides.length) {
currentSlide = 1;
$slideContainer.css('margin-left', 0);
}
});
}, pause);
}
function pauseSlider() {
clearInterval(interval);
}
$slideContainer
.on('mouseenter', pauseSlider)
.on('mouseleave', startSlider);
startSlider();
$('#Next').click(function () {
$slideContainer.animate({ 'margin-left': '-=' + width }, animationSpeed, function () {
if (++currentSlide === $slides.length) {
currentSlide = 1;
$slideContainer.css('margin-left', 0);
}
});
});
$('#Previous').click(function () {
//if (currentSlide === 1) {
// $slideContainer.animate({ 'margin-left': -1 * width * ($slides.length -2)}, animationSpeed, function () {
// currentSlide = $slides.length - 1;
// });
//}
//else {
$slideContainer.animate({ 'margin-left': '+=' + width }, animationSpeed, function () {
if (--currentSlide === 0) {
currentSlide = $slides.length - 1;
$slideContainer.css('margin-left', -1 * width * ($slides.length - 2));
}
});
//}
});
$('#Next')
.on('mouseenter', pauseSlider)
.on('mouseleave', startSlider);
$('#Previous')
.on('mouseenter', pauseSlider)
.on('mouseleave', startSlider);
});
your code is a little bit confuse for a slider.
I simplified for you in an easy way to understand. We can use just one method to move the slider and in the previous and next buttons increase or decrease the currentSlide variable.
Update you js code with this code bellow. Any questions, just ask. =)
'use strict';
$(function () {
/**
* Variables
*/
var width = 720,
animationSpeed = 600,
pause = 3000,
currentSlide = 0,
$slider = $('#slider'),
$slideContainer = $('.slides', $slider),
$slides = $('.slide', $slider),
interval;
/**
* Methods
*/
function changeSlider () {
// verify the boundaries of slider
if(currentSlide < 0) currentSlide = $slides.length - 1;
if(currentSlide == $slides.length) currentSlide = 0;
console.log(currentSlide);
// animation using the currentSlide variable
$slideContainer.animate({
'margin-left': -(currentSlide * width)
}, animationSpeed);
}
function startInterval() {
interval = setInterval(function () {
// increase the currentSlide in each interval dispatch
currentSlide++;
changeSlider();
}, pause);
}
function pauseInterval() {
clearInterval(interval);
}
/**
* Mouse Events
*/
$slideContainer
.on('mouseenter', pauseInterval)
.on('mouseleave', startInterval);
$('#Next').click(function () {
// next button, decrease
currentSlide--;
changeSlider();
});
$('#Previous').click(function () {
// previous button, increase
currentSlide++;
changeSlider();
});
$('#Next')
.on('mouseenter', pauseInterval)
.on('mouseleave', startInterval);
$('#Previous')
.on('mouseenter', pauseInterval)
.on('mouseleave', startInterval);
/**
* Initialize Slider
*/
changeSlider();
startInterval();
});
Related
I have an image slider.
Unfortunately,
The image slider gets stuck on the second image.
I want the image slider to cycle through images in an infinite random loop.
How do I do this?
Here is my jsfiddle:
http://jsfiddle.net/rAqcP/248/
---------------------------------------
JS Code
$(document).ready(function() {
//$('.slider #1').show({right:'0'}, 500);
$('.slider #1').show('slide',{direction:'right'},500);
$('.slider #1').delay(5500).hide('slide',{direction:'left'},500);
var sliderTotalImg = $('.slider img').size();
var counterIndex = 2;
setInterval(function () {
//$('.slider #' + counterIndex).show({right:'0'}, 500);
$('.slider #' + counterIndex).show('slide',{direction:'right'},500);
$('.slider #' + counterIndex).delay(5500).hide('slide',{direction:'left'},500);
if(count==slidecount){
count=1;
}else{
count=count+1;
}
},6500);});
DIV CODE
<div class = "slider">
<img id="1" src="http://www.gohatchmyegg.com/wp-content/themes/BLANK-Theme/images/Pokemon/001.png"/>
<img id="2" src="http://www.gohatchmyegg.com/wp-content/themes/BLANK-Theme/images/Pokemon/002.png"/>
<img id="3" src="http://www.gohatchmyegg.com/wp-content/themes/BLANK-Theme/images/Pokemon/003.png"/>
<img id="4" src="http://www.gohatchmyegg.com/wp-content/themes/BLANK-Theme/images/Pokemon/004.png"/>
</div>
CSS CODE
.slider {
width: 20%;
height: 30%;
overflow:hidden;
border: 1px solid black;
background-image:url("http://test.softvex.com/Slider/Img/loading.gif");
background-repeat:no-repeat;
background-position:center;
}
.slider img {
display:none;
}
You never define slidecount. It is used only in your if statement. You never define count. Its first use is in the same if statement.
I'm not sure if you did so, but you can watch the console output (keyboard shortcut F12) to see what errors occur in your code. In your original code the error was that count was undefined. It only shows the first error, so it would have shown an error about slidecount after you fixed the one with count.
Note: There was nothing in your code that was random. So, I am unsure as to what you were intending to make random.
The following will work (JSFiddle):
$(document).ready(function() {
//$('.slider #1').show({right:'0'}, 500);
$('.slider #1').show('slide', {
direction: 'right'
}, 500);
$('.slider #1').delay(5500).hide('slide', {
direction: 'left'
}, 500);
var sliderTotalImg = $('.slider img').size();
var counterIndex = 2;
var slidecount = 4;
setInterval(function() {
//$('.slider #' + counterIndex).show({right:'0'}, 500);
$('.slider #' + counterIndex).show('slide', {
direction: 'right'
}, 500);
$('.slider #' + counterIndex).delay(5500).hide('slide', {
direction: 'left'
}, 500);
if (counterIndex >= slidecount) {
counterIndex = 1;
} else {
counterIndex++;
}
}, 6500);
});
.slider {
width: 20%;
height: 30%;
overflow: hidden;
border: 1px solid black;
background-image: url("http://test.softvex.com/Slider/Img/loading.gif");
background-repeat: no-repeat;
background-position: center;
}
.slider img {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div class="slider">
<img id="1" src="http://www.gohatchmyegg.com/wp-content/themes/BLANK-Theme/images/Pokemon/001.png" />
<img id="2" src="http://www.gohatchmyegg.com/wp-content/themes/BLANK-Theme/images/Pokemon/002.png" />
<img id="3" src="http://www.gohatchmyegg.com/wp-content/themes/BLANK-Theme/images/Pokemon/003.png" />
<img id="4" src="http://www.gohatchmyegg.com/wp-content/themes/BLANK-Theme/images/Pokemon/004.png" />
</div>
I am trying to make background images fade in fade out. I can't change HTML code.
<ul id="supersized" class="quality" style="visibility: visible;">
<li class="slide-0 activeslide">
<a target="_blank">
<img src="image1" style="width: 994px; height: 745.5px; left: 0px; top: -39.5px;">
</a></li></ul>
There is a plugin for making the image looks nice on every screen. So I have to use just a Javascript. and I get here:
$(document).ready(function() {
var scroll_pos = 0;
$(document).scroll(function() {
var parent = document.getElementById('supersized'); // because img has no ID
var element = parent.getElementsByTagName('img')[0];
scroll_pos = $(this).scrollTop();
if (scroll_pos > 710) {
$(element).attr("src", 'image1');
} else {
$(element).attr("src", 'image2');
}
});
});
Then I realised that in this case I cannot make Fade. So I came with this:
$(document).ready(function() {
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
var parent = document.getElementById('supersized');
var element = parent.getElementsByTagName('img')[0];
if (scroll_pos > 710) {
$(element).attr("src", 'img1').fadeIn();
} else {
$(element).attr("src", 'img1').fadeOut();
};
if (scroll_pos < 710) {
$(element).attr("src", 'img2').fadeIn();
} else {
$(element).attr("src", 'img2').fadeOut();
};
});
});
But this doesn't work.
Any idea how to do it?
**HTML AND CSS**
<style>
#effect {
padding: 0.4em;
background: #555 url("/sites/default/files/fashion-and-jewellery.jpg");
opacity: 0.5;
}
#effect {
max-width: 490px;
height: 320px;
}
</style>
<div id="effect" class="ui-widget-content ui-corner-all"></div>
**JQUERY**
$(document).ready(function(){
$("#effect").hover(function() {
$(this).animate({opacity: '1'}, "slow");
}, function () {
$(this).animate({opacity: '0.5'}, "slow");
});
});
I'm trying to create a parallax effect with a simple slideshow that I made.
First, I have one with just the basic parallax.js implementation:
fiddle: https://jsfiddle.net/jzhang172/bcdkvqtq/1/
.parallax-window {
min-height: 400px;
position:relative;
}
.ok{
font-size:50px;
background:gray;
color:blue;
height:300px;
width:100%;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax.js/1.4.2/parallax.min.js"></script>
<div class="parallax-window" data-parallax="scroll" data-image-src="http://vignette4.wikia.nocookie.net/pokemon/images/5/5f/025Pikachu_OS_anime_11.png/revision/latest?cb=20150717063951g">
</div>
<div class="ok">Hey there</div>
This works, however, now I want this effect on image slideshow, with or without parallax.js is fine but I would like the same parallax effect:
I'm not sure how to apply it to the images:
fiddle: https://jsfiddle.net/jzhang172/k4fygvhg/1/
$(document).ready(function() {
var slides = $('.featured-wrapper img');
var slideAtm = slides.length;
var currentPos = 0;
slides.hide();
function roll(){
var slide = slides.eq(currentPos);
slide.fadeIn(2000);
setTimeout(up,1500);
}
roll();
function up(){
currentPos +=1;
slides.fadeOut(1500);
setTimeout(roll, 500);
if(currentPos > slideAtm -1){
currentPos = 0;
}
}
});
.featured-wrapper img{
max-width:200%;
max-height:200%;
min-width:100vw;
}
.featured-wrapper{
height:500px;
width:100%;
overflow:hidden;
}
.things{
font-size:50px;
height:500px;
width:100%;
background:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax.js/1.4.2/parallax.min.js"></script>
<div class="featured-wrapper" data-parallax="scroll">
<img src="http://assets.pokemon.com/assets/cms2/img/pokedex/full//007.png" alt="">
<img src="http://assets.pokemon.com/assets/cms2/img/pokedex/full/001.png" alt="">
<img src="https://assets.pokemon.com/static2/_ui/img/account/sign-up.png" alt="">
<img src="http://static.giantbomb.com/uploads/scale_small/0/6087/2438704-1202149925_t.png" alt="">
<img src="http://static.giantbomb.com/uploads/scale_small/0/6087/2438704-1202149925_t.png" alt="">
</div>
<div class="things">I'm the stuff underneath</div>
My proposal is to preload the images and, using the complete events of fadeIn / fadeOut instead of setTimeOut.
I hope this could help you.
var imagesArray = ["http://assets.pokemon.com/assets/cms2/img/pokedex/full//007.png",
"http://assets.pokemon.com/assets/cms2/img/pokedex/full/001.png",
"https://assets.pokemon.com/static2/_ui/img/account/sign-up.png",
"http://static.giantbomb.com/uploads/scale_small/0/6087/2438704-1202149925_t.png",
"http://static.giantbomb.com/uploads/scale_small/0/6087/2438704-1202149925_t.png"];
function preloadImg(pictureUrls, callback) {
var i, j, loaded = 0;
var imagesArray = [];
for (i = 0, j = pictureUrls.length; i < j; i++) {
imagesArray.push(new Image());
}
for (i = 0, j = pictureUrls.length; i < j; i++) {
(function (img, src) {
img.onload = function () {
if (++loaded == pictureUrls.length && callback) {
callback(imagesArray);
}
};
img.src = src;
}(imagesArray[i], pictureUrls[i]));
}
};
function roll(imagesArray, currentPos, max){
if (max < 0) {
return;
}
var slide = $('.parallax-mirror').find('img').attr('src', imagesArray[currentPos].src);
slide.fadeIn(2000, function() {
slide.fadeOut(1500, function() {
currentPos++;
if(currentPos >= imagesArray.length){
currentPos = 0;
max--;
}
roll(imagesArray, currentPos, max);
});
});
}
$(function () {
preloadImg(imagesArray, function (imagesArray) {
roll(imagesArray, 0, 3);
});
});
.parallax-window {
min-height: 400px;
position:relative;
}
.ok {
font-size:50px;
background:gray;
color:blue;
height:500px;
width:100%;
}
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax.js/1.4.2/parallax.min.js"></script>
<div class="parallax-window" data-parallax="scroll"
data-image-src="http://assets.pokemon.com/assets/cms2/img/pokedex/full//007.png">
</div>
<div class="ok">I'm the stuff underneath</div>
Parallax effects are easy to maintain if you conceptually boil them down to their basics. I've added 2 lines of code to your project which (hopefully) will provide you with the result you're after.
The code I added was
.featured-wrapper img{
z-index: -1;
position: fixed;
}
https://jsfiddle.net/simonstern/k4fygvhg/6/
Try this, Hope this Helps..:)
fiddle link https://jsfiddle.net/e05m68wd/1/
$(document).ready(function() {
var imgSrc = ["https://assets.pokemon.com/assets/cms2/img/pokedex/full//007.png", "https://assets.pokemon.com/assets/cms2/img/pokedex/full//001.png", "https://assets.pokemon.com/static2/_ui/img/account/sign-up.png"];
var counter = 1;
var duration = 2000;
var tTime = 300;
var v = setInterval(function() {
$('.parallax-mirror').animate({
'opacity': 0
}, {
duration: tTime,
complete: function() {
$(this).find('img').attr('src', imgSrc[counter]).end().animate({
'opacity': 1
}, tTime);
}
});
if (counter > imgSrc.length - 1) {
counter = 0
} else {
counter++
};
},
duration);
});
.featured-wrapper {
height: 500px;
width: 100%;
overflow: hidden;
}
.things {
font-size: 50px;
height: 500px;
width: 100%;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax.js/1.4.2/parallax.min.js"></script>
<div class="featured-wrapper" data-parallax="scroll" data-image-src="http://assets.pokemon.com/assets/cms2/img/pokedex/full//007.png">
</div>
<div class="things">I'm the stuff underneath</div>
i'm trying to use this code to make an images slider, but the container is stuck to the first image and the jQuery slide dosen't work. I can't find the problem the code seems correct...
Script & CSS
<script type="text/javascript">
'use strict';
$(function() {
//settings for slider
var width = 720;
var animationSpeed = 1000;
var pause = 3000;
var currentSlide = 1;
//cache DOM elements
var $slider = $('#slider');
var $slideContainer = $('.slides', $slider);
var $slides = $('.slide', $slider);
var interval;
function startSlider() {
interval = setInterval(function() {
$slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function() {
if (++currentSlide === $slides.length) {
currentSlide = 1;
$slideContainer.css('margin-left', 0);
}
});
}, pause);
}
function pauseSlider() {
clearInterval(interval);
}
$slideContainer
.on('mouseenter', pauseSlider)
.on('mouseleave', startSlider);
startSlider();
});
</script>
<style type="text/css">
#slider {
width: 720px;
height: 400px;
overflow: hidden;
}
#slider .slides {
display: block;
width: 6000px;
height: 400px;
margin: 0;
padding: 0;
}
#slider .slide {
float: left;
list-style-type: none;
width: 720px;
height: 400px;
}
/* helper css, since we don't have images */
.slide1 {background: red;}
.slide2 {background: blue;}
.slide3 {background: green;}
.slide4 {background: purple;}
.slide5 {background: pink;}
</style>
Here the HTML
<body>
<div id="container">
<div id="header">
<?php include ("includes/header.php") ?>
</div>
<div id="sidebar">
<?php include ("includes/sidebar.php") ?>
</div>
<div id="contentMaster">
<div class="container">
<div class="header">
</div>
<div id="slider">
<ul class="slides">
<li class="slide slide1">slide1</li>
<li class="slide slide2">slide2</li>
<li class="slide slide3">slide3</li>
<li class="slide slide4">slide4</li>
<li class="slide slide5">slide5</li>
<li class="slide slide1">slide1</li>
</ul>
</div>
</div>
</div>
<div id="footer">
<?php include ("includes/footer.php") ?>
</div>
</div>
</body>
You can use $( document ).ready()
$(document).ready(function() {
//settings for slider
var width = 720;
var animationSpeed = 1000;
var pause = 3000;
var currentSlide = 1;
//cache DOM elements
var $slider = $('#slider');
var $slideContainer = $('.slides', $slider);
var $slides = $('.slide', $slider);
var interval;
function startSlider() {
interval = setInterval(function() {
$slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function() {
if (++currentSlide === $slides.length) {
currentSlide = 1;
$slideContainer.css('margin-left', 0);
}
});
}, pause);
}
function pauseSlider() {
clearInterval(interval);
}
$slideContainer
.on('mouseenter', pauseSlider)
.on('mouseleave', startSlider);
startSlider();
});
I'm trying to fade in the h4 tags after the divs slides into view. Also I would like to add the class "current" to each slide in view. the fiddle http://jsfiddle.net/x8euhjrt/. code
<div class="slider">
<div class="slides">
<div class="slide slide-1">
<h4>Slide 1</h4>
</div>
<div class="slide slide-2">
<h4>slide 2</h4>
</div>
<div class="slide slide-3">
<h4>slide 3</h4>
</div>
<div class="slide slide-4">
<h4>slide 4</h4>
</div>
<div class="slide slide-1">
<h4>Slide 1</h4>
</div>
</div><!-- end homepage slider container -->
CSS:
.slider{
width: 550px;
background: #d00d00;
min-height: 385px;
overflow: hidden;
}
.slides{
width: 2750px;
margin: 0;
}
.slide{
position:relative;
display: block;
float: left;
width: 550px;
height:400px;
}
.slide-1{
background:#dedede;
}
.slide-2{
background:#999;
}
.slide-3{
background:#333;
}
.slide-4{
background:#555;
}
h4{
background:#bada55;
padding:15px 120px;
display: inline-block;
margin-top:30%;
font-size:1.4em;
}
jQuery:
$(document).ready(function(){
var width = 550;
var speed = 1000;
var pause = 3000;
var currentSlide = 1;
var $slider = $(".slider");
var $slides = $slider.find('.slides');
var $slide = $slider.find('.slide');
$slide.first().addClass('current');
//alert($slide.length);
setInterval(function(){
$slides.animate({'margin-left': '-='+ width}, speed, function(){
currentSlide++;
if (currentSlide === $slide.length) {
currentSlide = 1;
$slides.css('margin-left', 0);
}
});
}, pause);
});
Check out the demo here. I have modified the animate() function's callback argument.
$slides.animate({'margin-left': '-='+ width}, speed, function(){
currentSlide++;
$slide.removeClass("current");
if (currentSlide === $slide.length) {
currentSlide = 1;
$slides.css('margin-left', 0);
}
$slides.find("h4").hide();
$slide.eq(currentSlide-1).addClass("current");
$slide.eq(currentSlide-1).find("h4").fadeIn();
});
First update your css to hide the h4 inside the slide div
.slide h4 {
display:none;
}
Then do some changes in you query code
$(document).ready(function(){
var width = 550;
var speed = 1000;
var pause = 3000;
var currentSlide = 1;
var $slider = $(".slider");
var $slides = $slider.find('.slides');
var $slide = $slider.find('.slide');
$slide.first().addClass('current');
//fade in the first slide h4
$('.current h4').fadeIn();
setInterval(function(){
$slides.animate({'margin-left': '-='+ width}, speed, function(){
currentSlide++;
if (currentSlide === $slide.length) {
currentSlide = 1;
$slides.css('margin-left', 0);
}
//remove the class current from the element you added it previously
$('.slide').removeClass('current');
//add the class current by selecting the right element using the loop variable that stores the slide number
$('.slide-'+currentSlide).addClass('current');
//hide the h4 you previously fadeIn
$('.slide h4').hide();
//fadeIn the current slide h4
$('.current h4').fadeIn();
});
}, pause);
});