I am using the following lightslider: http://sachinchoolur.github.io/lightslider/
If I am going to call:
<script>
var slider = $("#lightSlider").lightSlider({//myoptions});
var x = //Any number;
slider.goToSlide(x);
</script>
The slider is going to the correct slide. But the slider is going to slide to the picture. So if I do have 100 pictures and I am going to picture 99, the slider is sliding through all picture. This looks ugly.
How can I do it, that the slider is going directly to picture 99 without any animation. Just open picture 99 and the click usual on next/prev with sliding effect.
Thanks!
Craphunter
You can perhaps try setting the slideMove to the number you want before slider.goToSlide(x);
Moreover, you could turn off the animations before moving to the slide.
Related
I'm trying to make an image carousel/slider that automatically scrolls smoothly and loops using jQuery. Here's the function I'm using:
function spinCarousel() {
$("ul li:first-child").animate({ marginLeft: -200 }, 3000, 'linear', function () {
$("ul li:first-child").appendTo('ul');
$("ul li:last-child").css('margin-Left', 0);
spinCarousel();
});
}
And here's an illustration: https://jsfiddle.net/T_Recks/aa43n7g0/
I tried adding it to a local development site (replacing the text and colored backgrounds with images) and it seems to work nicely. However, I'd like to make a version that scrolls right instead of left, but haven't been able to figure it out. I've tried changing ".append" to ".prepend" and playing with the margin changes, but no luck so far.
Any suggestions?
I forked and retooled your JSFiddle to make it scroll from left to right. Check it out here: https://jsfiddle.net/1jw8xpqe/
Had to change a few things to get it working. First, the list is parsed to reverse the order of the slides and shift a couple of them so the leftmost one is "Item #1" when the slider initializes:
// reverse items
var list = $('ul');
var listItems = list.children('li');
list.append(listItems.get().reverse());
// rearrange last two items so first slide starts on left
list.prepend($('ul li:last-child').prev('li').andSelf());
Then a few CSS/JS tweaks: The slide animates the first li from -200px (defined in the CSS) to 0, and after each cycle, prepends the last item of the ul to the start at -200px. Hope this helps!
I want to slide an image (of a boomerang) off screen and then 5 seconds later slide it back into place. I want the image to right next to some text to begin with and end.
Ideally I'd like the animation to be smooth. I can find many examples doing things like this, but none that seem to do this very simple thing. Any pointers in the right direction would be greatly appreciated.
$(document).ready(function()
{
var my_div = $("#target");
var div_top = my_div.offset().top;
$(document).scroll(function()
{
if (div_top <= $(document).scrollTop()+($(window).height() /2))
{
// EVENT TO SEND IMAGE OFF SCREEN TO THE RIGHT
// EVENT TO WAIT 5 SECONDS
// EVENT TO SEND THE IMAGE BACK
}
});
});
<div id="target;">
<p style="font-size:32px; display: inline;">TEXT</p>
<img id="foo" style="height:35px;" src="https://upload.wikimedia.org/wikipedia/commons/4/46/Ic_account_box_48px.svgg">
You've tagged the question with javascript and provide code that's an incomplete javascript solution, but you also mention you want it to be smooth.
Perhaps declaring a CSS animation using transforms would be better?
Check out https://daneden.github.io/animate.css/ for some examples of what a CSS animation can do. And they can be quite complex, as you can define as many steps as needed.
Now if in some of your animation steps you need to perform calculations, you're stuck with JS, but you can still use a library that uses CSS transitions under the hood get get a smooth frame-rate.
I've used move.js for such a task in the past, and worked pretty well.
https://visionmedia.github.io/move.js/
I made a jsfiddle so you can reproduce the bug:
FIDDLE
I implemented a carousel to display 3 images. There's a current image (the image being displayed) and the other two remain hidden until I click one of the lateral arrows, causing the next image to slide from the side overlaying the (now previous) current image.
I've been 2 hours trying to figure out why there are certain specific 'transitions' in which the animation doesn't seem to work. For example, when clicking the left arrow to pass from the first image to the second and from the second to the third the animation works fine, but when clicking it again, the transition from 3 to 1 doesn't perform the slide animation. When moving in the opposite direction (using the right arrow) only one transition is animated. I think the problem has to do with that if in the click event handler function, but couldn't spot what's causing it.
Any help would be greatly appreciated.
TIA
The underlying issue here is related to the z-order of the three images. Your slide animations are only showing up where the image being slid in is above the displayed image; the "broken" transitions are actually occurring, they're just obscured by the "higher" visible image.
You can fix this by explicitly setting the z-index of the new and current image. For example, on the right transition:
prevLandscape.zIndex(1);
currLandscape.zIndex(0);
If you do this, you'll also need to increase the z-index of the arrows so they're above the images.
Fiddle
jsfiddle
The issue is with the hide method you just simply hide it add the slide transition for the hide method.
change this line currLandscape.hide(); to currLandscape.hide("slide");
there seemed to be a problem with the order of the images also. please try this code out. The code is reuse of the previous image arrow code. Just try it out.
$('.arrowRight').on('click',function(e) {
var currLandscape = $(this).siblings(".currImg");
var nextLandscape = currLandscape.nextAll(".hiddenImg").first();
var currDesc= $(".currDesc");
var nextDesc= currDesc.nextAll(".hiddenDesc").first();
if (nextLandscape.length == 0) {
nextLandscape = currLandscape.siblings('.hiddenImg').first();
}
if (nextDesc.length == 0) {
nextDesc= currDesc.siblings('.hiddenDesc').first();
}
nextLandscape.show("slide", { direction: "right" }, 400, function() {
currLandscape.hide("slide");
});
currDesc.fadeOut().removeClass('currDesc').addClass('hiddenDesc');
nextDesc.fadeIn().removeClass('hiddenDesc').addClass('currDesc');
currLandscape.removeClass('currImg').addClass('hiddenImg');
nextLandscape.removeClass('hiddenImg').addClass('currImg');
});
The code is pretty short, here it is:
http://jsfiddle.net/L4Ry3/170/
$(document).ready(function(){
$('#previous_frame').on("click",function(){
var $last = $('.frames li:last-child')
$('.frames').prepend($last)
$last.css({left:'-33%'})
$last.animate({left:'0%'})
});
$('#next_frame').on("click",function(){
var $first = $('.frames li:first-child');
$('.frames').append($first);
$('.frames li:first-child').css({right:'-33%'});
$('li:first-child').animate({right:'0%'})
});
})
If I click the left button, it slowly moves the image. When I click the right side, the image instantaneously switches into position. I can't understand why this would happen.
It is because of the left rule you add. It stays 0. You can notice it works at first, then stops working for images you clicked left on, but keeps working for the rest.
In the next_frame function add
$('.frames li:first-child').css({left:''});
to remove that left.
You can see it working in this fiddle.
Test it out by clicking left all through, then clicking right again.
In Depth
Apparently the left style rule is more dominant than the right. When you have both it regards only the left, so though the right is animating, it stays on 0% left. Removing the left rule allows the css engine to regard the right and show the desired animation.
change the right to left in your next frame click event and - to +..that should do the trick
try this
$(document).ready(function(){
$('#previous_frame').on("click",function(){
var $last = $('.frames li:last-child')
$('.frames').prepend($last)
$last.css({left:'-33%'})
$last.animate({left:'0%'})
});
$('#next_frame').on("click",function(){
var $first = $('.frames li:first-child');
$('.frames').append($first);
$('.frames li:first-child').css({left:'33%'}); //<----here
$('li:first-child').animate({left:'0%'})//<----here
});
})
working fiddle
I am looking for advice on how to create an autoscrolling effect using jQuery which would enable an entire div within a page to begin scrolling vertically upon loading at a constant slow speed. This would be a div with a large amount of content of which only a small amount was visible on the screen at any one time.
The scroll needs to be automatic, smooth and at a defined rate for example 10 pixels per second. Additionally when the scroll gets to the bottom of the page I need to be able to call a function.
I have tried a few different jQuery plugins but found nothing yet that worked reliably. Can anybody suggest an approach to take here?
Thanks
Simon
This can easily be done without jquery.
function init() {
var div = document.getElementById("myDiv");
// increase the scroll position by 10 px every 10th of a second
setInterval(function() {
// make sure it's not at the bottom
if (div.scrollTop < div.scrollHeight - div.clientHeight)
div.scrollTop += 10; // move down
}, 100); // 100 milliseconds
}
Try this technique
try this plugin : scrollTo
especially the onAfter