Rectangle 27 5

Thanks a lot man...i was using 1.3.2 version of OWL. It works properly now.

javascript - Owl Carousel Will Not Autoplay - Stack Overflow

javascript jquery wordpress carousel owl-carousel
Rectangle 27 5

Thanks a lot man...i was using 1.3.2 version of OWL. It works properly now.

javascript - Owl Carousel Will Not Autoplay - Stack Overflow

javascript jquery wordpress carousel owl-carousel
Rectangle 27 3

I had the same issue with Owl Carousel 2, My solution - with the native navigation buttons, after calling the slider:

var elm = '.slider'; //your slider class
             function toggleArrows(){ 
                if($(elm).find(".owl-item").last().hasClass('active') && 
                   $(elm).find(".owl-item.active").index() == $(elm).find(".owl-item").first().index()){                       
                    $(elm).find('.owl-nav .owl-next').addClass("off");
                    $(elm).find('.owl-nav .owl-prev').addClass("off"); 
                }
                //disable next
                else if($(elm).find(".owl-item").last().hasClass('active')){
                    $(elm).find('.owl-nav .owl-next').addClass("off");
                    $(elm).find('.owl-nav .owl-prev').removeClass("off"); 
                }
                //disable previus
                else if($(elm).find(".owl-item.active").index() == $(elm).find(".owl-item").first().index()) {
                    $(elm).find('.owl-nav .owl-next').removeClass("off"); 
                    $(elm).find('.owl-nav .owl-prev').addClass("off");
                }
                else{
                    $(elm).find('.owl-nav .owl-next,.owl-nav .owl-prev').removeClass("off");  
                }
            }

            //turn off buttons if last or first - after change
            $(elm).on('initialized.owl.carousel', function (event) {
                toggleArrows();
            });
             $(elm).on('translated.owl.carousel', function (event) { toggleArrows(); });

As for the css - give the class "off" the properties you want for disabled button.

thank you! Solution i've been looking for! Works like a charm with owlslider2.

javascript - Owl Carousel, navigation disabled after reaching first/la...

javascript jquery css owl-carousel
Rectangle 27 2

So, yes there were some conflict issues in your code.

<script type="text/javascript" src="http://mobile.best0709.cafe24.com/ind-script/optimizer.php?filename=2989881215a2d3fbb5b7fc82d14d65358165348d_1411447623&type=js&"></script>

Above file causes the conflict. If you remove this file, your code works fine.

If you include this file, the code doesn't work:

Thank you very much @K K. But this script is generated by the cms.

Thank you very much @K K for helping me! Good Job!

javascript - owl carousel - not working online - Stack Overflow

javascript jquery html owl-carousel
Rectangle 27 2

Well, In your code owl = $('.owl-carousel') is grabbing all the nodes with class owl-carousel. Thus when mousewheel event happens, causes scrolling of all the slides. So you need to give reference to the currently focused slider and trigger events only of that slider. Hope this fixes your issue. jsfiddle

javascript - Owl Carousel 2 mousewheel slider - Stack Overflow

javascript jquery owl-carousel-2
Rectangle 27 2

.owl-carousel .owl-wrapper-outer{
    overflow: hidden;
    position: relative;
    width: 100%;
    z-index: 1;  // added this
}

Please add the above code in your css file , and see that the class are define in html code ...

This works fine with me ....

javascript - owl carousel: flickering on tablet view - Stack Overflow

javascript jquery html owl-carousel
Rectangle 27 48

Yes, its a typing error.

The autoplay-plugin code defines the variable as "autoPlay".

I was having this issue until I saw your post. I had set "autoPlay", but actually changing it to "autoplay" made it work for me. Weird.

thanks, even on their own page its typing as lower case.

Thank you very much. Have to say though that the official doc states it with lowercase, so it might depend on the OwlCarousel version you are using.

The version does matter. Owl Carousel 2 uses "autoplay". Older version uses "autoPlay". Also worth noting, in version 2 you must use "autoplayTimeout" to set the speed of the autoplay features. In older versions, this was actually set by the "autoPlay" option.

javascript - Owl Carousel Won't Autoplay - Stack Overflow

javascript html owl-carousel
Rectangle 27 48

Yes, its a typing error.

The autoplay-plugin code defines the variable as "autoPlay".

I was having this issue until I saw your post. I had set "autoPlay", but actually changing it to "autoplay" made it work for me. Weird.

thanks, even on their own page its typing as lower case.

Thank you very much. Have to say though that the official doc states it with lowercase, so it might depend on the OwlCarousel version you are using.

The version does matter. Owl Carousel 2 uses "autoplay". Older version uses "autoPlay". Also worth noting, in version 2 you must use "autoplayTimeout" to set the speed of the autoplay features. In older versions, this was actually set by the "autoPlay" option.

javascript - Owl Carousel Won't Autoplay - Stack Overflow

javascript html owl-carousel
Rectangle 27 1

If anybody came accross the same issue, the solution I came up with is below:

// Lazy load for videos
var modalSlider = $('.owl-carousel');

modalSlider.on('changed.owl.carousel', function(event) {
  var current = event.item.index;
  var currentVideo = $(event.target).find('.owl-item').eq(current).find('video');
  var currentVideoSource = currentVideo.find('source');

  // Pause all videos
  var videos = modalSlider.find('video');

  if ( videos.length ) {
    videos.each(function() {
      $(this)[0].pause();
    });
  }

  // Play if video found
  if ( currentVideo.length ) {
    var currentVideoSrc = currentVideoSource.attr('data-src');
    currentVideoSource.attr('src', currentVideoSrc);
    currentVideo[0].load();
    currentVideo[0].play();
  }
});

