Hide custom navigation buttons if carousel has less items to show - Owl Carousel

I am using owl carousal on one of the pages and i am using following script from theme unify http://htmlstream.com/preview/unify-v1.7/shortcode_carousels.html

I want to hide the navigation buttons when carousel has less items to show even in responsive mode something similar to what has been done in this example http://codepen.io/OwlFonk/pen/qhgjb?editors=101, in this codepen example button hide based on items visible in different screen sizes.

I tried to implement same to the carousal but it is not working for me

fiddle http://codepen.io/anon/pen/gpYKvq

//Owl Slider v1 var owl = jQuery(".owl-slider").owlCarousel({ itemsDesktop : [1000,5], itemsDesktopSmall : [900,4], itemsTablet: [600,3], itemsMobile : [479,2], }); jQuery(".next-v1").click(function(){ owl.trigger('owl.next'); }) jQuery(".prev-v1").click(function(){ owl.trigger('owl.prev'); })

-------------Problems Reply------------

you can simply check the number of Divs by using

$(document).ready(function () {
var carousel = $("#owl-demo");
if($("#owl-demo div").length + 1 > 5){
carousel.owlCarousel({
navigation:true,
navigationText: [
"<i class='icon-chevron-left icon-white'><</i>",
"<i class='icon-chevron-right icon-white'>></i>"
],
});
}

});

this check if more than 5 divs run owlCarousel and for responsive mode you need to check for $(window).width(); for example

if($(window).width() > 800 && $(window).width() < 1400){ // for desktop
if($("#owl-demo div").length + 1 > 5){
// run carousel....
}
}else if($(window).width() > 600 && $(window).width() < 800){ // for Tab
if($("#owl-demo div").length + 1 > 4){ // change it as your screen size
// run carousel....
}
}

and so on

Category:javascript Views:2 Time:2018-02-13

