革命滑块子弹出现重叠

时间:2016-09-22 10:04:09

标签: javascript jquery css revolution-slider

我尝试使用旋转滑块js在中心 - 底部位置设置一个简单的项目符号列表滑块。这是我的旋转滑块设置:



<script type="text/javascript">
            var tpj=jQuery;

            var revapi2;
            tpj(document).ready(function() {
                if(tpj("#rev_slider_2_1").revolution == undefined){
                    revslider_showDoubleJqueryError("#rev_slider_2_1");
                }else{
                    revapi2 = tpj("#rev_slider_2_1").show().revolution({
                        sliderType:"carousel",
                        jsFileLocation:"/libs/revolutionSlider/js/",
                        dottedOverlay:"none",
                         sliderLayout: "auto",
                        delay:9000,
                        navigation: {
                            keyboardNavigation:"off",
                            keyboard_direction: "horizontal",
                            mouseScrollNavigation:"off",
                            onHoverStop:"off",
                            arrows: {
                                style:"",
                                enable:true,
                                hide_onmobile:false,
                                hide_under:300,
                                hide_onleave:true,
                                hide_delay:200,
                                hide_delay_mobile:1200,
                                tmp:'',
                                left: {
                                    h_align:"left",
                                    v_align:"center",
                                    h_offset:30,
                                    v_offset:0
                                },
                                right: {
                                    h_align:"right",
                                    v_align:"center",
                                    h_offset:30,
                                    v_offset:0
                                }
                            }
                            ,
                            bullets: {
                                enable: true,
                                hide_onmobile: false,
                                style: "hesperiden",
                                hide_onleave: false,
                                direction: "horizontal",
                                h_align: "center",
                                v_align: "bottom",
                                h_offset: 20,
                                v_offset: 2,
                                space: 5,
                                tmp: ''
                            }
                        },
                        carousel: {
                            horizontal_align: "center",
                            vertical_align: "center",
                            fadeout: "off",
                            maxVisibleItems: 3,
                            infinity: "on",
                            space: 0,
                            stretch: "off"
                        },
                        viewPort: {
                            enable:true,
                            outof:"pause",
                            visible_area:"80%"
                        },
                        responsiveLevels:[1240,1024,778,480,320],
                        gridwidth:[1240,1024,778,480,320],
                        gridheight:[600,600,500,400,300],
                        lazyType:"none",
                        parallax: {
                            type:"mouse",
                            origo:"slidercenter",
                            speed:2000,
                            levels:[2,3,4,5,6,7,12,16,10,50],
                        },
                        shadow:0,
                        spinner:"off",
                        stopLoop:"on",
                        stopLoop:"on",
                        stopAfterLoops:0,
                        stopAtSlide:1,
                        shuffle:"off",
                        autoHeight:"on",
                        hideThumbsOnMobile:"on",
                        hideSliderAtLimit:0,
                        hideCaptionAtLimit:0,
                        hideAllCaptionAtLilmit:0,
                        debugMode:false,
                        fallbacks: {
                            simplifyAll:"off",
                            nextSlideOnWindowFocus:"off",
                            disableFocusListener:false,
                        }
                    });
                }
            }); /*ready*/
        </script>
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   <div class="tp-bullets hesperiden horizontal nav-pos-hor-center nav-pos-ver-bottom nav-dir-horizontal noSwipe" style="top: 100%; transform: matrix(1, 0, 0, 1, 20, -2); left: 50%;">
  <div class="tp-bullet selected" style="top: 0px;"></div>
  <div class="tp-bullet" style="top: 0px;"></div>
  <div class="tp-bullet" style="top: 0px;"></div>
  <div class="tp-bullet" style="top: 0px;"></div>
</div>
&#13;
&#13;
&#13;

我的代码有什么问题?在文档文档中,我只能看到应该放置子弹的属性空间,考虑到5px的空间......我已经设置了它,但它没有用。

0 个答案:

没有答案