I want to include both vertical slide and horizontal slide using owl carousel in same page.Here is my reference code.Issue is only one slide is working,if we implement both in same file
<-----------Vertical slide------------>
<script>
jQuery(document).ready(function() {
var owl = jQuery('.owl-carousel');
owl.owlCarousel({
autoplay: true,
items: 1,
nav: true,
loop: true,
autoplayHoverPause: true,
animateOut: 'slideOutUp',
animateIn: 'slideInUp',
autoplayTimeout: 5000,
autoplayHoverPause: false,
});
});
</script>
<-----------Horizontal slide---------------------->
<script>
jQuery('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
nav: true,
navText: [
"<i class='fa fa-caret-left'></i>",
"<i class='fa fa-caret-right'></i>"
],
autoplay: true,
autoplayHoverPause: true,
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 5
}
}
})
</script>
Related
Issue:
I am trying to implement the horizontal timeline -Slick [https://codepen.io/perikan/pen/vjwXyg] but I got only one dot.
It is not meeting the functionality of implementation.
Goal:
As we click on the timeline dots the photos have to be moved in accordance with it.
Tried Code:
These are the following code I have tried.
<script type="text/javascript">
function slider_config() {
$('.slideshow').slick({
dots: true,
customPaging: function(slick,index) {
// Array conversion from the doc element
var dateList = [...document.querySelectorAll('.photo-date-info')].map(x => x.textContent);
return '<a>' + dateList[index] + '</a>';
},
infinite: false,
speed: 500,
fade: true,
cssEase: 'linear',
});
$(".loading-bar").slick({
centerMode: true,
// centerPadding: "80px",
dots: false,
infinite: false,
speed: 300,
slidesToShow: 6,
slidesToScroll: 3,
focusOnSelect: true,
asNavFor: ".labels"
});
$(".labels").slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
draggable: false,
asNavFor: ".loading-bar"
});
$('.slideshow').slickLightbox({
src: 'src',
itemSelector: 'img',
caption: 'caption',
slick: {infinite:false}
});
}
div += "></i><a href='"+photo+"' download><i class='fas fa-download' style ='float: right;padding-top: 7px;color: black;'></i></a><img style='object-fit: contain;height:400px' src='"+photo+"' data-caption='As on : "+photo_date+"'><h4>As on : <span class=\"photo-date-info\">" + photo_date + "</span></h4><h5>"+p_desc+"</h5></center><span class=\"loading-bar loading-bar-bullet\"></span></div>";
//The same CSS code as in code pen
I want to rearrange my slider in mobile version.I want slider start not with first but with thirt elemenet of slider.i wrote startSlide function on position 2 but still doesnt work plase help guys .
jQuery('.js-a1-wlan-slider').slick({
// normal options...
infinite: false,
slidesToShow: 1,
centerMode: true,
centerPadding: "26px",
focusOnSelect: false,
arrows: true,
prevArrow: '<a class="a1-wlan-slider-boxes-prev deactive"></a>',
nextArrow: '<a class="a1-wlan-slider-boxes-next"></a>',
initialSlide : 2,
dots: true,
mobileFirst: true,
responsive: [
{
breakpoint: 1023,
settings: "unslick"
}
]
});
When clicking on an image within the Slick Slider all slides are moved forward with high speed. How to get rid of that behaviour?
My JS settings:
$(document).ready(function(){
$('.sh_product_slider2').slick({
slidesToShow: 3,
slidesToScroll: 1,
arrows: true,
dots: true,
centerMode: false,
variableWidth: true,
infinite: true,
focusOnSelect: true,
cssEase: 'linear',
touchMove: false,
prevArrow:'<button class="slick-prev"> < </button>',
nextArrow:'<button class="slick-next"> > </button>',
responsive: [
{
breakpoint: 600,
settings: {
centerMode: false,
variableWidth: true,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2500,
pauseOnHover: false,
pauseOnFocus: false,
arrows:false
}
},
]
});
});
Im not sure but seems work according to your sample
just override the css class
.sh_product_slider2 .slick-slide:after {
position: relative;
}
let me know if not works,
thanks
I have 2 problem when use owl carousel2 on mobile screen size and set rtl: true and center: true.
Problem 1: last slide (slide 5 on demo) not show when drag by mouse or touch.
Problem 2: If have one slide, then slide 1 not showing.
$(document).ready(function () {
var owl = $('.owl-carousel');
owl.owlCarousel({
rtl: true,
center: false,
items: 4,
responsiveClass: true,
loop: false,
nav: false,
margin: 10,
lazyLoad: false,
autoplay: false,
autoplayTimeout: 10000,
smartSpeed: 200,
autoWidth: true,
responsive: {
0: {
items: 1,
center: true,
autoWidth: true
},
768: {
items: 2,
center: false,
autoWidth: true
},
992: {
items: 3,
center: false,
autoWidth: false
},
1200: {
items: 4,
center: false,
autoWidth: false
}
}
})
})
I create an example with js and css file from owlcarousel2.github.io with new owl carousel2 updates.
Demo problem:
https://jsfiddle.net/j7jg7ynb/6/
I am working on a slider with Owl-Carousel 2 (beta), but there is a lot that doesn't work well.
I want the owlCarousel to work like this:
It should scroll 2 items at a time, showing 2 items at a time.
So: [0,1] slide [2,3] slide [4,5]
On mobile, it should show one picture and scroll by 1 picture at a time.
owl = $('.owl-carousel')
owl.owlCarousel({
center: true,
loop: false,
margin: 20,
items: 2,
responsive: {
0: {
items: 1,
navigation: true,
nav: true
},
640: {
items: 2,
navigation: true,
nav: true
}
},
scrollPerPage: true,
navigation: true
}).css("z-index", 0)
You can use the slideBy option.
owl = $('.owl-carousel')
owl.owlCarousel({
center: true,
loop: false,
margin: 20,
items: 2,
responsive: {
0: {
items: 1,
navigation: true,
nav: true,
slideBy: 1 // <!-- HERE
},
640: {
items: 2,
navigation: true,
nav: true,
slideBy: 2 // <!-- HERE
}
},
scrollPerPage: true,
navigation: true
}).css("z-index", 0)