carousel / 배너 플러그인 > jquery

• 목록

carousel / 배너 플러그인

https://owlcarousel2.github.io/OwlCarousel2/

<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">

<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>


            smartSpeed:450,

            dotsContainer: ".main-owl-custom-dots",

            onChanged: function (event) {
                index = event.item.index;
                if (index == null) index = 1;
                else if (is_chk == "next") index = index - 1;

                //$("#choice_index").html( is_chk + "::" + index );
                func_dots(index-1);
            }
        });

        function func_dots( choice_index ) {
            $(".main-owl-custom-dots div").removeClass("active");
            $(".main-owl-custom-dots div").eq(choice_index).addClass("active");
        }

        // Custom Navigation Events
        //$(document).on("click", ".carousel-custom-dots ", function(e){
        $(".main-owl-custom-dots div").click(function (e) {
            e.preventDefault();
            owl.trigger('to.owl.carousel', [$(this).index(), 300]);
            func_dots( $(this).index() );
        });

        $(".owl-nav .owl-prev").click(function () {
            is_chk = "prev";
            $(".owl-carousel").trigger("prev.owl.carousel");
        });

        $(".owl-nav .owl-next").click(function () {
            is_chk = "next";
            $(".owl-carousel").trigger("next.owl.carousel");
        });
    });
</script>