This problem is plaguing me. I've used jCarouselLite for years and years, I even added a "fade" feature to the original library released by Ganeshji Marwaha for my own use. I recently switched to the new plug-in because it is still supported, it uses touch events, and it can be responsive. But I have had no luck in using it.
I am almost certainly doing something stupid, but I can not figure out what... Can anyone take a look with fresh eyes at this homepage implementation?
http://staging.tbc1927.com/www/
The implementation here is not responsive, but I would like swipe supported.
$().ready(function() {
$(".homecarousel").jCarouselLite({
visible: 1,
auto: 12000,
speed: 800,
responsive: false,
swipe: true,
circular: true,
btnNext: ".next",
btnPrev: ".previous"
});
});
The CSS is simple enough, and I am letting the plug in do the heavy lifting. The jQuery I am using is the same as they recommend (1.7.2), though I had been using a newer version as well with no luck (1.8).
When the carousel initially loads, the first slide is fine. Then it goes away, and the whole carousel is positioned WAY off the page. The longer the carousel runs, the more off the page it is positioned.
What am I missing?
The author of the plug in helped me out here. The plug in changed the "auto" option to a boolean value, and the "12000" value was throwing it off. To set the animation delay, the plug in now uses a parameter called "timeout". The correct implementation script should be:
$().ready(function() {
$(".homecarousel").jCarouselLite({
visible: 1,
auto: true,
timeout: 12000,
speed: 800,
responsive: false,
swipe: true,
circular: true,
btnNext: ".next",
btnPrev: ".previous"
});
});
Related
I'm trying to create a vertically scrollable and draggable list with swiper.js, and I've almost reached the goal. There is only one issue left:
The mousewheel scrolling feels very laggy. After every scroll, there is a small delay before the next one is registered. Check out the behavior here:
http://idangero.us/swiper/demos/20-mousewheel-control.html
This is my configuration so far:
this.swiper = new Swiper(this.$el, {
direction: 'vertical',
centeredSlides: true,
spaceBetween: 0,
grabCursor: true,
slidesPerView: 'auto',
mousewheelControl: true,
}
I haven't found a way to disable this. The only property that sounds like it could help, mousewheelSensitivity, does not seem to change the behavior at all.
Is this even possible or do I need to change swiper.js internals for this to work?
I have the same issue, and haven't found a final answer for this, however, I noticed that adding the next options helps a little:
mousewheelSensitivity: 0,
mousewheelReleaseOnEdges: true,
If you have found any other solution, please share it with us.
Mousewheel Methods & Properties:
function disableScrolling() {
swiper.mousewheel.disable();
}
I have been given a task to change how our slider works. We use the jQuery plugin called Slick Slider to display news blurbs.
What they want me to do is to have the previous/next buttons and autoplay to all move the slider one slide at a time in all modes (mobile, tablet, and desktop). Ok not a problem, I set that up easily enough. Then they asked me to change it so that it displays one dot for every 3 slides and clicking those dots moves the slider 3 slides at a time.
Obviously this is going to require me making modifications to the functions in slick.js. I don't see any built in functionality to do this. I am trying to figure out how to extend this library and override the functions one at a time. To be honest I am not sure how to do this properly with jQuery plugins.
This is complicated by the fact that we are running this in Drupal. I have setup a JS Fiddle with a close approximation of what we are doing right now.
JS Fiddle: https://jsfiddle.net/9z52tfkw/
My slick initiation code is here:
(function($) {
$('.my-slider').slick({
speed: 1000,
autoplay: true,
dots: true,
mobileFirst: true,
slidesToShow: 1,
slidesToScroll: 1,
focusOnSelect: true,
appendArrows: $('.controls'),
prevArrow: '<button type="button" class="prev">Prev</button>',
nextArrow: '<button type="button" class="next">Next</button>',
responsive: [
{
breakpoint: 960,
settings: {
dots: true,
slidesToShow: 3
}
},
{
breakpoint: 769,
settings: {
dots: true,
slidesToShow: 2
}
}
]
});
}(jQuery));
Slick Slider details and code can be found here: http://kenwheeler.github.io/slick
I am using version 1.5.6. A copy of the same version of slick.js can be found here: https://github.com/kenwheeler/slick/blob/1.5.6/slick/slick.js
To clarify, I am not asking that anyone do the overrides for me. Instead I am asking for help in overriding the plugin's functions or otherwise extending the plugin. I am capable from there, though will be grateful for any help provided.
I think this will also help me in the future with other jQuery plugins. Thanks!
You can always just remove 2 out of three of the dots :)
i.e. add this to the end of the init:
.find('.slick-dots li').filter(function(i,e){
return (i % 3 != 0);
}).hide();
JSFiddle: https://jsfiddle.net/TrueBlueAussie/9z52tfkw/2/
For a more obvious example: jsfiddle.net/9z52tfkw/3
first post here; apologies for any information that is missed. I'm a complete novice at Javascript so apologies in advanced also.
I am currently creating a responsive website with a slider.
The slider takes up the entire background of the site on larger devices, but when the window is less than 480px I would like the slider to scale down to a smaller area. I have this working correctly, in terms of when the device first loads up the page. The correct slider settings are being used.
But what I would like is: if the user scales the website below 480px then the javascript will change at that point (like CSS media queries) to use the new slider settings. At the moment, if you scale below or above the threshold, you have to refresh the page to get the new slider settings.
This is some code I managed to find from other questions asked on the site, but it does not allow the change to happen when the window is resized, only on a refresh:
<script>
$(document).ready(function(){
if($(window).width()>480){
$(".slideshow").startslider({
slideTransitionSpeed: 500,
slideTransitionEasing: "easeOutExpo",
sliderFullscreen: true,
sliderAutoPlay: false,
sliderResizable: true,
slidesDraggable: false,
slideImageScaleMode: "fill",
showTimer: false,
showPause: false,
showDots: false
});
return;
} else {
$(".slideshow").startslider({
slideTransitionSpeed: 500,
slideTransitionEasing: "easeOutExpo",
sliderFullscreen: false,
sliderAutoPlay: false,
sliderResizable: true,
slidesDraggable: true,
slideImageScaleMode: "fill",
showTimer: false,
showPause: false,
showDots: false
});
}
});
</script>
I am completely new to Javascript, so this may be a simple problem; but it's beyond me all the same.
You can wrap your code inside a function like this:
function slider() {
// your code here
}
which is then called on page load:
$(function(){
slider();
});
and also on window resize:
$(window).on('resize', function() {
slider();
});
I'm not sure whether this is a css or JS issue. I have installed the flexslider plugin' which seems to have been installed correctly however I have a problems with the flexslider carousel, code posted at github. My sliders are playing in descending order, i'm not quite sure why or how it's doing this... below is the Jquery in corresponding JS
$(window).load(function(){
$('.flexslider').flexslider({
animation: "fade",
animationLoop: true,
slideshow:true,
directionNav: true,
minItems: 1,
maxItems: 1,
controlsContainer: false,
manualControls: '.custom-controls li',
start: function(slider){
$('body').removeClass('loading');
}
});
});
My Example Site
Maybe you are overriding flex-slider CSS from your own CSS? Maybe you have floated flex-slider's contents (image, div or what ever) to right or reverse direction? If so try to fix that :)
I have tested this after seeing your post. So I changed flex-slider inline float:left to float: right and now I get last slide as first slide and all slides are reversed.
It's a bug in Flexslider 2.2.2.
Downli
https://github.com/woothemes/FlexSlider
One of my websites throws up an error about the javascript not being defined when I view it in IE7.
After a bit of research, I think its something to do with the Doctype I am using, as I am using the HTML5 Boilerplate. This shouldnt cause a problem though right?
Can anyone tell me why this is happening and how to fix it? The website is: http://njbuildingandmaintenance.com
And here is the menu script I am using (the error isnt replicated on this page...) http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/
Thanks
In your file "script.js", there's a stray comma at the end of an object literal.
$(window).load(function() {
$('.flexslider').flexslider({
animation: "fade",
slideshow: true, //Should the slider animate automatically by default? (true/false)
slideshowSpeed: 7000, //Set the speed of the slideshow cycling, in milliseconds
animationDuration: 600,
keyboardNav: true, //Allow for keyboard navigation using left/right keys (true/false)
touchSwipe: true, // <---- HERE IS THE ERROR
});
});
Get rid of that comma.