Related post

  • How to hide the navigation buttons in openoffice writer 2012-04-26

    Openoffice writer has a set of navigation buttons (up, select, down) shown below the vertical scrollbar. I wish to remove this as my app is kiosk software. I only wish to remove the navigation buttons, not the scrollbar. I'm trying to remove/hide the

  • Custom Navigation Buttons Error 2014-11-03

    I'm sure there has been much written on this subject and I have found some examples on the web. I've created the buttons for my custom navigation buttons and I've created a label that displays the current record number and the number of records. When

  • Custom navigation button resizing problems when changing orientation (iPhone) 2011-05-25

    I am creating a custom navigation button (as below) and all is going well except for one thing... UIButton* btn = [UIButton buttonWithType:UIButtonTypeRoundedRect]; btn.bounds = CGRectMake(0,0,40,40); btn.autoresizingMask = UIViewAutoresizingFlexible

  • Distorted custom Navigation buttons on non-retina display (using stretchable image method) 2012-01-09

    I am adding custom navigation buttons to my navigation bars via the following code. //Instance method in CustomNavButton Class -(UIButton*)setupButtonWithImage:(UIImage*)image andFrame:(CGRect)frame { UIButton *button = [[[UIButton alloc]initWithFram

  • MFMailComposeViewController custom navigation buttons? 2011-07-06

    What is the best way to use custom background images for the "cancel" and "send" buttons (barbuttonitems) in MFMailComposeViewController? A/N: I know about the note on Apple's website about not changing interfact, but I need to do this for consistenc

  • Creating a custom control that is a Button that also has a Items and ItemsSource? 2009-06-17

    I'm trying to create a SplitButton control that uses a ContextMenu to display its items. The SplitButton is currently deriving from Button. I have a PART_DropDownInitiator that is the little icon the user clicks on to bring up the ContextMenu for the

  • Android Alert Dialog - how to hide the OK button after it being pressed 2010-11-27

    I have been developing an Android app. I would like to hide the OK button after the user presses it, as the dialog window will stay at the foreground for some seconds while a computation takes place. This is the code: new AlertDialog.Builder(this) .s

  • How to hide default navigation bar button and add custom button in it? 2011-03-17

    I have one navigation based application in which i want to hide the default navigation which is display at left side and i want to add my own custom button.I have written following 2 code. code sample 1: - (void)viewDidLoad { appDelegate=[(FoodAppDel

  • jQuery custom slider show or hide navigation buttons 2011-11-29

    I have built a custom jQuery slider (I know about Cycle etc but want to use a custom one). It allows a user to navigate a slider using both a pager and next and previous buttons which I have managed to get working. However because my slider does not

  • Customized navigation bar hides buttons 2011-05-06

    Hope you can help with this one too... I wanted to customize my navigation bar by adding custom background picture. I found out perfect but a bit complicated method called:NavigationSwizzle. In previous project I worked without any serious problems,

  • Customizing navigation bar and its buttons 2011-05-23

    Hey I have made a background in adobe photoshop which I would like to use on my UINavigationBar, but there doesn't seem to be any pre made way to do so. I have looked to some articles regarding that, but most of them seemed a bit confusing and some l

  • iOS: Positioning navigation bar buttons within custom navigation bar 2011-05-29

    I'm building an app with a custom navigation bar. After some research I decided to do this using a category on UINavigationBar. The navigation bar needs to be a bit larger than usual to accomodate a drop shadow. Here is the code: #import "UINavigatio

  • Add a custom back button to Navigation Bar using MonoTouch 2011-07-02

    Just want to confirm this, as I'm trying to learn monoTouch alone.. I have a view which I navigate to using NavigationController.PushViewToController(). On the destination view, I have a Navigation Bar. I can add a button to the bar and use code to p

  • YUI Carousel custom navigation 2012-03-19

    Javascript Code YAHOO.util.Event.onDOMReady(function (ev) { var carousel = new YAHOO.widget.Carousel("container", {isCircular: true, numVisible:1}); console.log(carousel.set('navigation', {prev: document.getElementById('prev'), next: document.getElem

  • Customized navigation bar buttons freezing after stand by 2012-04-17

    I am having a strange problem.I have used customized navigation bar(for which I have used another ViewController separately) in my project which has ofcourse navigation buttons. As the device becomes active after stand by,it normally becomes active i

  • custom Back Button image on the Navigation Bar doesn't Work ! [iPhone SDK] 2010-01-04

    Hi guys i create a custom navigation back button , but when i add this code , my back animation doesn't work and go back with animation .why ? i think it depends on my @selector action ! - (void)viewDidLoad { UIButton *button = [UIButton buttonWithTy

  • iphone custom navigation bar edit button 2010-05-13

    I use custom image for my navigation bar buttons using the following code, that allows me to make custom add button. I want to be able to do the same for the edit button item. UIImage *image=[UIImage imageNamed:@"Plus.png"]; UIButton *button = [UIBut

  • iPhone custom navigation bar with button doesnt click 2010-09-10

    Ive got an iPhone/iPad universal application and I wanted to have a custom navigation bar where the top half of the nav bar contained our companies logos, and the bottom half was the standard navigation bar. I figured out how to do this, showing in t

  • Setting Bar Button Item color in a custom navigation bar 2010-12-23

    I created a custom navigation bar and a right navigation button using the XIB. This works fine. But I need to to customize the tint color of the right navigation button. At the moment this tint color is the same color as tint color of navigation bar.

  • Back button shows half on custom navigation bar iPad 2011-11-14

    The back button on custom navigation bar shows half on iPad, it shows properly on iPhone. app supports only portrait mode. source code, UIButton *backButton = [UIButton buttonWithType:UIButtonTypeCustom]; if (isPad) { backButton.frame = CGRectMake(0,

  • 8.1 - Cannot Hide Custom Made Libraries in Navigation Pane 2012-02-18

    Since I upgraded to 8.1 (x64), I am unable to hide custom made libraries in the navigation pane. The default libraries can be hidden/shown. Does a custom library have a registry entry? I'm sure its visibility is controlled by a simple value. No, I do

  • hide div if container div has less charecter 2013-01-31

    I am doing this to develop a read more. How do I hide the read more if the #pdpTab4 has less than 540 charecters to begin with. <script> $(function(){ var myDiv = $('#pdpTab4'); myDiv.html(myDiv.html().substring(0,540)); $('#pdpTab4').append('

  • hide address bar, retain the navigation button 2013-02-26

    We would like to hide the address bar but retain the navigation button back and forward. Is it possible? System config OS: Windows XP I.E. version 7 --------------Solutions------------- Hi mmislcsd’s, Welcome to Microsoft Answers Forum! Based on my r

  • Custom navigation bar back button with only image 2013-07-03

    I want to show custom navigation bar back button. I want to show only image on it. I want to use this button in whole app also dont want to create this button in each file. How can i?? Here is my code: // Set the custom back button UIImage *buttonIma

Copyright (C) dskims.com, All Rights Reserved.

processed in 0.190 (s). 11 q(s)