Установите количество отображаемых изображений карусели Flex Slider

Question

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

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

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

Любые идеи? Приветствия.

Answer 1

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

#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 это у уже делают ..

#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 уровень сделать эти изменения ..

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

Working demo

Answer 2

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

Таким образом, если родительский эскиз 600px широкий,

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

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

Answer 3

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

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 Следовательно Thumbnail = = width: 99 + Margin = 19px) * 4 (количество отображаемых эскизов) = 472px.

Кроме того, если вы хотите Эрроу внутри DIV миниатюр - это сделать:

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

Answer 4

С вашей ширины ползуна 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, как
#carousel .flex-видового экрана Li { маржинальной-направо: 29px; }