Задать интервал отображения гибкий слайдер карусель

Я размещения гибкого трубопровода слайдера карусель на моем сайте. Однако я не установил свойство слайдера хорошо (или может быть CSS), что это так. http://www.screencast.com/t/xlRssnj43 последнее изображение карусели половину показали.

Хотя я могу нажать на него, в идеале я хотел бы, чтобы это было так: http://www.screencast.com/t/NfOlZdUMQh наличие кнопки next / previous, отображающей все время,и наличие 4 полных изображений. 5 - й должен быть на следующем слайде.

Вот мой 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: 

$('.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

Есть идеи? Овации.

4 2
css jquery flexslider

4 ответа:

Вы переписывали css flexslider вот почему ваша карусельная стрелка выходит из привязки, а также изображение режется. Чтобы дать вам немного понимания flexslider => этот itemwd является li wd не изображение .. а itemmargin-это поле, которое пользователь устанавливает в css и требует учитывать при скольжении. Таким образом, если ваш img равен 91px, а маржа установлена в li 10px(каждая сторона слева / справа), то itemwd должен быть 91+10 +10 = 111 и u нужно установить эти @ 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 */
 }

И вы этого хотите стрелки выходит из карусели, чем удалить переполнение скрыто, так что они могут быть видны.. @экран.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;
   }

@и это вы уже делаете..

 #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 level делают эти изменения ..

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

Рабочая демонстрация

6

Знаете ли вы ширину родительского элемента для миниатюр? В этом случае вы можете просто установить миниатюры на фиксированную ширину.

Итак, если родительский эскиз имеет ширину 600 пикселей, 

$('.flexslider').flexslider({
  itemWidth: 180,
  itemMargin: 10,
});

Должен гарантировать, что в любой момент времени будут видны только четыре полных миниатюры.

1

Ширина навигатора должна быть

CSS 

 #slider .flex-next, #slider .flex-prev{
    display:none;
 }
 #carousel .flex-viewport{
    margin: 0 40px;
 }

Пример: http://jsfiddle.net/47rf6/1/

Также, в JS 

$('.flexslider').flexslider({
  itemWidth: 99,
  itemMargin: 19,
});

Теперь часть расчета: Parent Element = 472px Отсюда и миниатюра = ( width: 99 + Margin = 19px ) * 4(количество отображаемых миниатюр) = 472px.

Также, если вы хотите, чтобы стрелка была внутри миниатюры div-сделайте это:

Тогда пример не содержит поля. Но я предполагаю, что вы поняли идею. Кроме того, образы даже не отсюда не делится поровну. Flexslider не реагирует. То есть, если вы попытаетесь сделать то же самое на их слайде, это не сработает. Есть много других свободно доступных каруселей, которые делают эти вещи по умолчанию, поэтому вам не нужно настраивать этот. Вы все еще можете настроить его, если мы точно знаем, что происходит в вашем коде. Примечание: все миниатюры должны быть одинакового размера.

1

Так как ширина слайдера div составляет 472px, используйте эти настройки 

$('#carousel').flexslider({
   animation: "slide",
   controlNav: false,
   animationLoop: false,
   slideshow: false,
   itemWidth: 91, 
   itemMargin: 29,  //this should be 29px in your case
   asNavFor: '#slid2r',
   minItems: 4
});

Если вы используете itemwidth: 91, то ваш itemMargin должен быть 29px. Тогда на следующем слайде он должен показать только четыре ногтя большого пальца и грязь одного пламени.

Поэтому используйте это в css как
#карусель .флекс-просмотра ли{ поле справа: 29px; }

1