Как сделать чтоб owl carousel 2 пропускал неактивные слайды?
Или как сделать в owl carousel 2 неактивные слайды
Есть слайдер и надо в процессе какие-то слайды скрывать и чтоб кнопка вперед игнорировала эти слайды и шла к следующему как это реализовать?
я пробовал вешать display: none; но это не работает
Конечно display:none; не будет работать, ведь этот тип карусели сначала анализирует html и генерирует свои собственные данные, а затем начинает с ними зацикливаться. Если вы определите какое-то свойство css, вы просто сломаете карусель.
Тынай Бакасов, там есть события и если только по событию проверять следующий элемент и если на нем есть допустим класс .none то перепрыгивать его... но я не нашел готовых решений может я не правильно гуглил=(( а у самого нет опыта работы с событиями у этого слайдера но вроде немного разобрался попробую что нибудь написать...
<script>
jQuery('#owl-demo .hid').remove(); //Во время загрузки страницы сначала удаляем слайд с классом ".hid"
//Затем загружаем карусель
jQuery(document).ready(function() {
jQuery("#owl-demo").owlCarousel({
autoPlay: 3000, //Автозапуск на 3 секунды
navigation : true,
items : 4,
itemsDesktop : [1199,3],
itemsDesktopSmall : [979,3],
loop:true,
rewindNav: false
});
});
</script>
<script type="text/javascript">
function reinitcarousel(v)
{
jQuery('#owl-demo').html(jQuery('#anotherdiv').html()); //Удалите все слайды в owl-demo и переместите слайды в div #anotherdiv, где спрятаны все слайды имеющий класс .hid
jQuery('#owl-demo .im'+v).removeClass('hid'); //Затем снова удаляеи класс .hid, класс .im(v), где v — число.
jQuery('#owl-demo .hid').remove(); //Затем удаляеи все слайды имеющий класс .hid, чтобы в нашей карусели были только видимые слайды.
jQuery("#owl-demo").data('owlCarousel').destroy(); //Нам нужно сначала полностью убрать карусель, а затем повторно выводить, как показано ниже.
jQuery("#owl-demo").owlCarousel({
autoPlay: 3000,
navigation : true,
items : 4,
itemsDesktop : [1199,3],
itemsDesktopSmall : [979,3],
loop:true
});
}
</script>
Тынай Бакасов, Спасибо вам большое! очень жаль что данное решение мне не подходит=(( смысл в том что пользователь нажал на кнопку вешается на следующий слайд класс и мы его пропускаем
xxvxx, у вас просто не конкретный вопрос, disply:none; не сработает, этот вариант который я вам дал так и делает, то бишь когда вам надо не показывать вы вешаете класс hid, а когда снова надо показать убирате класс hid.
xxvxx, вы поняли смысл? Он есть в коде, но скрипт берёт и удаляет перед тем как показать в браузере, когда надо, будете добавлять и убирать класс .hid вместо display: none;
Тынай Бакасов, да они не показываются но слайдер все равно на них заходит просто нечего не показывает, я могу после каждого события нажатия кнопки вперед назад определять куда движется пользователь и проскакивать неактивный слад, тоесть если пользователь нажал назад то проскакиваем его на 1 назад в перед проскакиваем на 1 в перед но проблема возникает а если пользователь крутит тачем как мне определить в какую сторону он движется? ведь если он движется назад а я буду продвигать его в перед то он не сможет попасть на следующий слайд
Ваше решение рабочее, но я бы сделал проще нашел все hid и удалил их и не надо пересобирать слайдер
но проблема в том что мне нужно динамическое решение пользователь может активировать и деактивировать любые слайды в любом порядке
xxvxx, у меня теперь к вам вопрос, если пользователь деактивировал слайд он же получается исчезнет, как он его снова активирует?
С вопросом разобрались, чтобы мы могли вам помочь опишите процесс действий.
У вас у вас слайд переход по страницам? Или слайд изображений?
Мне понять бы в каком направление мне думать.
Тынай Бакасов, нажимает на другую кнопку и слайд заново активируется, это конструктор который зависит от выбранных пользователей параметров, на наверное буду вешать класс и выводить на неактивном слайде надпись что с данными параметрами нечего нет ну и вперед назад если будет нажато то я буду проскакивать слайд
Простой
