I have a webpage with a carousel but I prefer not to load it when rendered in a mobile device.
How can I skip the initialization on mobile devices?
I came up with something like that (not optimized yet):
jQuery(function($){
if($(window).width() > 767){
$('.flexslider').flexslider({
directionNav: false,
controlNav: false
});
}
$(window).resize(function() {
if($(window).width() > 767){
$('.flexslider').flexslider({
directionNav: false,
controlNav: false
});
}
});
});
But I feel there should be a better way to do it. Any ideas?
On the CSS side I simply hide all the slides but the first one so I have only 1 image visible.
Thanks
The site detectmobilebrowsers has some javascript code to detect a mobile browser - you could just put an if round this and only instantiate the carousel if it is not a mobile browser.
Related
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")
});
});
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 have two Flexsliders inside two different panels of a javascript tabbed panel. It loads perfectly fine. However, if I resize my browser window by either turning my iPhone from portrait to landscape or resizing the window on my Macbook Pro, the Flexsliders often get messed up. This doesn't happen all the time but it will happen eventually if I keep resizing my browser window. You can see it easiest by turning an iPhone from portrait to landscape and then clicking on the other tab containing the other Flexslider as described below.
The two Flexsliders are in the first two tabs, "Commonweath & Council" and "Transmission Gallery." If the panel is open to Commonwealth & Council and I resize my browser window, the Flexslider will adjust accordingly and will be fine in the open panel. However, after I finish resizing my browser window, and click on the other tab that contains the second Flexslider (in this case, Transmission Gallery), that Flexslider will often be messed up. The main slider container will be larger and the image inside is oversized and cropped. Or in some cases, the main slider turns into a carousel slider like the one below it. Or the image in the main slider is off-centered. But then if I click outside of the browser window on my Macbook Pro and click back on the browser window, it will pop back into the correct display. On my iPhone, I would have to refresh the webpage to make it display correctly.
I'm thinking it has to do with the Flexslider in the other tab, which is not open, not being able to read the window size change and scale correctly? Though sometimes it works fine and sometimes it doesn't, so maybe it's a bug with Flexslider? But for sure it will happen the second or third time I resize the window or turn my iPhone from portrait to landscape.
http://jmoon.net/projects/phoenixrising/phoenixrising_p1.html
I ended up using Tweaky.com to fix my Flexslider issue. Below is the correct script to account for browser window resizing.
<script defer src="../../scripts/jquery.flexslider.js"></script>
<script>
$(document).ready(function() {
$('div#Panels').tabs({
active: 2,
collapsible: false,
activate: function(event, ui) {
switch (ui.newPanel.index()) {
case 0:
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: false,
itemWidth: 80,
itemMargin: 5,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: false,
sync: "#carousel"
});
//-----------------
$(window).resize();
//-----------------
break;
case 1:
$('#carousel2').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: false,
itemWidth: 80,
itemMargin: 5,
asNavFor: '#slider2'
});
$('#slider2').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: false,
sync: "#carousel2"
});
//-----------------
$(window).resize();
//-----------------
break;
}
}
});
})
</script>
<script type="text/javascript">
$(function() {
$('#slider').hover(function() {
$('.flex-caption').fadeToggle();
});
$('#slider2').hover(function() {
$('.flex-caption').fadeToggle();
});
});
</script>
I'm using jcarousel lite to display an auto-scrolling carousel of brand logos on one of my sites. I tried to make it responsive (max 6 images on largest display) using the following javascript. The carousel works fine using the original code without me trying to modify how many images are visible.
<script>
function carouselLogic(){
if ($(window).width() > 959 ){
visible = 6;
changeCarousel(visible);
}
else if($(window).width() > 767){
visible = 4;
changeCarousel(visible);
}
else if($(window).width() > 599){
visible = 2;
changeCarousel(visible);
}
}
carouselLogic();
$(window).resize(function(){
carouselLogic();
});
/* original function for first page load
$(function() {
$(".logoCarousel").jCarouselLite({
auto: 2500,
speed: 1000,
visible: 6
});
});
*/
function changeCarousel(visible){
$(".logoCarousel").jCarouselLite({
auto: 2500,
speed: 1000,
visible: visible
});
}
</script>
Images appear inline with a 20px margin left/right.
This code is supposed to change the visible number of logos to ensure they still fit on the page with each responsive change.
The result is the carousels auto scroll goes all crazy. It bounces back and forth all over the place, and much quicker than the default.
Any suggestions on how to improve this code?
The original jCarouselLite has been forked here;
https://github.com/kswedberg/jquery-carousel-lite#responsive-carousels
It's not quite as Lite as it originally was but it has many more methods, and is touch screen scrollable and responsive. You can add the following options which are working for me;
function changeCarousel(visible){
$(".logoCarousel").jCarouselLite({
auto: true,
speed: 1000,
visible: visible,
autoWidth: true,
responsive: true
});
}
As pointed out here,
Run jCarouselLite again, after an AJAX request
You might want to end the original carousel as well in your carouselLogic() function
$(".logoCarousel").trigger("endCarousel");
This is old but in case it helps, i'm pretty sure you need to "reset" jcarousellite. Otherwise you are instantiating it again and again after each window resize.
To initialize it properly after it has already been initialized, you need to call a reset method. I don't remember the syntax off the top of my head, but if you search the jcarousellite.js source for "reset" you should find the correct syntax
My fade animation is broken in IE7 & 8. rather than fade, the next slide contents are rendered, and both slides are present and mashed together for the specified animaionDuration.
Any fixes for this?
I posted to the FlexSlider 'support' feed, but it's not very well monitored so I'm turning to SO.
Here's my call:
$('.flexslider').flexslider({
slideshow: true,
slideshowSpeed: 6000,
animation: "fade",
animationDuration: 500
});
FlexSlider Documentation here:
http://flex.madebymufffin.com/
I had the same problem, to 'fix' the issue I used an if/else statement to remove the animationDuration from IE7/8 that flex slider uses.
It does mean it's not quite as pretty in IE8/7 but it fixes the issue and leaves all the latest browsers looking as you intended!
if ($().flexslider) {
if (window.navigator.userAgent.indexOf('MSIE 8.0;') > 0) {
$('.flexslider').flexslider({
slideshowSpeed: 5000,
animation: "fade",
animationDuration: 0,
controlNav: false,
pauseOnHover: true,
directionNav: true
});
} else{
$('.flexslider').flexslider({
slideshowSpeed: 5000,
animation: "fade",
controlNav: false,
pauseOnHover: true,
directionNav: true
});
}
};
Hope this helps!
Unable to replicate.
However, I did get this in my error console. If this is causing something else to pitch an error for you, then it could be interrupting the propagation of some jQuery events.
http://web2carz.rawdesigns.net/common/js/awkward.js Failed to load resource: the server responded with a status of 404 (Not Found)
If something in that script is vital, I can foresee issues.
I've noticed that IE7 is not supporting the "fade" animation. I don't know why.
Based on all the answers above, I edited the script call as follows, and it worked.
For good browsers, I have the "fade" effect and for IE7, I have the "slide" effect.
<script type="text/javascript">
$(window).load(function(){
if (window.navigator.userAgent.indexOf('MSIE 7.0;') > 0) {
$('.flexslider').flexslider({
animation: "slide"
});
} else {
$('.flexslider').flexslider();
}
});
</script>