jQuery owl2 remove navigation arrow when there is no item to loop - javascript

I have the following carousel
I want to disappear the one of the navigation arrows when there are no items on their left/right sides.In screenshot exampe above if i try to use the left arrow it's not looping, because there are no images on the left side, so the arrow should not appear.
Here are the settings i'm currently using
Navigation.Defaults = {
nav: false,
navRewind: false,
navText: [ 'prev', 'next' ],
navSpeed: false,
navElement: 'div',
navContainer: false,
navContainerClass: 'owl2-nav',
navClass: [ 'owl2-prev', 'owl2-next' ],
slideBy: 3,
dotClass: 'owl2-dot',
dotsClass: 'owl2-dots',
dots: true,
dotsEach: false,
dotData: false,
dotsSpeed: false,
dotsContainer: false,
controlsClass: 'owl2-controls',
loop: false,
};

Try with the css like below.
.owl-nav .owl-prev.disabled,
.owl-nav .owl-next.disabled {
display: none !important;
}
Or you can do that with js from this answer https://stackoverflow.com/a/28027976/9695286

Related

Display none div shows white spaces in slick slider

I have two problems in the slider. I need to hide and show images based on selection of color selection by client i.e if user select red color all corresponding red images would if white than all corresponding white images would show based on selection.
Now the first problem is in the above image in the slider white space shows of the display none elements even if the red selections show
Thumbnail slider also shows white spaces and the position of the thumbnail also changes.
Here are the javascripts of slick slider
function slideProductDetail() {
$('.js_prod_main').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
dot: false,
fade: false,
infinite: false,
asNavFor: '.js_prod_sub'
});
$('.js_prod_sub').slick({
slidesToShow: 5,
slidesToScroll: 1,
//asNavFor: '.js_prod_main',
dots: false,
arrows: false,
infinite: false,
vertical: true,
verticalSwiping: true,
focusOnSelect: true,
responsive: [
{
breakpoint: 1200,
settings: {
vertical: true,
infinite: false,
}
},
{
breakpoint: 768,
settings: {
vertical: true,
infinite: false,
}
},
{
breakpoint: 575,
settings: {
vertical: false,
infinite: false,
}
}
]
});
}
I have all images set of images(both white and red images) in shopify if the user select color red set of red colour images would show in slider and white then only white colour. The images of display none div shows white empty spaces

Both Vertical slide and Horizontal slide using Owl Carousel

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>

Vertical Slick carousal not showing last slider completely in responsive devices

I have an issue with vertical slick slider in responsive. I am not able to see last slider completely, it showing half slider on some devices, like iphone5,6,7.. etc.
jQuery('.slick-carousel').slick({
vertical: true,
verticalSwiping: true,
slidesToShow: 2,
slidesToScroll: 1,
infinite: false,
customDots: false,
centerMode: false,
dots: false,
centerPadding: '0px',
responsive: [{
breakpoint: 481,
settings: {
customDots: true
}
}]
});
I want to show complete slider on scroll in responsive.

owl carousel ignoring options when called in function

i have following code:
$(".owl-carousel").owlCarousel({
autoplay: false,
center: true,
loop: true,
nav: false,
dots: false,
items: 1,
stagePadding: 140,
callbacks: true
});
}
which works fine - as expected. But when i try to do something like this:
var onResize = function() {
$(".owl-carousel").owlCarousel({
autoplay: false,
center: true,
loop: true,
nav: false,
dots: false,
items: 1,
stagePadding: 140,
});
}
$(window).resize(function() {
onResize();
});
then it just ignores the options. Dots are visible etc. Everything looks like it is with default options. Can somebody please help me with this?
Thanks
The resize function isn’t better! Besides, it makes no difference to your load to use media queries to show or hide. You should try it. Keep it simple.

How to stop infinite slider on thumbnail image?

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"
};

Categories

Resources