Существуют ли библиотеки для реализации слайдера контента juery, bootstrap 3?

Question

[Егор Михеев]

Здравствуйте, в сети множество различных библиотек для построения слайдов, не знаю на чем остановиться. Может кто то сталкивался с этой задачей:

1) Встраивается в адаптивный блок col, соответственно занимает только выделенную область.
2) Слайдер html контента.
3) Перемотка кнопками btn

Answer 1

[Alexander Sydorenko]

И опять ответ slick

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

Comments

[Егор Михеев]

Здравствуйте, тестировал OWL и SLICK были проблемы с формированием слайдера, дело в том что этот слайдер загружается в область которая загружается в основное окно с помошью juery, я подключил к загрузчику все библиотеки:

$.getScript('./js/jquery-1.9.1.min.js');
$.getScript('./js/slick.js');
$.getScript('./js/courses.js');

где в courses:
$(document).ready(function(){
$('#single-item').slick({
});
});

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

[Егор Михеев]

Вот загрузчик

jQuery(document).ready(function($) {
$('.more').on('click', function(event) {
event.preventDefault();

var href = $(this).attr('href') + ' .single-project',
portfolioList = $('#portfolio-list'),
content = $('#loaded-content');

portfolioList.animate({'marginLeft':'-120%'},{duration:400,queue:false});
portfolioList.fadeOut(400);
setTimeout(function(){ $('#loader').show(); },400);
setTimeout(function(){
content.load(href, function() {
$('#loaded-content meta').remove();
$.getScript('./js/jquery-1.9.1.min.js');
$.getScript('./js/slick.js');
$.getScript('./js/courses.js');
$('#loader').hide();
content.fadeIn(600);
$('#back-button').fadeIn(600);

});
},800);

});

[Егор Михеев]

Хотя при стандартных задачах и OWL и SLICK я думаю лучшие из доступного

[Alexander Sydorenko]

егор михеев: Странное описание проблемы, то работает то нет.. :) в чем проявлялась "не работа"? что писала консоль браузера во время этой "не работы"? Точно заметил что slick не долюбливает родительские контейнеры с display: table, table-row.. иногда на его корявость может влиять не стандартная верстка.. В остальном кажется проблем он не вызывал, и если сильно не мудрить, то всегда работает.

Пока писал комментарий, вот что заметил - обратите внимание, что $.getScript не гарантитурет доставки скриптов в порядке их вызова.. Те моменты когда он не работает, значит что Ваш courses.js с инициализацией Slik вызвался раньше чем был доставлен сам скрипт slik.js В общем.. Уберите $.getScript либо используйте его так как надо. Зачем Вы им же грузите jquery который по идее у Вас уже вгружен, для меня загадка..

З.Ы. Slik не виноват в своей не работе, в этом конкретном случае.

[Егор Михеев]

Alexander Sydorenko: Спасибо за коммент:
1) Консолью отладки скриптов пока еще не овладел.
2) А как можно очередь загрузки правильно прописать?
3) Без getScript в возвращаемом контейнере почему то скрипты родительской страницы не работают.

[Alexander Sydorenko]

егор михеев: Лучше подключить скрипты один раз, внизу страницы, перед

[Егор Михеев]

Александр, спасибо, решил SLICK использовать. Только еще один вопрос. если можно?

Не получилось инициализировать кнопки под события для перелистывания слайдов:

button id="down" type="button" Обратно button
button id="up" type="button" Дальше button

$(document).ready(function(){
$('.your-class').slick({});
$('#down').slick('slickPrev');
$('#up').slick('slickNext');
});

[Егор Михеев]

Разобрался:

$(document).ready(function(){
$('.your-class').slick({
prevArrow: $('#down'),
nextArrow: $('#up')
});

$('#down').slick('slickPrev');

$('#up').slick('slickNext');
});

[Егор Михеев]

Alexander Sydorenko: В отдельной странице загружается, а через основную не получается:
1) ОК - > kraftikum.com/project_1.html
2) False - > kraftikum.com/testindex.php#works

[Alexander Sydorenko]

егор михеев: Там где ошибка, в основной странице, у вас ошибка в js коде в файле zerif.js. очень похоже что он сохранен в BOM сигнатурой. Там где нет ошибки, на той странице, этот файл не грузится. То есть опять, к слику это не имеет никакого отношения.. Откройте для себя консоль разработчика F12 в Google Chrome (Да и в файрфоксе), закладка Консоль (Console) - туда падают все ошибки, но также интересной есть закладка Source где можно ставить точки останова во всех своих жс файлах, таким образом проверяя как и что работает.

Answer 2

[Никита]

обычно пользуюсь фоторамой