I having two synced OwlCarousel sliders. The goal is to achieve - group of items sliding in first main slider. Now it's sliding from 1 to 2 to 3 etc. I need it to slide from 1 to 5. Is there some values i can change in js?
https://codepen.io/washaweb/pen/KVRxRW
.owlCarousel({
items : slidesPerPage,
dots: false,
nav: false,
autoplay: false,
smartSpeed: 200,
slideSpeed : 500,
mouseDrag: false,
touchDrag: false,
pullDrag: false,
slideBy: '1', //alternatively you can slide by 1, this way the active slide will stick to the first item in the second carousel
responsiveRefreshRate : 100
And how can i change sliding animation? For example fadein
You could try to.owl.carousel event:
var jumpTo = 5;
$('#sync2').trigger('to.owl.carousel', jumpTo);
Carousel #sync2 jumps to slide number 5. You can trigger this by other owl events or by clicks.
Related
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.
I have a needed that I've not been able to develop.
I'm using slick to show 3 slides, but only the center one shows all the information. I need an infinite slider in order to get all the slides being at the center.
The problem is when the slides are only 3, because it stops. I would need to force the slider clonning the slides as if i had 4 or more slides...
$('.center').slick({
centerMode: true,
centerPadding: '0px',
slidesToShow: 3,
slidesToScroll: 1,
dots: false,
focusOnSelect: true,
adaptiveHeight: true
});
Here I leave you an example with slides enough: https://jsfiddle.net/f580ys4b/1/
And here an example with only 3 slides: https://jsfiddle.net/f580ys4b/2/
Before initiating Slick, check if the number of slide items is larger than slidesToShow. In case it is not, duplicate the children until there are more slide items than slides to show. Can easily be done with jQuery.
var slideCount = jQuery(".slide").length;
if (slideCount <= 3) {
// clone element
jQuery(".center.slider").children().clone(true, true).appendTo(".center.slider");
}
jQuery('.center').slick({
arrows: false,
centerMode: true,
centerPadding: '0px',
slidesToShow: 3,
slidesToScroll: 1,
dots: false,
focusOnSelect: true,
adaptiveHeight: true
});
My solution based on Rohan answer:
In my case I have a slider with filters, when the filtered elements are the same as the elements to be displayed, the infinite dont working. When I reset the slider when filtering I compare the filtered elements with those that should be displayed and if they are equal I duplicate the elements.
$('.slider-productos').on('reInit', function(event, slick, currentSlide, nextSlide) {
// total sliders number - get option slidesToShow number
// ^ ^
if (slick.slideCount === slick.options.slidesToShow) {
// you can clone on slider or all, it depends on how many slider you want to show
//var toClone = $(".slider-productos .slick-track").children('.slick-slide:nth-of-type(2)');
var toClone1 = $(".slider-productos .slick-track").children('.slick-slide:nth-of-type(1)');
var toClone2 = $(".slider-productos .slick-track").children('.slick-slide:nth-of-type(2)');
var toClone3 = $(".slider-productos .slick-track").children('.slick-slide:nth-of-type(3)');
toClone1.clone().appendTo(".slider-productos .slick-track");
toClone2.clone().appendTo(".slider-productos .slick-track");
toClone3.clone().appendTo(".slider-productos .slick-track");
// Set any option only for refresh slider refresh true
// ^ ^
$('.slider-productos').slick('slickSetOption', 'infinite', true, true);
}
});
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...
I want to add paging control of each slide in this website background slideshow.
Flexslider is used here. The javascript for the slider will be available in main.js.
I have added the code below to enable the paging control but nothing is showing up.
jQuery('.flexslider').flexslider({
// Primary Controls
controlNav: true, //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
directionNav: true, //Boolean: Create navigation for previous/next navigation? (true/false)
prevText: "Previous", //String: Set the text for the "previous" directionNav item
nextText: "Next", //String: Set the text for the "next" directionNav item
animationLoop: true,
slideshow: false,
smoothHeight: true,
animation: "none",
});
Supersized in main.js:
if (typeof pt_supersized_slides !== "undefined")
{
jQuery.supersized({
slide_interval : 100000, // Length between transitions
transition : 1, // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed : 500, // Speed of transition
slide_links : 0, // Individual links for each slide (Options: false, 'number', 'name', 'blank')
slides : pt_supersized_slides
});
}
Thanks in advance.
The id of the slider on your website is "supersized" not "flexslider" and I don't see any class name of "flexslider" in your source code.
I have two sliders on a page. Called with the same set of times and settings. One slider is a image slider, the other a sort of caption for it. Both in drastically different areas of the html.
bxslider is creating a play/pause for each slideshow, but I want some way of having one button that pauses all slideshows on the current page. This is because the slideshows are relative to each other and must keep a:
Slider A - Slide 1 / Slider B - Slide 1
Slider A - Slide 2 / Slider B - Slide 2
Slider A - Slide 3 / Slider B - Slide 3
etc.
Right now, when I pause one slideshow, the other continues and when the play is pressed, they are no longer in sync.
.bxslider & .bxslider-content are both my bxslider classes.
Thanks!
<script type="text/javascript">
$(document).ready(function () {
$('.bxslider, .bxslider-content').bxSlider({
mode: 'fade',
auto: true,
ease: 'cubic-bezier(0.42,0,0.58,1)',
pager: false,
controls: false,
autoControlsCombine: true,
autoControls: true,
pause: 8000,
speed: 800
});
});
</script>
Try
var slider=$('.bxslider').bxSlider({
//code here
});
var slider1=$('.bxslider-content').bxSlider({
//code here
});
$(document).on('click','.pause',function(){
slider.stopAuto();
slider1.stopAuto();
});
$(document).on('click','.play',function(){
slider.startAuto();
slider1.startAuto();
});
Fiddle http://jsfiddle.net/CDvmk/