Делаем новостной раздел на сайте под управление ModX

Делаем новостной раздел на сайте под управление ModX

Для начала установим плагин слайдера.

В свой проект, в папку CSS скачиваем и помещаем файлы:

owl.carousel.css

owl.theme.default.css

В папку JS кладем:

owl.carousel.js

Для подключения этой библиотеки добавляем в наш HTML код:

В начало HTML в раздел Head

	<link rel="stylesheet" href="assets/css/owl.carousel.css">
	<link rel="stylesheet" href="assets/css/owl.theme.default.css">

В конец HTML в раздел Script

<script src="assets/js/owl.carousel.js"></script>

Так же в скриптах делаем базовые настройки для каруселей. Ниже представлен пример.

Для примера

<script src="assets/js/owl.carousel.js"></script>
<script>
	$(document).ready(function(){
	$('#carousel-one').owlCarousel({
		loop: false,
		autoplay: false,
    	//autoplayTimeout: 7000,
		//smartSpeed: 2000,
		margin: 0,
		nav: true,
		dots: false,
		navText: ["<img class='arrow' src='assets/images/arrow.png'>", "<img class='arrow' src='assets/images/arrow.png'>"],
		responsive:{
					0:{
                        items:1
                    },
                    400:{
                        items:1
                    },
                    576:{
                        items:2
                    },
                    768:{
                        items:2
                    },
                    1200:{
                        items:2
                    }
                }
	});
	});
</script>

Теперь блоку, в котором должна быть карусель присваиваем id="carousel-one" и добавляем ему классы "owl-carousel owl-theme". Верстка и стили для этого блока уже должны быть написаны.

Вот так

<div class="container-006">
	<div class="container-006-content">
		<div class="container-006__titleblock">
			<p class="container-006__titleblock-maintext">НОВОСТИ</p>
			<p class="container-006__titleblock-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quo dolore veritatis eum iusto obcaecati voluptates sequi illo rem tempore.</p>
			<a class="container-006__titleblock-link" href="">ВСЕ НОВОСТИ</a>
		</div>
		<div class="container-006__newsblock">
			<div id="carousel-one" class="container-006__newsblock-items owl-carousel owl-theme">
			    
			    ЗДЕСЬ БУДУТ ЭЛЕМЕНТЫ СЛАЙДЕРА

			</div>
		</div>
		<div class="container-006__arrowblock">
			
		</div>
	</div>
</div>

Каждому элементу карусели для центрирования по горизонтали нужно поставить "margin: auto;".

Например вот так

.container-001__downblock-items {
    display: flex;
    justify-content: space-around;}
.container-001__downblock-items-itm {
    width: 300px;
    background-color: #ffffffb3;
    padding: 20px;
    border: 2px solid #ffffff;
    margin: auto;}

В админке ModX, в ресурсах создаем ресурс "Новости" с опцией "Контейнер", внутри этого ресурса создаем страницы новостей. Желательно для них создать свои TV переменные и привязать к шаблону какой ни будь внутренней страницы, для того, что бы при щелчке по элементу слайдера, у нас открывалась новость.

Создадим чанк для нашего элемента.

news_on_main_tpl (символ "((" заменяем на две квадратные скобки)

<div class="container-006__newsblock-items-itm">
	<div class="container-006__newsblock-items-itm-title">
		<div class="container-006__newsblock-items-itm-title-image">
			<img class="container-006__newsblock-items-itm-title-image-img" src="((+tv.news_image))" alt="">
		</div>
		<div class="container-006__newsblock-items-itm-title-text">
			<p class="container-006__newsblock-items-itm-title-text-date">((+tv.news_date))</p>
			<a class="container-006__newsblock-items-itm-title-text-link" href="((~((+id))))">
			<p class="container-006__newsblock-items-itm-title-text-txt">((+longtitle))</p>
			</a>
		</div>
	</div>
	<div class="container-006__newsblock-items-itm-content">
		<p class="container-006__newsblock-items-itm-content-txt">((+introtext))</p>
	</div>
</div>

Теперь там, где нам нужно вывести блок новостей со слайдером внутри размещаем код "pdoResources".

Код (символ "((" заменяем на две квадратные скобки)

