Full width home advertisement

Post Page Advertisement [Top]

Hello World, Today I am going to show you how to show single owl carousel item into the owl slider. It usually happens while we using owl carousel with the single slide, it stops working due to loop attribute in the owl. Check by removing loop attribute it will show you slider but we want an efficient way for the owl. Let's have a look towards the solution.

Case: I am a developer so at the time of developing I faced an issue when I add only single Item into the Owl Carousel slider at the time of data entry after dynamic mechanism. I have the best solution for this issue please check and provide your reviews.

Single owl carousel item in slider example with the solution:




var slider = $("#owl-example");

var is_image_length = slider.find('img').length;

slider.owlCarousel({
loop: (is_image_length > 1),
autoplay: true,
nav: (is_image_length > 1),
navText: ["<i class='icon icon-chevron-left'></i>", "<i class='icon icon-chevron-right'></i>"],
margin: 50,
responsive: {
0: {
     items: 1
   },
   480: {
     items: 2
   },
   900: {
     items: 3
   },
   1000: {
     items: 4
   }
  }
});




ADDITIONAL READING ON KRAZZYCODES
  1. ERROR: Cookies are blocked or not supported by your browser
  2. How to remove custom post type taxonomy base from URL in WordPress?
  3. How to download YouTube video easily?
  4. "Sorry, your session has expired. Return to homepage" - WordPress WooCommerce error
  5. How to resize google reCaptcha?


Explanation & Solution :

  • var slider = $("#owl-example");
    Here, we assigning owl carousel to the "slider" variable.

  • var is_image_length = slider.find('img').length; or  var is_image_length = slider.find('item').length;
    Here, we assigning image length to the variable "is_image_length". It used to check how many images slider have. So on basis of number of image or item we can print true of false.
    NOTE: If you are not using images into the slider than please use this code var is_image_length = slider.find('item').length;

  • (is_image_length > 1)
    Here, We check that does owl slider have image or item more than one then returns true otherwise false.

How to show single owl item

If you still facing issues, then let me know via comment.
Don't be too selfish please do like, comment or share it.
Thank you for reading this post.

No comments:

Post a Comment

Bottom Ad [Post Page]