We Keep Coding

SwiperJS move more than just one slide on click

I want to implement the feature, when I click arrow it moves 3 or 4 slides to the right or to the left, not just one slide.
I am working with Angular
Feature, when it moves one slide works, but I can't get moving more than just one slide to work.
Here is code for moving just one slide to the right or to the left
scrollLeft() {
this.swiper!.swiperRef.slidePrev(500);
this.scrollArrows();
}
scrollRight() {
this.swiper!.swiperRef.slideNext(500);
this.scrollArrows();
}
Config:
swiperConfig: any = {
slidesPerView: 'auto',
loop: true,
spaceBetween: 20,
autoplay: {
delay: 1000,
disableOnInteraction: false,
},
};
Thanks for everyone to help.

OWL Carousel Fade Transition Speed

Am using OWL v2.0 and load animate.css to support 'fadeIn' and 'fadeOut', but having difficulty in trying to extend the transition time of the fade between slide 1 and slide 2. Seems to a constant 1 second or so whatever I try.
owl.owlCarousel({
nav: false, // Show next and prev buttons
items: 1,
smartSpeed: 10000,
dotsSpeed: 1000,
dragEndSpeed: 1000,
singleItem: true,
animateIn: 'fadeIn',
animateOut: 'fadeOut',
pagination: false,
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: false,
loop: true,
afterAction: function (el) {
//remove class active
this
.$owlItems
.removeClass('active')
//add class active
this
.$owlItems //owl internal $ object containing items
.eq(this.currentItem + 1)
.addClass('active')
}
});
Any ideas, thanks.

The transition duration is in the owl.carousel.css file. At line 103 you should have:
.owl-carousel .animated {
animation-duration: 1000ms;
animation-fill-mode: both; }
try changing the animation-duration of 1000ms to your desired duration.

That's the autoplayTimeout you are talking about. No need to override the css.
Change the autoplayTimeout to 1000 when you want that the next slide will happen after 1 sec.
Change the autoplaySpeed to 2000, when you want that that slide has a slide effect that takes up 2 sec.
So when setting this: the first slide take 2 sec of duration when sliding. After 1 sec, the next will slide for 2sec, and so on...

bxSlider not showing slides on resize

I'm trying to set up a function so that when the user resizes their window, the slider is emptied and then re-implemented based on the size of the window.
The problem that I have is that the slider IS being re-implemented, but with without slides.
The code I'm using is:
var newdiv = $('<div class="slider1" />');
$(window).resize(function(){
$("#featured").empty();
$("#featured").append(newdiv);
if($(window).width() > 640){
$('.slider1').bxSlider({
slideWidth: 1200,
minSlides: 4,
maxSlides: 4,
slideMargin: 10,
pager: false
});
}else if($(window).width() > 480 && $(window).width() < 640){
$('.slider1').bxSlider({
slideWidth: 800,
minSlides: 3,
maxSlides: 3,
slideMargin: 10,
pager: false
});
}else if($(window).width() < 480){
$('.slider1').bxSlider({
slideWidth: 500,
minSlides: 2,
maxSlides: 2,
slideMargin: 10,
pager: false
});
}
});
If someone can either tell me what I'm doing wrong, or show me a better way of making this work, that'd be great. Thanks!

I think you are emptying your slider content, so it will display nothing.
Instead of emptying and redefining it you can destroy an reinit the bxSlider control.
Code:
slider.destroySlider();
slider = $('.bxslider').bxSlider({
slideWidth: 500,
minSlides: 2,
maxSlides: 2,
slideMargin: 10,
pager: false
});
Demo: http://jsfiddle.net/IrvinDominin/pjWjy/
This resize can cost a bit instead of resize you can build your resize end event: JavaScript/JQuery: $(window).resize how to fire AFTER the resize is completed?

