Неправильно работает слайдер owl-carousel, в чем причина?

Question

[rarayaki]

При пролистывании слайды не прячутся (не исчезают). Должно быть видно только 4 слайда, а сейчас их больше и выходят за стрелку. Что может быть не так? Делаю на Тильде.

<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>
(function () {
	// Id блока, в котором будет слайдер 
	let block = $("#rec256866171");
	// Class элемента, в котором будет находиться слайдер
	let wrap = $(".tn-elem__2568661711607104509728");
	// Id блоков, которые будут слайдами
	let slides = $("#rec257736238, #rec257737297, #rec257737450, #rec257737583");

	wrap.addClass("tildoshnaya-slider-owl");
	let box = wrap.find(".tn-atom");
	box.append('<div class="owl-carousel owl-theme"></div>');
	slides.appendTo(block.find('.owl-carousel'));
	let owl = wrap.find('.owl-carousel').owlCarousel({
		// Зациклить слайдер - true
		// Без зацикленности - false
	    loop:true,
	    nav:false,
	    dots: false,
	    // Колличество карточек
	    items: 4,
	    

	    // Адаптивность
	    responsive:{
	    	// 0 это минимальная ширина экрана, при которой включается следующая часть кода
	        // 0:{ 
	        //	items: 1 это колличество слайдов на экране
	        //     items:1
	        // },
	        0:{
	            items:1
	        },
	        640:{
	            items:2
	        },
	        960:{
	            items:4
	        },
	    }
	    // Адаптивность: конец
	})


	block.find("[href='#slider_left']").click(function(){
		owl.trigger('prev.owl.carousel');
	})
	block.find("[href='#slider_right']").click(function(){
		owl.trigger('next.owl.carousel');
	})
}());
</script>

<style>
/* tildoshnaya_  */
	.tildoshnaya-slider-owl .t-rec .t396__artboard  {
		/* Указываем высоту слайда */
		height: 234px !important;
		/* Указываем ширину слайда */
		width: 953px !important;
	}
        /* Круги (слайды)*/
	#rec257736238 > div > div > img {
	    width: 192px;
	    height: 192px;
	}
	#rec257737297 > div > div > img {
	    width: 192px;
	    height: 192px;
	}
	#rec257737450 > div > div > img {
	    width: 192px;
	    height: 192px;
	}
	#rec257737583 > div > div > img {
	    width: 192px;
	    height: 192px;
	}
</style>

Comments

[Lord_Dantes]

А jQuery где?

Где html карусели?

[rarayaki]

делала по этому видео для Тильды

[Ростислав]

Лучше подключи swiper.js

[Сергей delphinpro]

Ростислав, чем лучше?

[Lord_Dantes]

Сергей delphinpro, тем что Ростиславу проще сказать это :)

Answer 1

[Anonimmus]

оберните ваш слайдер в div.wrapper ->
затем в стилях пропишите ширину слайда скажем 983px и центрируем его ->
а теперь задаем обертке стиль overflow:hidden, что значит спрятать все что не попало за пределы обертки. Я незнаю ничего про тильду, но ведь наверняка можно свои стили вкрутить, если нет, я пытался!))

.wrapper {
    width: 80%; /*ширина слайда*/
    overflow: hidden; /*скрыть все что за пределами*/
    min-height: 150px; /*минимальная*/
    max-height: 200px; /*макс высоты*/
    display: block; /*вести себя как блок*/
    margin: 0 auto; /*выравнить, где 0 это верх и низ, а авто это горизонтальная*/
}

Comments

[Сергей delphinpro]

можно свои стили вкрутить

прежде чем вкручивать свои стили, нужно разобраться, почему не работают штатные стили слайдера. А они есть.
Для этого открываем dev tools и инспектируем слайдер. Даже и вопрос не пришлось бы задавать, скорее всего =)

А вот когда выясним что там тильда что-то перебивает в стилях (к примеру, я хз как там на самом деле), тогда и начинаем писать свои стили