Как сверстать карусель

[virtas]

Скажите может кто то знает как сверстать вот такую карусель 
Чтобы попроще 4 блока ссылки стрелочки ,что бы попроще, может есть у кого инфа по этому поводу 
https://fotki.yandex.ru/next/users/sawenkov-o-s/album/429223/view/1134449

[Jack_V]

вам именно сверстать нужно или готовый jquery плагин пойдет?

[virtas]

вам именно сверстать нужно или готовый jquery плагин пойдет?

Ну подскажите плагин может попроще проверенный есть я пробую устанавливать да как то не очень все такие замысловатые 

[abrahadabra]

классика

[virtas]

классика

 

классика

Классика то классика установить тяжеловато (

Я так понимаю нужно подключить саму библиотеку скрипт  html розетку и все ?  

[abrahadabra]

установить проще простого.

bower install iosslider

и всё.

В документации описана html-структура и обязательный минимум css. В комплекте не идут css-файлы из-за этих нескольких строк. А возможностей оформления столько, что уж давайте сами как надо.

Скрипт подключаете удобным вам образом, активируете с нужными опциями. И практически любая карусель довольно легко настраивается.

[Sensei]

установить проще простого.

 

Ага, только сначала нужно установить node.js и, собственно, сам bower.

Так пишите, будто этот пакетный менеджер что-то само собой разумеющееся.

ТС затрудняется подключить плагин, а вы еще зависимостей абсолютно ему не нужных подбрасываете.

Да и плагин по вашей ссылке платный.

 

virtas, попробуйте этот http://kenwheeler.github.io/slick/

Возможно, тяжеловат, но вашу задачу решает.

[virtas]

Вот нашел то что нужно простая карусель но botstrap режет по полной (((

[abrahadabra]

Так пишите, будто этот пакетный менеджер что-то само собой разумеющееся.

а разве нет?

ну а как ещё? в npm его, к сожалению, нет. А ставить npm'ом напрямую из гитхаба — это да, не для новичков.

[Sensei]

Я, например, bower'ом не пользуюсь.

 

На форуме люди с разным уровнем и опытом.

Не все используют node.js и модные штуки на нем, и могут вообще не знать, что такое npm, нужно это учитывать)

[virtas]

Я, например, bower'ом не пользуюсь.

 

На форуме люди с разным уровнем и опытом.

Не все используют node.js и модные штуки на нем, и могут вообще не знать, что такое npm, нужно это учитывать)

 

Я, например, bower'ом не пользуюсь.

 

На форуме люди с разным уровнем и опытом.

Не все используют node.js и модные штуки на нем, и могут вообще не знать, что такое npm, нужно это учитывать)

Да тут я с вами согласен !!!

Вот я что сделал поставил на вордпресс

Только у меня еще есть вопрос для всех участвующих, кому не сложно подскажите как сделать снизу ссылки (скажем так (ту же самую навигацию только не как на слайдерах кнопки а текст, например блок 1 блок 2 итд))

вот что вышло пока у меня

 

<div class="b-carousel"> <!-- контейнер, в котором будет карусель -->

 

<div class="b-carousel-button-left"></div> <!-- левая кнопка -->

<div class="b-carousel-button-right"></div> <!-- правая кнопка -->

 

<div class="h-carousel-wrapper"> <!-- видимая область карусели -->

<div class="h-carousel-items"> <!-- весь набор элементов карусели -->

 

<div class="b-carousel-block"> <!-- первый элемент карусели -->

<a href="#" class="a-carousel-image-link">

<img src="<?php bloginfo('template_url'); ?>/img/karuseli/k1.png" alt="logo" class="img-responsive">

</a>

</div>

 

<div class="b-carousel-block">

<a href="#" class="a-carousel-image-link">

<img src="<?php bloginfo('template_url'); ?>/img/karuseli/k2.png" alt="logo" class="img-responsive">

</a>

</div>

 

<div class="b-carousel-block">

<a href="#" class="a-carousel-image-link">

<img src="<?php bloginfo('template_url'); ?>/img/karuseli/k3.png" alt="logo" class="img-responsive">

</a>

</div>

 

<div class="b-carousel-block">

<a href="#" class="a-carousel-image-link">

<img src="<?php bloginfo('template_url'); ?>/img/karuseli/k4.png" alt="logo" class="img-responsive">

</a>

</div>

 

<div class="b-carousel-block">

<a href="#" class="a-carousel-image-link">

<iframe width="200" height="113" src="https://www.youtube.com/embed/et281UHNoOU?rel=0&controls=0&showinfo=0"frameborder="0" allowfullscreen></iframe>

</a>

</div>

 

<div class="b-carousel-block"> <!-- последний элемент карусели -->

<a href="#" class="a-carousel-image-link">

<img src="<?php bloginfo('template_url'); ?>/img/karuseli/k5.png" alt="logo" class="img-responsive">

</a>

</div>

 

</div>

</div>

 

</div>

img {

border: 0;

}

.b-carousel  {

width: 948px; /* ширина всего блока */

margin: 50px auto;

}

.h-carousel-wrapper {

width: 888px; /* ширина области карусели */

position: relative;

overflow: hidden; /* скрываем содержимое, выходящее за рамки основной области */

margin: 0 auto; /* выравниваем по центру относительно родительского блока */

}

.h-carousel-items {

width: 10000px; /* устанавливаем большую ширину для набора элементов карусели, чтобы в неё всё поместилось */

position: relative; /* позиционируем блок относительно основной области карусели */

}

.b-carousel-block {

float: left; /* выстраиваем все элементы карусели в ряд */

width: 210px; /* задаём ширину каждого элемента */

padding: 5px 6px; /* делаем оступы, чтобы элементы не сливались */

}

.a-carousel-image-link { /* тут чисто оформление содержимого */

display: block;

width: 206px;

height: 150px;

overflow: hidden;

border: 2px solid #fff;

}

.b-carousel-button-left, .b-carousel-button-right {

width: 28px; /* задаем ширину кнопок */

height: 36px; /* задаем высоту кнопок */

position: relative;

top: 60px; /* позиционируем кнопки */

cursor: pointer; /* делаем кнопкам курсор в виде "пальца" */

}

.b-carousel-button-left {

float: left; /* выравниваем левую кнопку по левому краю */

background: url("./img/carousel-left.png"); /* картинка с левой кнопкой */

}

.b-carousel-button-right {

float: right; /* выравниваем правую кнопку по правому краю */

background: url("./img/carousel-right.png"); /* картинка с правой кнопкой */

}

$(document).ready(function(){

 

$(".b-carousel-button-right").click(function(){ // при клике на правую кнопку запускаем следующую функцию:

$(".h-carousel-items").animate({left: "-222px"}, 200); // производим анимацию: блок с набором картинок уедет влево на 222 пикселя (это ширина одного прокручиваемого элемента) за 200 милисекунд.

setTimeout(function () { // устанавливаем задержку времени перед выполнением следующих функций. Задержка нужна, т.к. эти ффункции должны запуститься только после завершения анимации.

$(".h-carousel-items .b-carousel-block").eq(0).clone().appendTo(".h-carousel-items"); // выбираем первый элемент, создаём его копию и помещаем в конец карусели

$(".h-carousel-items .b-carousel-block").eq(0).remove(); // удаляем первый элемент карусели

$(".h-carousel-items").css({"left":"0px"}); // возвращаем исходное смещение набора набора элементов карусели

}, 300);

});

 

$(".b-carousel-button-left").click(function(){ // при клике на левую кнопку выполняем следующую функцию:

$(".h-carousel-items .b-carousel-block").eq(-1).clone().prependTo(".h-carousel-items"); // выбираем последний элемент набора, создаём его копию и помещаем в начало набора

$(".h-carousel-items").css({"left":"-222px"}); // устанавливаем смещение набора -222px

$(".h-carousel-items").animate({left: "0px"}, 200); // за 200 милисекунд набор элементов плавно переместится в исходную нулевую точку

$(".h-carousel-items .b-carousel-block").eq(-1).remove(); // выбираем последний элемент карусели и удаляем его

});

 

});

 

[andrey7287]

  Попробуй slick, который выше предложили. Максимально простой, гибко-настраиваемый и с бутстрап работает без проблем.

 

  Ссылки он выводит точками. Если я правильно понял, нужно что бы они были текстом ? В принципе можно через css эти кнопки переделать. Это наверное самое простое, хотя не особо эстетичное решение.

[virtas]

Я, например, bower'ом не пользуюсь.

 

На форуме люди с разным уровнем и опытом.

Не все используют node.js и модные штуки на нем, и могут вообще не знать, что такое npm, нужно это учитывать)

 

Я, например, bower'ом не пользуюсь.

 

На форуме люди с разным уровнем и опытом.

Не все используют node.js и модные штуки на нем, и могут вообще не знать, что такое npm, нужно это учитывать)

Все четинько работает Спасибо !!! А вы не подскажите как вместо кнопок навигации поставить ссылки??? там например Блок1 Блок2 Блок3

 

установить проще простого.

 

Ага, только сначала нужно установить node.js и, собственно, сам bower.

Так пишите, будто этот пакетный менеджер что-то само собой разумеющееся.

ТС затрудняется подключить плагин, а вы еще зависимостей абсолютно ему не нужных подбрасываете.

Да и плагин по вашей ссылке платный.

 

virtas, попробуйте этот http://kenwheeler.github.io/slick/

Возможно, тяжеловат, но вашу задачу решает.

 

Все четинько работает Спасибо !!! А вы не подскажите как вместо кнопок навигации поставить ссылки??? там например Блок1 Блок2 Блок3

[Sensei]

Можно, например, задать каждому элементу слайдера атрибут с нужным текстом.

А при инициализации вставить его в пункт навигации.

 

https://jsfiddle.net/e0mehrtt/