You are describing something i answered here
[collapsing bxslider when element style"display:none"
The bxslider shows the nav controls but not the slides.
The is resolved by calling slider1.reloadSlider()
The important thing to remember is you have to capture and keep a reference to your slider when you first create it.
$('.slider1').bxSlider()
can not be used to get a reference to your slider.
it will create a new slider everytime.
try assigning this to a variable and then using that variable to .append()
and .reloadSlider() as needed.
//initial creation
myslider = $('.slider1').bxSlider(options);
//then in the resize() event handler...
myslider.reloadSlider();
good luck

i might have found a strange solution for this, and would like others to confirm if it works for them.
first initialize the slider in document ready and add the resize call.
<script>
var myslide;
$(document).ready(function(){
myslide= $('.bxslider').bxSlider({
mode: 'horizontal',
captions: false,
controls : false,
pause:5000,
auto:true
});
});
$(window).resize(function(){
console.log(myslide.getCurrentSlide());
});
</script>
i resized the window and the slider continues to work, it seems that when you interact with the slider variable, it knocks it back on its feet.

Nivo Slider - Stop animation when only one image

I am using the jQuery plugin for Nivo Slider and need to find a way to stop it from transitioning when only one image exists.

Can you set the option:
manualAdvance: true
Will that help? This is the documentation for the latest NivoSlider update.
If this wont help, can you post the code you are using to enable the slider?
This will be the full code:
$(window).load(function() {
$('#slider').nivoSlider({
slices: 1, // For slice animations
startSlide: 0, // Set starting Slide (0 index)
manualAdvance: true, // Force manual transitions
captionOpacity: 0.8, // Universal caption opacity
randomStart: false, // Start on a random slide
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
});

There is probably a better way to do it but it works for me:
if($('#slider img').length == 1) {
$('#slider').nivoSlider({});
$('.nivo-controlNav').css('display', 'none');
$('.nivo-directionNav').css('display', 'none');
$('#slider').data('nivo:vars').stop = true;
} else {
$('#slider').nivoSlider({
effect: 'slideInLeft'
});
}
PS. It's important to check the number of images before initializing Nivoslider because it seems to duplicate image tags...

None of the answers quite worked for me, because I still wanted a single image to display with a caption. I ended up using slightly different options to initialise the nivoSlider depending on the number of images (my images were in a containing div with the id 'hero-images'):
var numImages = $('#hero-images img').length;
if (numImages === 0) {
//No images - hide the block
$('#hero-images').hide();
} else if (numImages === 1) {
// 1 image - disable controls and set to manual advance to prevent animation
$('#hero-images').nivoSlider({
directionNav: false,
manualAdvance: true,
controlNav: false
});
} else {
// Multiple images, set up as normal
$('#hero-images').nivoSlider({
effect: 'fade',
directionNav: false
});
}

carouFredSel: Show partial items?

I'm using carouFredSel to create a vertical carousel. Everything works great, except I would prefer if partial items would be shown at the bottom, cropped, rather than being hidden. This way it would indicate to users that there are additional items that can be scrolled.
I have been reading the documentation, but so far can't tell if what I am after is possible.
Check out the JSFiddle to see what I mean. Watch the bottom most item on the page.
Javascript
$("ul").carouFredSel({
direction: "up",
align: "top",
width: 100,
height: "100%",
items: {
visible: "variable",
width: 100,
height: "variable"
},
scroll: {
items: 1,
mousewheel: true,
easing: "swing",
duration: 500
},
auto: false,
prev: {
button: ".prev",
key: "up"
},
next: {
button: ".next",
key: "down"
}
});​

This is a bit of a hack, but it works. Set the height of the scroller (in this case, ul) to 150% and the parent element (in this case, body) to overflow: hidden. Now the bottom most element is off screen.
Javascript
$("ul").carouFredSel({
height: "150%"
});
CSS
body {
overflow: hidden;
}

Ha, caroufredsel supports it, no hacks required :))! You can achieve it with the following option:
items: {
visible: '+1'
}
EDIT: This suffers from a problem though. If number of whole visible items + 1 == number of all items, then carousel cannot be scrolled even though one image is visible just partially. You can overcome this issue by setting e.g. minimum: 1 but it is not always a way to go (e.g. if number of images is dynamic and you don't want scroll handlers to appear when there is just one or two images.).

The next not visible element in the vertical carousel is pushed down by the margin.
I'm currently overriding it by the following function:
function cropCarousel () {
var visibleElements = this.triggerHandler("currentVisible"), // show all visible
$lastElement = $(visibleElements[visibleElements.length - 1]); // get the last one
$lastElement.css('margin-bottom', '30px'); // amend the margin
};
cropCarousel.call($('#your_carousel_id'));
The downside of it that you will have to call this function on carousel init and on up and down events. But it works ;)