18 янв. 2025

Слайдер из блоков для Сraftum


ДЕМО


Как сделать слайдер из дизайн блоков со своими стрелками и точками? Все очень просто.



  1. Создай дизайны слайдеров в дизайн блоке конструктора Сraftum и задай им css класс: slaid1, slaid2, slaid3


  1. Создай блок где будет слайдер и задай ему css класс: slaid_boxx


  1. Создай шейп из объекта и сделай его прозрачным и задай ему css класс: slaider


  1. Для стрелок задай ссылки: #slider_left - влево и #slider_right - вправо


  1. В <head> вставь код который ниже.



Модификация для Сraftum платная - оплатить и получить код можно в разделе Оплата 🔒

Оплата

Ваш код для конструктора С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>


Комментарии


Ваш заказ
  • image alt
    POWER Full 14
    POWER Full 14
    1000
  • image alt
    POWER Full 14
    POWER Full 14
    2000
3000
Выберите вариант доставки

Оставляя заявку, вы соглашаетесь на обработку персональных данных

2
Craftum Конструктор сайтов Craftum