一款不错的slider插件，需要jq支持

效果如图。，可以自定自定义速度、移动方向等，

实现的直接html标签内定义属性。

html代码如下

插件来源可以直接百度flexslider即可找到。

在引入jq和插件还有css后可以直接解析去运行。代码如下

function mk_flexslider_init() {


        $('.mk-flexslider.mk-script-call').each(function() {

            if ($(this).parents('.mk-tabs').length || $(this).parents('.mk-accordion').length) {
                $(this).removeData("flexslider");
            }


            var $this = $(this),
                $selector = $this.attr('data-selector'),
                $animation = $this.attr('data-animation'),
                $easing = $this.attr('data-easing'),
                $direction = $this.attr('data-direction'),
                $smoothHeight = $this.attr('data-smoothHeight') == "true" ? true : false,
                $slideshowSpeed = $this.attr('data-slideshowSpeed'),
                $animationSpeed = $this.attr('data-animationSpeed'),
                $controlNav = $this.attr('data-controlNav') == "true" ? true : false,
                $directionNav = $this.attr('data-directionNav') == "true" ? true : false,
                $pauseOnHover = $this.attr('data-pauseOnHover') == "true" ? true : false,
                $isCarousel = $this.attr('data-isCarousel') == "true" ? true : false;

            if ($selector != undefined) {
                var $selector_class = $selector;
            } else {
                var $selector_class = ".mk-flex-slides > li";
            }

            if ($isCarousel == true) {
                var $itemWidth = parseInt($this.attr('data-itemWidth')),
                    $itemMargin = parseInt($this.attr('data-itemMargin')),
                    $minItems = parseInt($this.attr('data-minItems')),
                    $maxItems = parseInt($this.attr('data-maxItems')),
                    $move = parseInt($this.attr('data-move'));
            } else {
                var $itemWidth = $itemMargin = $minItems = $maxItems = $move = 0;
            }

            $this.flexslider({
                selector: $selector_class,
                animation: $animation,
                easing: $easing,
                direction: $direction,
                smoothHeight: $smoothHeight,
                slideshow: true,
                slideshowSpeed: $slideshowSpeed,
                animationSpeed: $animationSpeed,
                controlNav: $controlNav,
                directionNav: $directionNav,
                pauseOnHover: $pauseOnHover,
                prevText: "",
                nextText: "",

                itemWidth: $itemWidth,
                itemMargin: $itemMargin,
                minItems: $minItems,
                maxItems: $maxItems,
                move: $move,
            });

        });

    }

这里源码想共享出来。但发现离线编辑器发不了源码。需要源码的可以加我微信。

一款不错的slider插件，需要jq支持

公众号

归档