设置显示Flex Slider轮播图像的数量 [英] Set the amount of displaying Flex Slider carousel image

问题描述

我在我的网站上嵌入了带有旋转木马的flex滑块。但是，我没有很好地设置滑块的属性（或者可能是CSS），就像这样。 http://www.screencast.com/t/xlRssnj43 旋转木马的最后一张图片是所示。

I embed flex slider with carousel on my site. However, I did not set the property of the slider well(or might be CSS) that it is like this. http://www.screencast.com/t/xlRssnj43 The last image of the carousel is half shown.

虽然我可以点击它，但理想情况下我希望它是这样的： http://www.screencast.com/t/NfOlZdUMQh 下一个/上一个按钮始终显示，并显示4个完整图像。第五张应该在下一张幻灯片上。

Although I can click on it, ideally I would like it to be this: http://www.screencast.com/t/NfOlZdUMQh Having next/previous button showing all the time, and having 4 full images showing. The 5th one should be on the next slide.

这是我的HTML：

<div class="slider">
    <div class="flexslider" id="slider">
    <ul class="slides">
        <li><img src="image1.jpg" /></li>
        <li><img src="image2.jpg" /></li>
        <li><img src="image3.jpg" /></li>
        <li><img src="image4.jpg" /></li>
        <li><img src="image5.jpg" /></li>
    </ul>
    </div>
    <!--flexslider-->
    <div class="flexslider" id="carousel">
    <ul class="slides">
        <li><img src="image1.jpg" /></li>
        <li><img src="image2.jpg" /></li>
        <li><img src="image3.jpg" /></li>
        <li><img src="image4.jpg" /></li>
        <li><img src="image5.jpg" /></li>
    </ul>
    </div>
    <!--flexslider-->
    </div>

这是我的jquery代码：

Here is my jquery code:

$('.flexslider').each(function() {
                var $root = $(this);

                // kill item if no image
                $root.find("li").each(function(){
                    var src = $(this).find("img").attr("src");
                    if(!src){
                        $(this).remove();
                    }
                });
                });
                $('#carousel').flexslider({
                    animation: "slide",
                    controlNav: false,
                    animationLoop: false,
                    slideshow: false,
                    itemWidth: 91,
                    itemMargin: 19,  //this seems like not working, I also set in css
                    asNavFor: '#slider',
                    minItems: 4
                  });

                  $('#slider').flexslider({
                    animation: "slide",
                    controlNav: false,
                    animationLoop: false,
                    slideshow: false,
                    sync: "#carousel"
                  });


        }

我还把它放在一个演示中页面： http://ultimatetemplate.businesscatalyst.com/slider

I have also put it in a demo page: http://ultimatetemplate.businesscatalyst.com/slider

任何想法？干杯。

推荐答案

你正在覆盖flexslider css，这就是为什么你的旋转木马箭头越界并且图像也在切割。
为了让你理解flexslider =>这个itemwd是li不是图像..而itemmargin是用户设置成css并需要在滑动时考虑的边距。
因此，如果你的img是91px并且保证金设置为li 10px（每边左/右）比itemwd应该是91 + 10 +10 = 111你需要设置这些@ screen.css

You were overwriting the flexslider css thats why your carousel arrow going out of bound and also image is cutting. To give you bit understanding of flexslider => this itemwd is the li wd not the image .. and itemmargin is the margin which user set into css and require to consider while sliding. So if your img is 91px and margin are set to li 10px(each side left/right) than itemwd should be 91+10 +10 = 111 and u need to set these @ screen.css

#carousel .flex-viewport img {width:91px;}
#carousel .flex-viewport li{
margin:1px 5px 1px  5px;
  /*these are margins which u mention in the  itemMargin at js */
 }

你希望箭头离开旋转木马而不是删除溢出隐藏所以它们可以看到..
@ screen.css

And you want that arrows goes out of carousel than remove overflow hidden so they can visible.. @screen.css

   #carousel.flexslider {
   height: 65px; 
   border:0;
   box-shadow:none;
   border-radius:0;
   /*overflow:hidden;*/ /*remove this its hiding ur arrows  next/prev*/
    margin-left:0;margin-right:0;
   }

@这些你已经在做..

@and these are u already doing..

 #carousel .flex-direction-nav .flex-prev { left: 0 !important; opacity: 1 !important; 
  margin-left:-30px; } /*this 30 px are wd of next/prev */


 #carousel .flex-direction-nav .flex-next { right: 0 !important;  
   opacity: 1 !important; margin-right:-30px;} /*this 30 px are wd of next/prev */

@JS等级做这些改变..

@JS level do these changes ..

 $('#carousel').flexslider({
                animation: "slide",
                controlNav: false,
                animationLoop: false,
                slideshow: false,
                itemWidth: 111,
                itemMargin: 10,  
                asNavFor: '#slider'                    
              });

工作演示

这篇关于设置显示Flex Slider轮播图像的数量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！