Как динамически создать новый слайд в карусели сов - PullRequest
Новая
       13

Как динамически создать новый слайд в карусели сов

1 голос
/ 20 сентября 2019

Я хочу создавать слайды элементов совы динамически на основе условий.Например, 

if(i=1 && i<=4)
{

//generate new item slide (owl carousel)
}
else if(i>=4 && i<=8)
{

//Generate second slide
}

Я создаю элемент слайда вручную, я хочу сделать его динамически на основе условия в jquery.Предположим, первое условие выполнено, динамически создайте новый элемент слайда, если второе условие выполнено, создайте новый слайд динамически.Я новичок в jquery

Ps: - слайд должен создавать динамически с помощью jquery.

Вот код слайдера 

<!DOCTYPE html> 
<html lang="en">
<head>
<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="myjs2.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
    <link rel="stylesheet" href="style2.css">
    <style>
    body
{
    font-family:Arial;
    font-size : 10pt;
    padding:15px;
}

.ui-datepicker-calendar {
    display: none;
}

    </style>

   
    <title>yes</title>
</head>
<body>
<div class="test"></div>
<div id="owl-demo" class="owl-carousel owl-theme">



 <div class="item">
 first slide
  </div>
  <div class="item">
 second slide
  </div>
  <div class="item">
 Third slide
  </div>
</div>
<script>

$(document).ready(function() {
 
 $("#owl-demo").owlCarousel({

     navigation : true, // Show next and prev buttons

     slideSpeed : 300,
     paginationSpeed : 400,

     items : 1, 
     itemsDesktop : false,
     itemsDesktopSmall : false,
     itemsTablet: false,
     itemsMobile : false

 });

});
</script>
</body>
</html>

Ответы [ 2 ]

1 голос
/ 20 сентября 2019 
<!DOCTYPE html> 
<html lang="en">
<head>
<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="myjs2.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
    <link rel="stylesheet" href="style2.css">
    <style>
    body
{
    font-family:Arial;
    font-size : 10pt;
    padding:15px;
}

.ui-datepicker-calendar {
    display: none;
}

    </style>


    <title>yes</title>
</head>
<body>
<div class="test"></div>
<div id="owl-demo" class="owl-carousel owl-theme">
    <div class="item"> 1 slide  </div>
    <div class="item"> 2 slide </div>
    <div class="item"> 3 slide  </div>
</div>
<button id="addCarous"> Add Carousel</button>
<script>

$(document).ready(function() {

 $("#owl-demo").owlCarousel({

     navigation : true, // Show next and prev buttons

     slideSpeed : 300,
     paginationSpeed : 400,

     items : 1, 
     itemsDesktop : false,
     itemsDesktopSmall : false,
     itemsTablet: false,
     itemsMobile : false

 });
$("#addCarous").click(function(e){
debugger;
var number = document.getElementsByClassName("item").length +1;
    e.preventDefault(); //-- prevent form submit
    $('#owl-demo').trigger('add.owl.carousel', ['<div class="item"> '+number+' slide </div>'])
        .trigger('refresh.owl.carousel');
});

});
</script>
</body>
</html>

Это необязательный параметр.Он определяет функцию, которая возвращает содержимое для вставки.Индекс: Возвращает позицию индекса элемента в наборе.HTML: возвращает текущий HTML-код выбранного элемента.Это похоже на добавление тега в (карусель).

$ ("# id"). Trigger ('add.owl.carousel', [])

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

initialize.owl.carousel Тип: присоединяемый Обратный вызов: onInitialize Когда инициализируется плагин.

initialized.owl.carousel Тип: присоединяемыйОбратный вызов: onInitialized Когда инициализируется плагин.

resize.owl.carousel Тип: присоединяемый Обратный вызов: onResize Когда размер плагина изменяется.

resized.owl.carousel Тип: присоединяемый Обратный вызов: onResized Когдаразмер плагина изменился.

refresh.owl.carousel Тип: присоединяемый, отменяемый, инициируемый. Обратный вызов: onRefresh Параметр: [событие, скорость] Когда внутреннее состояние плагина требует обновления.

обновляется.owl.carousel Тип: присоединяемый Обратный вызов: onRefreshed Когда обновлено внутреннее состояние плагина.

drag.owl.carousel Тип: присоединяемый Обратный вызов: onDrag Когда начинается перетаскивание элемента.

dragged.owl.carousel Тип: присоединяемый Обратный вызов: onDragged Когда перетаскивание элемента завершено.

translate.owl.carousel Тип: присоединяемый обратный вызов: onTranslate Когда начинается перевод этапа.

translation.owl.carousel Тип: присоединяемый обратный вызов: onTranslated Когда перевод этапа имеетготово.

change.owl.carousel Тип: присоединяемый Обратный вызов: onChange Параметр: свойство Когда свойство собирается изменить свое значение.

change.owl.carousel Тип: присоединяемый Обратный вызов: параметр onChanged: свойство Когда свойство изменило свое значение.

next.owl.carousel Тип: triggerable Параметр: [скорость] Переход к следующему элементу.

prev.owl.carousel Тип: triggerable Параметр:[скорость] Переход к предыдущему элементу.

to.owl.carousel Тип: триггерный Параметр: [позиция, скорость] Переход к позиции.

destroy.owl.carousel Тип: триггерный Уничтожает карусель.

replace.owl.carousel Тип: triggerable Параметр: data Удаляет текущий контент и добавляет новый, переданный в параметр.

add.owl.carousel Тип: triggerable Параметр: [data, position] Добавляет новый элемент в заданную позицию.

remove.owl.carousel Тип: triggerable Параметр: position Удаляет элемент из заданной позиции.

Чтобы использовать Owl Carousel, вам необходимо убедиться, что включены скрипты Owl и jQuery 1.7 или более поздней версии. Никакой специальной разметки вам не нужно.Все, что вам нужно, - это обернуть ваши элементы div (сова работает с любым элементом типа) внутри элемента контейнера.Класс "owl-carousel" является обязательным для применения надлежащих стилей, которые взяты из файла owl.carousel.css.

http://www.landmarkmlp.com/js-plugin/owl.carousel/

1 голос
/ 20 сентября 2019

Когда вы инициализируете карусель, сохраните объект карусели в переменной для будущего использования. 

var $owl = $('#owl-demo').owlCarousel({
    navigation : true, // Show next and prev buttons
    slideSpeed : 300,
    paginationSpeed : 400,    
    items : 1, 
    itemsDesktop : false,
    itemsDesktopSmall : false,
    itemsTablet: false,
    itemsMobile : false
  });

Owlcarousel privides refresh.owl.carousel событие для обновления состояний карусели при изменении слайдов.

Пример: 

if(i=1 && i<=4)
{
   $("#owl-demo").append('<div class="item">New slide</div>');
}
else if(i>=4 && i<=8)
{
   $("#owl-demo").append('<div class="item">New slide 2</div>');
}

$owl.trigger('refresh.owl.carousel'); // We are refreshing the carousel state to update new slide

Вы можете найти все поддерживаемые опции здесь

...