<div class="container-006">
		<div class="container-006-content">
			<div class="container-006__titleblock">
				<p class="container-006__titleblock-maintext">НОВОСТИ</p>
				<p class="container-006__titleblock-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quo dolore veritatis eum iusto obcaecati voluptates sequi illo rem tempore.</p>
				<a class="container-006__titleblock-link" href="">ВСЕ НОВОСТИ</a>
			</div>
			<div class="container-006__newsblock">
				<div id="carousel-one" class="container-006__newsblock-items owl-carousel owl-theme">
				    
				    ((!pdoResources?
        		    &parents=`361` 
        		    &depth=`0` 
        		    &limit=`5`
        		    &sortby=``
        		    &includeTVs=`news_image, news_date` 
        		    &tpl=`news_on_main_tpl`))

				</div>
			</div>
			<div class="container-006__arrowblock">
				
			</div>
		</div>
	</div>

 На всякий случай приведу css которые использовались в этом проекте. Адаптив для этого блока не привожу в примере.

CSS

.container-006 {
    background-color: #e8ede7;}
.container-006-content {
    background-color: #e8ede7;
    width: 1200px;
    margin: auto;
    display: flex;
    padding: 55px 10px 55px 10px;
    justify-content: space-between;}
.container-006__titleblock {
    width: 25%;
    display: flex;
    flex-direction: column;}
.container-006__titleblock p.container-006__titleblock-maintext {
    margin: 0 0 30px 0;
    font-family: AGForeignerBlackС;
    font-size: 25px;
    font-weight: 900;
    line-height: 1;
    color: #000000;}
.container-006__titleblock p.container-006__titleblock-text {
    margin: 0;
    font-family: Arial;
    font-size: 17px;
    line-height: 1;
    color: #000000;}
.container-006__titleblock a.container-006__titleblock-link {
    margin: 50px 0 0 0;
    font-family: Arial;
    font-size: 17px;
    line-height: 1;
    color: #000000;}
.container-006__titleblock a.container-006__titleblock-link:hover {
    color: #0f9c3e;}

.container-006__newsblock {
    position: relative;
    width: 70%;}
.container-006__newsblock-items {
    display: flex;
    justify-content: space-around;}
.container-006__newsblock-items-itm {
    margin: auto;
    padding: 10px;
    width: 380px;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    border: 3px solid #0f9c3e;}
.container-006__newsblock-items-itm-title {
    display: flex;}
.container-006__newsblock-items-itm-title-image {
    margin: 0 10px 0 0;}
.container-006__newsblock-items-itm-title-image img.container-006__newsblock-items-itm-title-image-img {
    margin: 0 10px 0 0;
    width: 130px!important;
    height: auto;}
.container-006__newsblock-items-itm-title-text {
    width: -webkit-fill-available;}
.container-006__newsblock-items-itm-title-text p.container-006__newsblock-items-itm-title-text-date {
    margin: 0;
    font-size: 15px;
    text-align: right;}
.container-006__newsblock-items-itm-title-text a.container-006__newsblock-items-itm-title-text-link {
    color: #000000;}
.container-006__newsblock-items-itm-title-text a.container-006__newsblock-items-itm-title-text-link:hover {
    color: #0f9c3e;}
.container-006__newsblock-items-itm-title-text p.container-006__newsblock-items-itm-title-text-txt {
    margin: 20px 0;
    font-size: 15px;
    line-height: 1;
    text-align: left;}
.container-006__newsblock-items-itm-content p.container-006__newsblock-items-itm-content-txt {
    margin: 0;
    line-height: 1;}
.container-006__arrowblock {
    width: 5%;}

#carousel-one div.owl-nav {
    position: absolute;
    right: -60px;
    top: 43%;
    margin-top: 0;
    text-align: end;
    -webkit-tap-highlight-color: transparent;}
#carousel-one div.owl-nav button.owl-prev {
    display: none;
    outline: none;}
#carousel-one div.owl-nav button.owl-next {
    outline: none;}
#carousel-one div.owl-nav button.owl-next:hover {
    background: transparent;
    outline: none;
    text-decoration: none;}
#carousel-one .owl-nav img.arrow {
    width: 50px;
    height: auto;}
#carousel-one .owl-nav img.arrow:hover {
    filter: drop-shadow(0px 0px 3px black);}

 

Так же с моим портфолио можно ознакомиться на любой из представленной социальной сети, на своих страницах я публикую посты о своих работах, заданиях и целях.

Для связи со мной можно воспользоваться любой социальной сетью,
или написать на почту:

С моим резюме можно ознакомиться по ссылке:

© 2020-2024 Портфолио Юдина Александра г.Пенза. Все права защищены