javascript - Owl carousel 2: Lazy load for videos - Stack Overflow

javascript jquery html5 owl-carousel-2
Rectangle 27 16

You are may be on the wrong owl's doc version.

autoPlay is for 1st version

autoplay is for 2nd version

Link only answers are not a good practice. please add then in comments and not as answers..

Consider removing first link as it is no longer linking to desired place. Github for v 1: github.com/OwlFonk/OwlCarousel

javascript - Owl Carousel Won't Autoplay - Stack Overflow

javascript html owl-carousel
Rectangle 27 14

You are may be on the wrong owl's doc version.

autoPlay is for 1st version

autoplay is for 2nd version

Link only answers are not a good practice. please add then in comments and not as answers..

Consider removing first link as it is no longer linking to desired place. Github for v 1: github.com/OwlFonk/OwlCarousel

javascript - Owl Carousel Won't Autoplay - Stack Overflow

javascript html owl-carousel
Rectangle 27 1

{{ 'jquery-1.9.1.min.js' | asset_url | script_tag }}
{{ 'owl.carousel.js' | asset_url | script_tag }}

It seems to be an issue with the jQuery. When I load two versions of jQuery, {{ 'jquery-1.10.2.min.js' | asset_url | script_tag }} and {{ 'jquery-1.9.1.min.js' | asset_url | script_tag }} I can see the images stacked. Removing one or the other, removes the images.

@Alan You're probably seeing the images stacked because you're breaking the JS and seeing the default css. That wouldn't mean you were on the right track.

@ClaytonLeis As always I appreciate any input people are willing to give me but you're wrong. The CSS hides the images by default, seeing them means that the JS was kicking over and removing that style as it should. I have since fixed the problem if you read my comments above. Still don't know why I need both versions of jQuery but it may be some compatibility issue.

This is does not work me, this page has partially helped, instead of $(document).ready(function() { wouild you chage it to this: jQuery(document).ready(function() {... or this $jQuery(document).ready(function() {...

jquery - Owl Carousel: Javascript won't load. Shopify Issue or Code Is...

javascript jquery css shopify owl-carousel
Rectangle 27 1

You're having a problem with jQuery.noConflict(). You're calling it, then trying to run:

$(document).ready(function() {
  $("#heroSlider").owlCarousel({
    // ...
  });  
});

Later, you're restoring $ with $ = jQuery;, but it's too late.

jQuery(document).ready(function() {...

This would make sense, thank you! I've made the changes you've introduced and while it was working before I know this is better practice.

jquery - Owl Carousel: Javascript won't load. Shopify Issue or Code Is...

javascript jquery css shopify owl-carousel
Rectangle 27 10

Changing autoplay to autoPlay alone did not work for me. What did the trick was to add autoplaySpeed and autoplayTimeout properties and set them to the same value, like this:

$(document).ready(function(){
    var owl = $(".owl-carousel");
    owl.owlCarousel({
        items: 1,
        autoplay: true,
        autoPlaySpeed: 5000,
        autoPlayTimeout: 5000
        autoplayHoverPause: true
    });
});

Here's a working demo: JS Bin

I can confirm this is working with the latest version !

javascript - Owl Carousel Won't Autoplay - Stack Overflow

javascript html owl-carousel
Rectangle 27 10

Changing autoplay to autoPlay alone did not work for me. What did the trick was to add autoplaySpeed and autoplayTimeout properties and set them to the same value, like this:

$(document).ready(function(){
    var owl = $(".owl-carousel");
    owl.owlCarousel({
        items: 1,
        autoplay: true,
        autoPlaySpeed: 5000,
        autoPlayTimeout: 5000
        autoplayHoverPause: true
    });
});

Here's a working demo: JS Bin

I can confirm this is working with the latest version !

javascript - Owl Carousel Won't Autoplay - Stack Overflow

javascript html owl-carousel
Rectangle 27 7

You have to use the new onInitialize callback, like this:

var owl = $('.owl-carousel');
owl.owlCarousel({
    onInitialize : function(element){
        owl.children().sort(function(){
            return Math.round(Math.random()) - 0.5;
        }).each(function(){
            $(this).appendTo(owl);
        });
    },
});

Find more information in the 2.x docs.

javascript - Owl Carousel 2 random function - Stack Overflow

javascript jquery carousel owl-carousel
Rectangle 27 7

You have to use the new onInitialize callback, like this:

var owl = $('.owl-carousel');
owl.owlCarousel({
    onInitialize : function(element){
        owl.children().sort(function(){
            return Math.round(Math.random()) - 0.5;
        }).each(function(){
            $(this).appendTo(owl);
        });
    },
});

Find more information in the 2.x docs.

javascript - Owl Carousel 2 random function - Stack Overflow

javascript jquery carousel owl-carousel
Rectangle 27 2

I would not move the .owl-buttons (wrapper), leave that where is and apply the positioning to the inner div elements/the actual buttons.

.product-view #owl-product-image-thumbs.owl-theme .owl-controls .owl-buttons div { position: absolute; calc(50% - 15px); }

javascript - OWL Carousel owl-buttons issue - Stack Overflow

javascript jquery css owl-carousel owl-carousel-2
Rectangle 27 17

owl.data('owlCarousel').reinit({
     touchDrag  : true,
     mouseDrag  : true
 });

Code works. I found that reinit() will reset the slider to the first slide.

javascript - Owl carousel V1 disable/enable drag - Stack Overflow

javascript jquery drag-and-drop jquery-ui-draggable owl-carousel