I have jQuery code for a slideshow below. It works perfectly in the project I am working on right now. Although, I would like to implement a previous and next button in the same code if it's possible. Any help would be really appreciated.
<script type="text/javascript">
function() {
$(".slider #1").show("fade",500);
$(".slider #1").delay(5500).hide("slide",{direction:"left"},500);
var sc = $(".slider img").size();
var count = 2;
setInterval(function(){
$(".slider #"+count).show("slide",{direction:"right"},500);
$(".slider #"+count).delay(5500).hide("slide",{direction:"left"},500);
if(count == sc){
count = 1;
}
else
{
count=count+1;
}
},6500);
}
</script>
<div class="slider">
<img id="1" src="images/slider/slide1.jpg" border="0" alt="primeira" />
<img id="2" src="images/slider/slide2.jpg" border="0" alt="segunda" />
<img id="3" src="images/slider/slide3.jpg" border="0" alt="terceira" />
</div>
<style>
.slider {
width: 800px;
height: 349px;
overflow:hidden;
margin: 30px auto;
background-image: url(images/slider/load.GIF);
background-repeat: no-repeat;
background-position: center;
}
.slider img {
width: 800px;
height: 349px;
display: none;
}
</stile>
You can do the following:
var sc;
var count = 1;
$(document).ready(function() {
sc = $(".slider img").size();
$(".slider #1").show("fade",500);
setInterval(function(){
switchPanel(1);
},5500);
$("#prev").click(function(){switchPanel(-1)});
$("#next").click(function(){switchPanel(1)});
});
function switchPanel(direction)
{
var hide, show;
if (direction == 1)
{
show = "right";
hide = "left";
}
else if (direction == -1)
{
show = "left";
hide = "right";
}
$(".slider #"+count).hide("slide",{direction:hide},500);
count = count + direction;
if(count == sc + 1) count = 1;
else if(count == 0) count = sc;
$(".slider #"+count).show("slide",{direction:show},500);
}
What's left for you is to add the previous (#prev) and next (#next) buttons.
This should be works.
$(".slider #1").show("fade",500);
$(".slider #1").delay(5500).hide("slide",{direction:"left"},500);
var sc = $(".slider img").size();
var count = 2;
var hideImage;
var slideshow;
var slideImage = function(isNext) {
var showDirection;
if (isNext){
showDirection = "right";
} else {
showDirection = "left";
}
$(".slider #"+count).show("slide",{direction:showDirection},500);
hideImage = setTimeout(function(){
$(".slider #"+count).hide("slide",{direction:"left"},500);
count = (count+1) > sc ? 1 : count+1;
}, 5500);
}
// Start the slideshow
slideshow = setInterval(function(){
slideImage(true);
},6500);
var manualSlide = function(isNext) {
// Stop the slideshow
clearTimeout(hideImage);
clearInterval(slideshow);
// Force hide current image
var hideDirection = isNext ? "left" : "right";
$(".slider #"+count).hide("slide",{direction:hideDirection},500);
if(isNext) {
count = (count+1) > sc ? 1 : count+1;
} else {
count = (count-1) == 0 ? sc : count-1;
}
setTimeout(function(){
slideImage(isNext);
// Start the slideshow again
slideshow = setInterval(function(){
slideImage(true);
},6500);
}, 1000);
}
$("#prev").on("click", function() { manualSlide(false); });
$("#next").on("click", function() { manualSlide(true); });
This is the result: FIDDLE
Note: I have to change delay into setTimeout because we can't cancel delay.
Related
I'm trying to make a simple slider which stays 5 secondes on each slide (4 elements per slide), then goes back to the first slide and run again.
The number of elements may vary from 1 to 16.
Right now, my slider doesn't pause on last slide. It goes straight back to the first one.
Any ideas ? Thanks
Here is a fiddle.
var width = $(window).width();
var currentSlide = 1;
var $slides = $('ul li');
var itemNbr = document.getElementsByTagName("li").length;
$(function() {
if ( itemNbr > 4) {
setInterval(function () {
$('ul').animate({
'margin-left' : '-='+width}, 700, function () {
currentSlide++;
if (currentSlide >= itemNbr/4) {
currentSlide = 1;
$('ul').animate({
'margin-left' : '0px'},700
);
};
});
},5000);
};
});
You can modify your setInterval function this way :
var width = $(window).width();
var currentSlide = 1;
var $slides = $('ul li');
var itemNbr = document.getElementsByTagName("li").length;
$(function() {
if ( itemNbr > 4) {
setInterval(function () {
if (currentSlide >= itemNbr/4) {
$('ul').animate({'margin-left' : '0px'}, 700);
currentSlide = 1; // Edit
}
else {
$('ul').animate({'margin-left' : '-='+width}, 700);
currentSlide++;
}
},5000);
};
});
wrapper {
width:100%;
overflow:hidden;
}
ul {
width:300vw; height:320px;
list-style:none;
padding:0; margin:0;
overflow:hidden;
}
ul li {
width:80vw;
height:60px;
display:inline-block;
margin:10px 10vw;
background-color:red;
padding:0;
text-align:center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<wrapper>
<ul>
<li>ITEM</li><!--
--><li>ITEM</li><!--
--><li>ITEM</li><!--
--><li>ITEM</li><!--
--><li>ITEM</li><!--
--><li>ITEM</li><!--
--><li>ITEM</li><!--
--><li>ITEM</li><!--
--><li>ITEM</li><!--
--><li>ITEM</li><!--
--><li>ITEM</li>
</ul>
</wrapper>
How to convert THIS image slideshow --> https://jsfiddle.net/ukrkw4nb/19/ into TEXT slideshow so that list itemst (li's) show in loop the following 3 words: 1.Users, 2.Leads 3. Sales This is my attempt https://jsfiddle.net/ukrkw4nb/90/
Code below:
$(function() {
var slides = $('.slideShow>li');
var slideCount = 0;
var totalSlides = slides.length;
var slideCache = [];
(function preloader() {
if (slideCount < totalSlides){
slideCache[slideCount] = new Image();
slideCache[slideCount].src = slides.eq(slideCount).find('img').attr('src');
slideCache[slideCount].onload = function() {
slideCount++;
preloader();
}
} else {
// Run the slideshow
slideCount = 0;
SlideShow();
}
}());
function SlideShow() {
slides.eq(slideCount).fadeIn(1000).delay(2000).fadeOut(1000, function() {
slideCount < totalSlides - 1 ? slideCount ++ : slideCount = 0;
SlideShow();
});
}
});
I think I have it working the way you'd like.
I edited this a bit: my grasp of jQuery could be better and it threw me: the preloader function was to deal with using images, and is unnecessary for a text slideshow. Just write the html you want, remove the preloader function, and then call the SlideShow function.
$(function() {
var slides = $('.slideShow>li');
var slideCount = 0;
var totalSlides = slides.length;
var slideCache = [];
function SlideShow() {
slides.eq(slideCount).fadeIn(1000).delay(2000).fadeOut(1000, function() {
slideCount < totalSlides - 1 ? slideCount ++ : slideCount = 0;
SlideShow();
});
}
SlideShow();
});
* {
margin:0;
padding:0;
}
li {
display:none;
}
li:first-of-type {
display:block;
}
div {
position:absolute;
width:200px;
height:200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slideShowContainer">
<ul class="slideShow">
<li>Users</li>
<li>Leads</li>
<li>Sales</li>
</ul>
</div>
If the user is place in the top half of current section it automatically scroll top of that section.
Then if the user is in the bottom half of the current section it automatically scroll to the top next section.
function autoScroll(aid){
var aTag = $("#"+ aid);
body.animate({scrollTop: aTag.offset().top},1500);
}
$(window).scroll(function() {
var windowScroll = $(window).scrollTop();
if(windowScroll < ($("#Section2").offset().top/2) && !(windowScroll > ($("#Section2").offset().top/2))){
section_id = 'Section1';
}
$(document).off('scroll');
console.log(section_id);
autoScroll(section_id);
});
http://jsfiddle.net/x6xzh69v/2/
I created a working example in CODEPEN.
$(document).ready(function() {
var origHeight = [];
var curScroll = 0;
var cumSumHeight = 0;
var animHeight = 0;
var i = 0;
var timeoutVar;
$(".section").each(function(index) {
origHeight.push($(this).height());
});
$(window).scroll(function() {
curScroll = $("body").scrollTop();
cumSumHeight = 0;
while ((cumSumHeight + origHeight[i]) < curScroll) {
cumSumHeight += origHeight[i];
i++;
}
if (i == 0) {
if (curScroll < (origHeight[i] / 2)) {
animHeight = 0;
} else {
animHeight = origHeight[i];
}
} else {
if ((curScroll - cumSumHeight) < (origHeight[i] / 2)) {
animHeight = cumSumHeight;
} else {
animHeight = origHeight[i] + cumSumHeight;
}
}
clearTimeout(timeoutVar);
timeoutVar = setTimeout(function() {
$("body").stop(true,true).animate({
scrollTop: animHeight
}, 200);
}, 300);
});
});
.section {
width: 100%;
position: relative;
height: 300px;
}
#Section1 {
background: red;
}
#Section2 {
background: blue;
}
#Section3 {
background: orange;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="Section1" class="section"></section>
<section id="Section2" class="section"></section>
<section id="Section3" class="section"></section>
I want to be able, when scrolling down, to go directly to the next div, and when scrolling up, to go directly to the previous div.
Here are my files with an example with two divs:
$(document).ready(function() {
var lastScrollTop = 0;
function findPos(obj) {
var curtop = 0;
if (obj.offsetParent) {
do {
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
return [curtop];
}
}
$(window).scroll(function(event) {
var st = $(this).scrollTop();
if (st > lastScrollTop) {
$('html, body').animate({
scrollTop: $("#space_od").offset().top
}, 500);
} else {
$('html, body').animate({
scrollTop: $("#black_hole").offset().top
}, 500);
}
lastScrollTop = st;
});
});
body {
padding: 0;
margin: 0;
}
#black_hole {
background-image: url("black_hole.jpg");
background-position: center;
display: block;
height: 100vh;
width: 100%;
}
#space_od {
background-image: url("2001.png");
background-position: center;
display: block;
height: 100vh;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="black_hole">
</div>
<div id="space_od">
</div>
It seems to work fine when scrolling down the first time, but not when scrolling up, it seems to move a few pixels and then stop. Any ideas?
scrollTo is a class to add to the divs you need to scroll to:
<div id="black_hole" class="scrollTo">
</div>
<div id="space_od" class="scrollTo">
</div>
Js
var scrolling = false;
var currentPos = 0;
function scrollUp(){
if(!scrolling && currentPos > 0 ){
scrolling=true;
currentPos --;
var scrollToElement = $('.scrollTo')[currentPos];
$('html, body').animate({
scrollTop: $(scrollToElement).offset().top
}, 500, function(){
scrolling = false;
});
}
}
function scrollDown(){
if(!scrolling && currentPos < $('.scrollTo').length-1 ){
scrolling=true;
currentPos ++;
var scrollToElement = $('.scrollTo')[currentPos];
$('html, body').animate({
scrollTop: $(scrollToElement).offset().top
}, 500,function(){
scrolling = false;
});
}
}
$(document).ready(function() {
// Get the current position on load
for( var i = 0; i < $('.scrollTo').length; i++){
var elm = $('.scrollTo')[i];
if( $(document).scrollTop() >= $(elm).offset().top ){
currentPos = i;
}
}
$(document).bind('DOMMouseScroll', function(e){
if(e.originalEvent.detail > 0) {
scrollDown();
}else {
scrollUp();
}
return false;
});
$(document).bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta < 0) {
scrollDown();
}else {
scrollUp();
}
return false;
});
});
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I'm using dev7studios lean-slider for a site, and I'm wondering if someone can help a n00b modify the following javascript to use an actual pause/play button instead of the default "pause on hover" function.
if(settings.pauseOnHover && settings.pauseTime && settings.pauseTime > 0){
slider.hover(
function () {
clearTimeout(timer);
},
function () {
doTimer();
}
);
}
Thanks in advance!
/*
* Lean Slider v1.0.1
* http://dev7studios.com/lean-slider
*
* Copyright 2012, Dev7studios
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
;(function($) {
$.fn.leanSlider = function(options) {
// Set up plugin vars
var plugin = this,
settings = {},
slider = $(this),
slides = slider.children(),
currentSlide = 0,
timer = 0;
var init = function() {
// Set up settings
settings = $.extend({}, $.fn.leanSlider.defaults, options);
// Add inital classes
slider.addClass('lean-slider');
slides.addClass('lean-slider-slide');
currentSlide = settings.startSlide;
if(settings.startSlide < 0 || settings.startSlide >= slides.length) currentSlide = 0;
$(slides[currentSlide]).addClass('current');
// Set up directionNav
if(settings.directionNav && $(settings.directionNav).length){
var prevNav = $(''+ settings.prevText +''),
nextNav = $(''+ settings.nextText +'');
if(settings.directionNavPrevBuilder) prevNav = $(settings.directionNavPrevBuilder.call(this, settings.prevText));
if(settings.directionNavNextBuilder) nextNav = $(settings.directionNavNextBuilder.call(this, settings.nextText));
prevNav.on('click', function(e){
e.preventDefault();
plugin.prev();
});
nextNav.on('click', function(e){
e.preventDefault();
plugin.next();
});
$(settings.directionNav).append(prevNav);
$(settings.directionNav).append(nextNav);
}
// Set up controlNav
if(settings.controlNav && $(settings.controlNav).length){
slides.each(function(i){
var controlNav = $(''+ (i + 1) +'');
if(settings.controlNavBuilder) controlNav = $(settings.controlNavBuilder.call(this, i, $(slides[i])));
controlNav.on('click', function(e){
e.preventDefault();
plugin.show(i);
});
$(settings.controlNav).append(controlNav);
});
}
// Set up pauseOnHover
if(settings.pauseOnHover && settings.pauseTime && settings.pauseTime > 0){
slider.hover(
function () {
clearTimeout(timer);
},
function () {
doTimer();
}
);
}
// Initial processing
updateControlNav();
doTimer();
// Trigger the afterLoad callback
settings.afterLoad.call(this);
return plugin;
};
// Process timer
var doTimer = function(){
if(settings.pauseTime && settings.pauseTime > 0){
clearTimeout(timer);
timer = setTimeout(function(){ plugin.next(); }, settings.pauseTime);
}
};
// Update controlNav
var updateControlNav = function(){
if(settings.controlNav){
$('.lean-slider-control-nav', settings.controlNav).removeClass('active');
$($('.lean-slider-control-nav', settings.controlNav).get(currentSlide)).addClass('active');
}
};
// Prev
plugin.prev = function(){
// Trigger the beforeChange callback
settings.beforeChange.call(this, currentSlide);
currentSlide--;
if(currentSlide < 0) currentSlide = slides.length - 1;
slides.removeClass('current');
$(slides[currentSlide]).addClass('current');
updateControlNav();
doTimer();
// Trigger the afterChange callback
settings.afterChange.call(this, currentSlide);
};
// Next
plugin.next = function(){
// Trigger the beforeChange callback
settings.beforeChange.call(this, currentSlide);
currentSlide++;
if(currentSlide >= slides.length) currentSlide = 0;
slides.removeClass('current');
$(slides[currentSlide]).addClass('current');
updateControlNav();
doTimer();
// Trigger the afterChange callback
settings.afterChange.call(this, currentSlide);
};
// Show
plugin.show = function(index){
// Trigger the beforeChange callback
settings.beforeChange.call(this, currentSlide);
currentSlide = index;
if(currentSlide < 0) currentSlide = slides.length - 1;
if(currentSlide >= slides.length) currentSlide = 0;
slides.removeClass('current');
$(slides[currentSlide]).addClass('current');
updateControlNav();
doTimer();
// Trigger the afterChange callback
settings.afterChange.call(this, currentSlide);
};
// Call constructor
return init();
};
// Defaults
$.fn.leanSlider.defaults = {
pauseTime: 4000,
pauseOnHover: true,
startSlide: 0,
directionNav: '',
directionNavPrevBuilder: '',
directionNavNextBuilder: '',
controlNav: '',
controlNavBuilder: '',
prevText: 'Prev',
nextText: 'Next',
beforeChange: function(){},
afterChange: function(){},
afterLoad: function(){}
};
})(jQuery);
Here is a way to do it. Please try this code with the proper adjustments for you pictures, folders locations and place the JS and CSS correspondingly in your page.
Good luck!
var _animate = '';
var active = 1;
function animate() {
_animate = setInterval(function() {
$('#slider > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slider');
}, 3000);
}
$("#clickMe").bind(
'click' , function() {
if (active === 1) {
clearInterval(_animate);
active = 0;
} else {
animate();
active = 1;
}
}
);
$("#slider > div:gt(0)").hide();
animate();
#slider {
margin: 50px auto;
position: relative;
width: 200px;
height: 200px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#slider > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
<!DOCTYPE html>
<html>
<head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="lean-slider.js"></script>
<link rel="stylesheet" href="lean-slider.css" type="text/css" />
</head>
<body>
<div id="slider">
<div>
<img src="a1.jpg" alt="" width="200px" height="200px"/>
</div>
<div >
<img src="aaa1.jpg" alt="" width="200px" height="200px"/>
</div>
</div>
<input id="clickMe" type="button" value="clickme" />
</body>
</html>