I have created a image slider, using the plugin Extra slideshow, this plugin is using Greensock and jQuery, but the problem is the sliding of the image is not smooth, if you notice, image is jerking while sliding.
Whats the expert suggestion here? how to avoid this jerk and make the slider super smooth, slideshow is going to be in full height/width screen .
Here is the JSFiddle demo
$(document).ready(function () {
// simple
$(".extra-slider").extraSlider({
draggable : false,
keyboard : true,
auto: 7,
speed: 5,
pagination: $(".slider-wrapper .pagination")
});
});
Related
please go to this Address:
http://pakianco.ir/test/index.php
on the above of page i use two different slideshow for displaying company products. these two slideshow must be consonant means that they must be start at same time and images used in two slideshow must be change Simultaneously.But it did not happen.
i use two different plugin for that. left slideshow is bootstrap carousel plugin and right slideshow is flux Slider.
this code is for right slideshow:
$(function(){
window.myFlux = new flux.slider('#slideshow', {
autoplay: true,
pagination: false,
transitions: ['blocks'],
delay: 5000
});
});
and this is for left slideshow:
$('#slides.carousel').carousel({
'interval': 5000,
'pause':'false',
'wrap':'false'
});
can you help me to doing that
So I want to make a little image gallery carousel. Four images across. And you can carousel over to more images. I found bxslider and it seemed like a quick, plug & play, solution. But it's only showing one image per slide.
I think I've followed their directions. But I've obviously done something wrong.
I've left their css and js untouched. My HTML looks like a copy of of theirs. And I put this at the end of their js file:
$(document).ready(function(){
$('.bxslider').bxSlider({
mode: 'fade',
captions: true,
auto: true,
autoControls: false,
minSlides: 4
});
});
Here's the jsfiddle: http://jsfiddle.net/7YH8Q/
Anyone know how I can get this to work?
The problem is you didn't set slideWidth. In order to setup a carousal, you have to provide 3 values, namely : slideWidth, minSlides, maxSlides.
Here's a working fiddle http://jsfiddle.net/hwQ6C/
$('.bxslider').bxSlider({
slideWidth: 200,
minSlides: 4,
maxSlides: 5,
slideMargin: 10
});
Multiple items per slides and fade mode is not currently supported. This has been flaged as an issue. Changing mode is the only option to fix this with bxslider.
I have the nivo slider working perfectly on a few sites.
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'fade',
animSpeed: 1000,
pauseTime: 8000,
controlNav: true,
manualAdvance: false
directionNav: false,
controlNavThumbs: false
});
});
Very happy, except for one thing...
When the slide transition is in process. I have to wait for it to complete before I can go to the next slide. This is a bad user experience if i have my slide transaition on 1 second. as it feels like a long wait if i want to click through quickly.
On other carousel banners, I can click through the nav buttons very quickly back and forth and the effect keeps up and dynamically changes direction.
Can't find anyone else asking this or a fix so assume I am missing something. How can I have this effect with nivo slider?
You can see the same issue exists on the nivo slider demo http://demo.dev7studios.com/nivo-slider/ although it's difficult to notice as the images change shape so the navigation moves.
Thanks
EDIT: Added JSFiddle. http://jsfiddle.net/micjam/Bq3nT/
I tried to integrate wootheme's Flexslider on my site and it looks/works great except for when it is loading.
When you refresh the page with the slider, before flexslider loads (about 1 second) the first slide appears very big and flashes to black then dissapears and then the carousel appears.
I think the image is loading faster than the jquery? How can I hide the image unti jquery loads (like on the demo website, even if i refresh 3 billion times, the problem is never repeated on their website, it all loads gracefully! - http://flexslider.woothemes.com/carousel-min-max.html )
I loaded the flexlisder.js right after jquery and copied the same html code from the demo (to match the .css file that is also loaded. And here is the init code I am using - from the demo site also:
$(document).ready(function() {
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 210,
itemMargin: 5,
minItems: 2,
maxItems: 4
});
});
You need to deal with the callback functions for the plugin you are using
hide all the images from CSS by using a class let's say flexImages
$(document).ready(function() {
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 210,
itemMargin: 5,
minItems: 2,
maxItems: 4,
start: function(){
$('.flexImages').show();
},
});
});
Set the default style for "display" to "none". using show() will change this style value.
Also Found that the slides flash before loading and display stacked down the page with list item bullets.
Only for a second. Then it worked fine. I didn't realize I hadn't included the flexslider.css file because I had already turned of any navigation that would have shown broken nav img links.
Remember to Include the CSS!
… i had the same problem, tried the js solution above - it worked well but then i realized when js is disabled for some reason - that nothing will be shown up, so i decided to look for a non js solution:
i just put some thing like that for the specific slider:
.MySlider {
.flexslider .slides img {
max-height: 400px;
width: 940px;
}
}
worked well, even responsive. Hope that may help!
I experienced a similar issue when I forgot to include the flexslider.css
I just set in the CSS of the div that contains the slider: overflow:hidden ; height: the height of the images you use, then it works perfect!
update: this is not a responsive solution as the slider changes the size... what can I do??
I cant get out from what seems to be a simple conflict problem. I got a page using, jquery.1.8, jquery-ui.1.8.20, and pretty nice plugin for slideshows and carousel called SlidesJs (http://slidesjs.com).
Having both jQueryUI and SlidesJs loaded in the same page make slidesJS losing is slide transition effect animation (while moving from a slide to another). Everything working fine but this. I have my slides switching without the animation, anyway the speed of the sliding animation is keeped (my milliseconds are correctly waited before slide switch). Other transition effects like "fade" work fine.
I tried to add the jquery.easing plugin (http://gsgd.co.uk/sandbox/jquery/easing/) and explicitly use some easing effect but nothing changed.
This is my init configuration for SlidesJS.
$(function(){
$('#slides').slides({
preload: true,
generateNextPrev: false, //Default is false
container: 'slides_container', //Default is "slides_container"
pagination: true, //if slider use pagination, Default is TRUE
generatePagination: true,
slideSpeed: 250,
effect: 'slide, fade',
preloadImage: '../images/loading.gif',
play: 0,
});
});
Anyone with the same problem?
Try to remove divs around your images.
http://slidesjs.com/#docs
<div id="slides">
<div class="slides_container">
<img src="http://placehold.it/570x270">
<img src="http://placehold.it/570x270">
<img src="http://placehold.it/570x270">
<img src="http://placehold.it/570x270">
</div>
</div>
Open slides.jquery.js and find line 98 and 99
Find:
position = width*2;
direction = -width*2;
Replace:
position = option.width*2;
direction = -option.width*2;