Ваш код для конструктора Сraftum:
<script src ="https://code.jquery.com/jquery-3.7.0.js" integrity ="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin ="anonymous" > </script >
<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 >
<script >
$(document ).ready (function ( ){
// Class блока, в котором будет слайдер
var block = $(".slaid_boxx" );
// Class элемента, в котором будет находиться слайдер
var wrap = $(".slaider" );
// Class блоков, которые будут слайдами
var slides = $(".slaid1, .slaid2, .slaid3, .slaid4" );
wrap.addClass ("dasist-slider-owl" );
var box = $(".slaider" );
box.append ('<div class="owl-carousel owl-theme"></div>' );
slides.appendTo (block.find ('.owl-carousel' ));
var owl = wrap.find ('.owl-carousel' ).owlCarousel ({
// Зациклить слайдер - true
// Без зацикленности - false
loop :true ,
// Точки-контроллы
dots : true ,
nav :true ,
// Колличество карточек
items : 1 ,
autoplay :true ,
autoplayTimeout :5000 ,
autoplayHoverPause :true ,
// Адаптивность
responsive :{
// 0 это минимальная ширина экрана, при которой включается следующая часть кода
// 0:{
// items: 1 это колличество слайдов на экране
// items:1
// },
0 :{
items :1
},
640 :{
items :1
},
960 :{
items :1
},
}
// Адаптивность: конец
})
block.find ("[href='#slider_left']" ).click (function (e ){
e.preventDefault ();
owl.trigger ('prev.owl.carousel' );
})
block.find ("[href='#slider_right']" ).click (function (e ){
e.preventDefault ();
owl.trigger ('next.owl.carousel' );
})
});
</script >
<style >
.dasist-slider-owl .t-rec .t396__artboard {
/* Указываем высоту слайда */
height : 700px !important ;
/* Указываем ширину слайда */
width : 1920px !important ;
}
.dasist-slider-owl {
display : flex;
flex-flow : row nowrap;
justify-content : center;
align-items : stretch;
align-content : stretch;
}
.dasist-slider-owl .t-rec ,
.dasist-slider-owl .t396__artboard {
overflow : hidden !important ;
}
.slaider {
overflow : hidden;
}
.custom-owl-carousel .owl-nav [class*=owl-] {
position : absolute;
top : 50% ;
transform : translateY (-50% );
margin-top : -20px ;
}
.custom-owl-carousel .owl-nav button .owl-prev {
left : -34px ;
}
.custom-owl-carousel .owl-nav button .owl-next {
right : -34px ;
}
</style >
Скопировать код в буфер обмена