I am trying to create a slider with thumbnails that displays 2 images at a time in the slider.
I got everything working thanks to minItems:2
The problem come with the thumbnail navigation.
When you click on the second thumbnail, the slider will move, and display the 3rd image on the slider, although the second image was already being displayed.
Is there a way to create 2 active thumbnails and make them sync to the images being shown in the slider?
The only other similar slider I found that uses this is nastygal in their product page.
Hope their is a way, because is not really user friendly the way it is now.
Thanks!
I am using this on a woocommerce store:
productSlider: {
selector: '#product-nav',
init: function () {
var base = this,
container = $(base.selector),
images = $('#product-images'),
zoom = images.data('zoom');
container.flexslider({
animation: "slide",
controlNav: false,
directionNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 106,
itemMargin: 10,
asNavFor: '#product-images'
});
images.flexslider({
animation: "slide",
controlNav: false,
directionNav: true,
animationLoop: false,
slideshow: false,
minItems: 2,
maxItems: 2,
prevText: '<i class="fa fa-angle-left"></i>',
nextText: '<i class="fa fa-angle-right"></i>',
sync: "#product-nav",
start: function(slider) {
if (zoom) {
$(slider.slides[0]).easyZoom({
preventClicks: false
});
}
},
before: function(slider) {
if (zoom) {
$(slider.slides[slider.animatingTo]).easyZoom({
preventClicks: false
});
}
}
});
}
},
I'm not sure about highlighting multiple thumbnails, but I do know that this slider was built to handle multiple images among many other features:
http://www.owlcarousel.owlgraphic.com/index.html
Related
I have a slick carousel, within the first slide I am autoplaying a video. This is working when the slick starts, shows the 2nd slide then gets back to the 1st. But I cannot get this to work on pageload, I think this is because I am using afterChange. You can see my example here
The JavaScript for firing is:
$('.top-carousel').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 4000,
dots: true,
pauseOnHover: false,
infinite: true,
arrows: false,
});
$('.top-carousel').on('afterChange', function(event, slick, currentSlide){
if ($("#slick-slide00").hasClass("slick-active")) {
$('.top-carousel').slick('slickPause');
theVideo.play();
}
});
document.getElementById('theVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
$('.top-carousel').slick('slickPlay');
}
Does anyone have any ideas please?
I got codes for thumbnail slider from menu cool but the slider won't stop at a point where it ends, it is infinite.You can find here. Please help.
If you will change showMode setting to 1, then it will not be stuck in infinite scroll
var thumbnailSliderOptions =
{
sliderId: "thumbnail-slider",
orientation: "horizontal",
thumbWidth: "300px",
thumbHeight: "150px",
showMode: 1, // earlier this was set to 3 change it to 1
infiniteSlides: false,
stopAtEnd: true,
autoAdvance: false,
selectable: true,
slideInterval: 3000,
transitionSpeed: 1000,
shuffle: false,
startSlideIndex: 0, //0-based
pauseOnHover: true,
initSliderByCallingInitFunc: false,
rightGap: "default",
keyboardNav: true,
mousewheelNav: true,
before: null,
license: "b2e98"
};
We are using slick slider for a clients project and it has been working perfectly so far, however I have noticed something, I don't know whether it is a bug or something that I am missing something.
When the slick slider is loaded, just before you get the whole slider visible in the viewport it doesnt load properly and stacks at bottom of each other with half of the slider of the page. Then whole slider is visible in the viewport it jumps back to how it should, almost like it has re-slicked its self.
Below is the code for my Slick Slider
$('.css_slider').slick({
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear',
autoplay: true,
autoplaySpeed : 8000,
adaptiveHeight: true,
dots: true
});
and Images looks like as in link here
I have read on various places and found this linkGithub link for same issue
But it is not working for me. I am still getting same ugly effect.
Please suggest
Have you tried delaying the function until the dom is loaded?
$( window ).load(function() {
$('.css_slider').slick({
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear',
autoplay: true,
autoplaySpeed : 8000,
adaptiveHeight: true,
dots: true
});
});
or, if that doesn't work:
setTimeout(function(){
$('.css_slider').slick({
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear',
autoplay: true,
autoplaySpeed : 8000,
adaptiveHeight: true,
dots: true
});
}, 2000)
I have a flexslider with Carousel Nav with the following JS config:
$(function(){
SyntaxHighlighter.all();
});
$(window).load(function(){
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 210,
//pauseOnAction: false, // this is not working
itemMargin: 5,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "fade",
controlNav: false,
animationLoop: true,
slideshow: true,
slideshowSpeed: 4600,
animationSpeed: 600,
pauseOnAction: false,
sync: "#carousel",
start: function(slider){
$('body').removeClass('loading');
}
});
});
I do not want the slideshow to stop if a user clicks on the slider, so I added the "pauseOnAction: false" setting. However, if the user clicks on the Carousel items, the slideshow stops. I added the same pauseOnAction config to the Carousel portion, but it does not fix the problem.
https://github.com/woothemes/FlexSlider/wiki/FlexSlider-Properties
Has anyone found a solution to this?
I am trying to make flexslider to loop in one direction contineously in one direction. ones it reachs the last image in the loop then it should start from the first image again.
I have two issue with the example i have set up on jsfiddle
One: I am not able to make it work on jsFiddle
Two: animation is on at the end it then start in the other direction while i want to to move in one direction only Left to Right.
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
easing: "linear",
useCSS: false,
randomize: false,
pauseOnHover: true,
slideshowSpeed: 12,
animationSpeed: 8000,
controlNav: false,
directionNav: false,
itemWidth: 210,
itemMargin: 5,
start: function(slider){
$('body').removeClass('loading');
}
});
First issue
You miss a closing )}; at the end of the script so it is not valid, and you have to set the script section as No wrap - in <head> in the Framework and extension panel.
For the first image you left the full path http://flexslider.woothemes.com/
Second issue
The only loop feature can be set using animationLoop: true for now is the only solution.
Here a request pulled in github for a more smooth animation and loop: https://github.com/woothemes/FlexSlider/issues/287
Code:
$(window).load(function () {
$('.flexslider').flexslider({
animation: "slide",
animationLoop: true,
easing: "linear",
useCSS: false,
randomize: false,
pauseOnHover: true,
slideshowSpeed: 12,
animationSpeed: 8000,
controlNav: false,
directionNav: false,
itemWidth: 210,
itemMargin: 5,
start: function (slider) {
$('body').removeClass('loading');
}
});
});
Docs: https://github.com/woothemes/FlexSlider/wiki/FlexSlider-Properties
Demo: http://jsfiddle.net/IrvinDominin/6TXzC/