使用相同的选择器来查询lightGallery + smoothdivscroll，

Question

I would like to use smoothdivscroll ( http://smoothdivscroll.com/index.html ) for a scrolling block of images which users can open using the http://sachinchoolur.github.io/lightGallery/index.html lightbox. Unfortunately these scripts do not function when using the same selector.

<script type="text/javascript">

 if (Modernizr.touch) {   
    $(".scroll-banner").smoothDivScroll({ 
        hotSpotScrolling: false,
        touchScrolling: true,
        manualContinuousScrolling: true,
        mousewheelScrolling: false
    });
} else {   
$(".scroll-banner").smoothDivScroll({ 
        mousewheelScrolling: "horizontal",
        mousewheelScrollingStep: -1,
        easingAfterMouseWheelScrollingFunction: "easeOutCirc",
        manualContinuousScrolling: true,
        autoScrollingMode: "onStart",
        scrollingHotSpotLeftClass: "prev",
        scrollingHotSpotLeftVisibleClass: "prevVisible",
        scrollingHotSpotRightClass: "next",
        scrollingHotSpotRightVisibleClass: "nextVisible",
});
}
$(function() {
$(".scroll-banner").lightGallery({
      loop:true,
      auto:false,
      pause:1000,
      counter:true,
      vimeoColor: "000000"
    });
});
</script>

How do I get two plugins to use the same selector?

Answer 1

is it possible to use it this way:

$(document).ready(function() {
    var scrollbanner = $(".scroll-banner");
    scrollbanner.smoothDivScroll({ 
        mousewheelScrolling: "horizontal",
        mousewheelScrollingStep: -1,
        easingAfterMouseWheelScrollingFunction: "easeOutCirc",
        manualContinuousScrolling: true,
        autoScrollingMode: "onStart",
        scrollingHotSpotLeftClass: "prev",
        scrollingHotSpotLeftVisibleClass: "prevVisible",
        scrollingHotSpotRightClass: "next",
        scrollingHotSpotRightVisibleClass: "nextVisible",
    });

    scrollbanner.lightGallery({
        loop:true,
        auto:false,
        pause:1000,
        counter:true,
        vimeoColor: "000000"
    });
});

In your code one of the functions is called when DOM is ready and the other is not. Does the behaviour/error change when changing the order of execution for adding the functionality to the divs?