Слайдер с диагональной сменой фотографий

За основу был взят слайдер, найденный на codepen.io: Split-screen Slideshow

Но слайд в нем складывается из двух частей одной фотографии, что сильно усложняет использование его в CMS, не говоря уже о его создании, ведь каждое фото нужно разрезать пополам.

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

Пример:

Заголовок слайдера 1

Короткое описание слайдера
Подробнее
Заголовок слайдера 2

Описание слайдера без кнопки подробнее
Заголовок слайдера 3
Подробнее
Заголовок слайдера 4

Длинное описание слайдера, для примера с большего объема текста. Но не стоит забывать, что текст должен уместиться в его размеры.
Подробнее

HTML:

Обратите внимание: в одном слайде используется одна и таже фотография 2 раза, а количество селекторов <li class="selector"></li> должно соответствовать количеству слайдов.

<div class="slr">	
	<ul id="sls">
		<li class="sl">
			<div class="sl-partial sl-left"><img src="photo-1.jpg"/></div>
			<div class="sl-partial sl-right"><img src="photo-1.jpg"/></div>
			<div class="sl-text">
				<div class="sl-title">Заголовок слайдера</div> 
				<div class="sl-data">Описание слайдера</div> 
				<a href="#url" class="sl-read">Подробнее</a> 
			</div>   
		</li>
		<!-- Еще слайды -->
		<li class="sl">
			<div class="sl-partial sl-left"><img src="photo-2.jpg"/></div>
			<div class="sl-partial sl-right"><img src="photo-2.jpg"/></div>
			<div class="sl-text">
				<div class="sl-title">Заголовок слайдера</div> 
				<div class="sl-data">Описание слайдера</div> 
				<a href="#url" class="sl-read">Подробнее</a> 
			</div>  
		</li>
	</ul>
	<svg class="sl-btn sl-prev" viewBox="0 0 18 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
		<g transform="translate(8.500000, 8.500000) scale(-1, 1) translate(-8.500000, -8.500000)">
			<polygon class="sl-btn-pl" points="16.3746667 8.33860465 7.76133333 15.3067621 6.904 14.3175671 14.2906667 8.34246869 6.908 2.42790698 7.76 1.43613596"></polygon>
			<polygon class="sl-btn-pl-fixed" points="16.3746667 8.33860465 7.76133333 15.3067621 6.904 14.3175671 14.2906667 8.34246869 6.908 2.42790698 7.76 1.43613596"></polygon>
			<path d="M-1.48029737e-15,0.56157424 L-1.48029737e-15,16.1929159 L9.708,8.33860465 L-2.66453526e-15,0.56157424 L-1.48029737e-15,0.56157424 Z M1.33333333,3.30246869 L7.62533333,8.34246869 L1.33333333,13.4327013 L1.33333333,3.30246869 L1.33333333,3.30246869 Z"></path>
		</g>
	</svg>
	<svg class="sl-btn sl-next" viewBox="-1 0 18 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
		<g>
			<polygon class="sl-btn-pl" points="16.3746667 8.33860465 7.76133333 15.3067621 6.904 14.3175671 14.2906667 8.34246869 6.908 2.42790698 7.76 1.43613596"></polygon>
			<polygon class="sl-btn-pl-fixed" points="16.3746667 8.33860465 7.76133333 15.3067621 6.904 14.3175671 14.2906667 8.34246869 6.908 2.42790698 7.76 1.43613596"></polygon>
			<path d="M-4.58892184e-16,0.56157424 L-4.58892184e-16,16.1929159 L9.708,8.33860465 L-1.64313008e-15,0.56157424 L-4.58892184e-16,0.56157424 Z M1.33333333,3.30246869 L7.62533333,8.34246869 L1.33333333,13.4327013 L1.33333333,3.30246869 L1.33333333,3.30246869 Z"></path>
		</g>
	</svg>
	<ul class="sl-select">
		<li class="selector"></li>
		<!-- Еще селекторы -->
		<li class="selector"></li>
	</ul>
</div>

<div class="sl-title">Заголовок слайдера</div>

<div class="sl-data">Описание слайдера</div>

<a href="#url" class="sl-read">Подробнее</a>

</div>

</li>

<div class="sl-title">Заголовок слайдера</div>

<div class="sl-data">Описание слайдера</div>

<a href="#url" class="sl-read">Подробнее</a>

</div>

</li>

</ul>

</g>

</svg>

<g>

</g>

</svg>

</ul>

</div>

CSS:

.slr {
	position: relative;
	width: 100%;
	height: 400px;
	overflow: hidden;
	background-color: #3178b5;
	background-image: url('bg.png');
	background-position: center center;
	background-repeat: no-repeat;
	margin: 20px 0;
}
.slr ul {
	list-style:none;
	margin-left:0;
	padding-left:0;
}
#sls .sl {
	position: absolute;
	display: flex;
	width: 100%;
	height: 100%;
}
#sls .sl .sl-text {
	position: absolute;
	margin: 70px 30px;
	bottom: 0;
	z-index: 2;
	padding: 20px;
	background:rgba(0,0,0,0.4);
	transform: translateY(200%);
	transition: all 400ms ease-in-out;
}
#sls .sl.sl-active .sl-text {
	transform: translateY(0);
	transition-delay: 0.3s;
}
#sls .sl .sl-text .sl-title {
	font-size: 26px;
	line-height: 30px;
	color: #FFF;
	font-family: 'Roboto', sans-serif;
	text-transform: uppercase;	
	margin-bottom: 20px;
}
#sls .sl .sl-text .sl-data {
	font-size: 16px;
	line-height: 22px;
	color: #FFF;
	margin-bottom: 20px;	
}
#sls .sl .sl-text .sl-read {
	display: inline-flex;
	text-decoration: none;
	position: relative;
	font-size: 16px;
	line-height: 20px;
	padding: 8px 30px;
	color: #FFF;
	font-weight: bold;
	text-transform: uppercase; 
	font-family: 'Roboto', sans-serif;
	background: #337AB7;
	cursor: pointer; 
}
#sls .sl .sl-text .sl-read:hover,
#sls .sl .sl-text .sl-read:active,
#sls .sl .sl-text .sl-read:focus {
	color: #FFF;
}
#sls .sl .sl-text .sl-read:after,
#sls .sl .sl-text .sl-read:before {
	position: absolute;
	height: 4px;
	left: 50%;
	background: #337AB7;
	bottom: -8px;
	content: "";
	transition: all 280ms ease-in-out;
	width: 0;
}
#sls .sl .sl-text .sl-read:before {
	top: -8px;
}
#sls .sl .sl-text .sl-read:hover:after,
#sls .sl .sl-text .sl-read:hover:before,
#sls .sl .sl-text .sl-read:active:after,
#sls .sl .sl-text .sl-read:active:before,
#sls .sl .sl-text .sl-read:focus:after,
#sls .sl .sl-text .sl-read:focus:before {
	width: 100%;
	left: 0;
}
#sls .sl .sl-partial {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	transition: transform 1s ease-in-out;
}
#sls .sl .sl-partial img {
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1s ease-in-out;
}
#sls .sl .sl-left {
	top: 0;
	left: 0;
	transform: translateX(-100%);
	clip-path: polygon(0 0, 2% 0, 100% 98%, 100% 100%, 0 100%);
}
#sls .sl .sl-left img {
	top: 0;
	right: 0;
}
#sls .sl .sl-right {
	top: 0;
	right: 0;
	transform: translateX(100%);
	clip-path: polygon(0 2%, 0 0, 100% 0, 100% 100%, 98% 100%);
}
#sls .sl .sl-right img {
	top: 0;
	left: 0;
}
#sls .sl.sl-active .sl-partial, 
#sls .sl.sl-active .sl-partial img {
	transform: translateX(0);
}
.slr .sl-btn {
	position: absolute;
	top: 40px;
	right: 140px;
	z-index: 100;
	height: 50px;
	width: 50px;
	z-index: 100;
	cursor: pointer;
	overflow: visible;
}
.slr .sl-btn.sl-next {
	right: 50px;	
}
.slr .sl-btn polygon, 
.slr .sl-btn path {
	transition: all 0.5s cubic-bezier(0.2, 1, 0.3, 1);
	fill: #FFF;
}
.slr .sl-btn:hover polygon, 
.slr .sl-btn:hover path {
	transition: all 1s cubic-bezier(0.2, 1, 0.3, 1);
	fill: #FFF;
}
.slr .sl-btn:hover .sl-btn-pl {
	animation: sl-btn-anim 1s cubic-bezier(0.2, 1, 0.3, 1) infinite;
}
.slr .sl-btn:hover .sl-btn-pl-fixed {
	animation: sl-btn-fixed-anim 1s cubic-bezier(0.2, 1, 0.3, 1) infinite;
}
.sl-select {
	position: absolute;
	bottom: 20px;
	right: 40px;
	z-index: 100;
	display: flex;
}
.sl-select li {
	position: relative;
	cursor: pointer;
	margin: 0 8px;
}
.sl-select .selector {
	height: 24px;
	width: 24px;
	border: 2px solid white;
	background-color: transparent;
	transition: background-color 0.5s ease-in-out;
}
.sl-select .selector.sl-current {
	background-color: #BFE2FF;
}
@keyframes sl-btn-anim {
	0% {
		opacity: 1;
		transform: translateX(0);
	}
	5% {
		transform: translateX(-0.1rem);
	}
	100% {
		transform: translateX(1rem);
		opacity: 0;
	}
}
@keyframes sl-btn-fixed-anim {
	5% {
		opacity: 0;
	}
	20% {
		opacity: 0.4;
	}
	100% {
		opacity: 1;
	}
}	
@media screen and (max-width:767px) {
	#sls .sl .sl-text {
		position: absolute;
		width: 100%;
		margin: 70px 0;
		bottom: 0;
		z-index: 2;
		padding: 20px;
	}
	#sls .sl .sl-text .sl-title {
		font-size: 22px;
		line-height: 26px;
		margin-bottom: 10px;
	}
	#sls .sl .sl-text .sl-data {
		font-size: 13px;
		line-height: 18px;
		margin-bottom: 10px;	
	}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

.slr {

position: relative;

width: 100%;

height: 400px;

overflow: hidden;

background-color: #3178b5;

background-image: url('bg.png');

background-position: center center;

background-repeat: no-repeat;

margin: 20px 0;

}

.slr ul {

list-style:none;

margin-left:0;

padding-left:0;

}

#sls .sl {

position: absolute;

display: flex;

width: 100%;

height: 100%;

}

#sls .sl .sl-text {

position: absolute;

margin: 70px 30px;

bottom: 0;

z-index: 2;

padding: 20px;

background:rgba(0,0,0,0.4);

transform: translateY(200%);

transition: all 400ms ease-in-out;

}

#sls .sl.sl-active .sl-text {

transform: translateY(0);

transition-delay: 0.3s;

}

#sls .sl .sl-text .sl-title {

font-size: 26px;

line-height: 30px;

color: #FFF;

font-family: 'Roboto', sans-serif;

text-transform: uppercase;

margin-bottom: 20px;

}

#sls .sl .sl-text .sl-data {

font-size: 16px;

line-height: 22px;

color: #FFF;

margin-bottom: 20px;

}

#sls .sl .sl-text .sl-read {

display: inline-flex;

text-decoration: none;

position: relative;

font-size: 16px;

line-height: 20px;

padding: 8px 30px;

color: #FFF;

font-weight: bold;

text-transform: uppercase;

font-family: 'Roboto', sans-serif;

background: #337AB7;

cursor: pointer;

}

#sls .sl .sl-text .sl-read:hover,

#sls .sl .sl-text .sl-read:active,

#sls .sl .sl-text .sl-read:focus {

color: #FFF;

}

#sls .sl .sl-text .sl-read:after,

#sls .sl .sl-text .sl-read:before {

position: absolute;

height: 4px;

left: 50%;

background: #337AB7;

bottom: -8px;

content: "";

transition: all 280ms ease-in-out;

width: 0;

}

#sls .sl .sl-text .sl-read:before {

top: -8px;

}

#sls .sl .sl-text .sl-read:hover:after,

#sls .sl .sl-text .sl-read:hover:before,

#sls .sl .sl-text .sl-read:active:after,

#sls .sl .sl-text .sl-read:active:before,

#sls .sl .sl-text .sl-read:focus:after,

#sls .sl .sl-text .sl-read:focus:before {

width: 100%;

left: 0;

}

#sls .sl .sl-partial {

position: absolute;

width: 100%;

height: 100%;

overflow: hidden;

transition: transform 1s ease-in-out;

}

#sls .sl .sl-partial img {

position: absolute;

z-index: 1;

width: 100%;

height: 100%;

object-fit: cover;

transition: transform 1s ease-in-out;

}

#sls .sl .sl-left {

top: 0;

left: 0;

transform: translateX(-100%);

clip-path: polygon(0 0, 2% 0, 100% 98%, 100% 100%, 0 100%);

}

#sls .sl .sl-left img {

top: 0;

right: 0;

}

#sls .sl .sl-right {

top: 0;

right: 0;

transform: translateX(100%);

clip-path: polygon(0 2%, 0 0, 100% 0, 100% 100%, 98% 100%);

}

#sls .sl .sl-right img {

top: 0;

left: 0;

}

#sls .sl.sl-active .sl-partial,

#sls .sl.sl-active .sl-partial img {

transform: translateX(0);

}

.slr .sl-btn {

position: absolute;

top: 40px;

right: 140px;

z-index: 100;

height: 50px;

width: 50px;

z-index: 100;

cursor: pointer;

overflow: visible;

}

.slr .sl-btn.sl-next {

right: 50px;

}

.slr .sl-btn polygon,

.slr .sl-btn path {

transition: all 0.5s cubic-bezier(0.2, 1, 0.3, 1);

fill: #FFF;

}

.slr .sl-btn:hover polygon,

.slr .sl-btn:hover path {

transition: all 1s cubic-bezier(0.2, 1, 0.3, 1);

fill: #FFF;

}

.slr .sl-btn:hover .sl-btn-pl {

animation: sl-btn-anim 1s cubic-bezier(0.2, 1, 0.3, 1) infinite;

}

.slr .sl-btn:hover .sl-btn-pl-fixed {

animation: sl-btn-fixed-anim 1s cubic-bezier(0.2, 1, 0.3, 1) infinite;

}

.sl-select {

position: absolute;

bottom: 20px;

right: 40px;

z-index: 100;

display: flex;

}

.sl-select li {

position: relative;

cursor: pointer;

margin: 0 8px;

}

.sl-select .selector {

height: 24px;

width: 24px;

border: 2px solid white;

background-color: transparent;

transition: background-color 0.5s ease-in-out;

}

.sl-select .selector.sl-current {

background-color: #BFE2FF;

}

@keyframes sl-btn-anim {

0% {

opacity: 1;

transform: translateX(0);

}

5% {

transform: translateX(-0.1rem);

}

100% {

transform: translateX(1rem);

opacity: 0;

}

@keyframes sl-btn-fixed-anim {

5% {

opacity: 0;

}

20% {

opacity: 0.4;

}

100% {

opacity: 1;

}

@media screen and (max-width:767px) {

#sls .sl .sl-text {

position: absolute;

width: 100%;

margin: 70px 0;

bottom: 0;

z-index: 2;

padding: 20px;

}

#sls .sl .sl-text .sl-title {

font-size: 22px;

line-height: 26px;

margin-bottom: 10px;

}

#sls .sl .sl-text .sl-data {

font-size: 13px;

line-height: 18px;

margin-bottom: 10px;

}

jQuery:

let $sls, interval, $selectors, $btns, currentIndex, nextIndex;
let cycle = index => {
	let $currentSlide, $nextSlide, $currentSelector, $nextSelector;
	nextIndex = index !== undefined ? index : nextIndex;
	$currentSlide = $($sls.get(currentIndex));
	$currentSelector = $($selectors.get(currentIndex));
	$nextSlide = $($sls.get(nextIndex));
	$nextSelector = $($selectors.get(nextIndex));
	$currentSlide.removeClass("sl-active").css("z-index", "0");
	$nextSlide.addClass("sl-active").css("z-index", "1");
	$currentSelector.removeClass("sl-current");
	$nextSelector.addClass("sl-current");
	currentIndex = index !== undefined
	? nextIndex
	: currentIndex < $sls.length - 1 
	? currentIndex + 1 
	: 0;	
	nextIndex = currentIndex + 1 < $sls.length ? currentIndex + 1 : 0;
};
$(() => {
	currentIndex = 0;
	nextIndex = 1;
	$sls = $(".sl");
	$selectors = $(".selector");
	$btns = $(".sl-btn");
	$sls.first().addClass("sl-active");
	$selectors.first().addClass("sl-current");
	interval = window.setInterval(cycle, 8000);
	$selectors.on("click", e => {
		let target = $selectors.index(e.target);
		if (target !== currentIndex) {
			window.clearInterval(interval);
			cycle(target);
			interval = window.setInterval(cycle, 8000);
		}
	});
	$btns.on("click", e => {
		window.clearInterval(interval);
		if ($(e.target).hasClass("sl-prev")) {
			let target = currentIndex > 0 ? currentIndex - 1 : $sls.length - 1;
			cycle(target);
			} else if ($(e.target).hasClass("sl-next")) {
			cycle();
		}
		interval = window.setInterval(cycle, 8000);
	});
});

let $sls, interval, $selectors, $btns, currentIndex, nextIndex;

let cycle = index => {

let $currentSlide, $nextSlide, $currentSelector, $nextSelector;

nextIndex = index !== undefined ? index : nextIndex;

$currentSlide = $($sls.get(currentIndex));

$currentSelector = $($selectors.get(currentIndex));

$nextSlide = $($sls.get(nextIndex));

$nextSelector = $($selectors.get(nextIndex));

$currentSlide.removeClass("sl-active").css("z-index", "0");

$nextSlide.addClass("sl-active").css("z-index", "1");

$currentSelector.removeClass("sl-current");

$nextSelector.addClass("sl-current");

currentIndex = index !== undefined

? nextIndex

: currentIndex < $sls.length - 1

? currentIndex + 1

: 0;

nextIndex = currentIndex + 1 < $sls.length ? currentIndex + 1 : 0;

};

$(() => {

currentIndex = 0;

nextIndex = 1;

$sls = $(".sl");

$selectors = $(".selector");

$btns = $(".sl-btn");

$sls.first().addClass("sl-active");

$selectors.first().addClass("sl-current");

interval = window.setInterval(cycle, 8000);

$selectors.on("click", e => {

let target = $selectors.index(e.target);

if (target !== currentIndex) {

window.clearInterval(interval);

cycle(target);

interval = window.setInterval(cycle, 8000);

}

});

$btns.on("click", e => {

window.clearInterval(interval);

if ($(e.target).hasClass("sl-prev")) {

let target = currentIndex > 0 ? currentIndex - 1 : $sls.length - 1;

cycle(target);

} else if ($(e.target).hasClass("sl-next")) {

cycle();

}

interval = window.setInterval(cycle, 8000);

});

Установка на HostCMS:

Создаем информационную систему и в ней два дополнительных свойства типа "Строка" с названиями XML-тегов url (для ссылки "подробнее") и urltext (для названия этой ссылки)

Создаем XSL-шаблон с названием "Слайдер" и кодом:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE xsl:stylesheet>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:hostcms="http://www.hostcms.ru/"
exclude-result-prefixes="hostcms">
	<xsl:output xmlns="http://www.w3.org/TR/xhtml1/strict" doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" encoding="utf-8" indent="yes" method="html" omit-xml-declaration="no" version="1.0" media-type="text/xml"/>
	<xsl:template match="/">
		<xsl:apply-templates select="/informationsystem"/>
	</xsl:template>
	<xsl:template match="/informationsystem">
		<div class="slr">
			<ul id="sls">
				<xsl:apply-templates select="informationsystem_item"/>
			</ul>
			<svg class="sl-btn sl-prev" viewBox="0 0 18 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
				<g transform="translate(8.500000, 8.500000) scale(-1, 1) translate(-8.500000, -8.500000)">
					<polygon class="sl-btn-pl" points="16.3746667 8.33860465 7.76133333 15.3067621 6.904 14.3175671 14.2906667 8.34246869 6.908 2.42790698 7.76 1.43613596"></polygon>
					<polygon class="sl-btn-pl-fixed" points="16.3746667 8.33860465 7.76133333 15.3067621 6.904 14.3175671 14.2906667 8.34246869 6.908 2.42790698 7.76 1.43613596"></polygon>
					<path d="M-1.48029737e-15,0.56157424 L-1.48029737e-15,16.1929159 L9.708,8.33860465 L-2.66453526e-15,0.56157424 L-1.48029737e-15,0.56157424 Z M1.33333333,3.30246869 L7.62533333,8.34246869 L1.33333333,13.4327013 L1.33333333,3.30246869 L1.33333333,3.30246869 Z"></path>
				</g>
			</svg>
			<svg class="sl-btn sl-next" viewBox="-1 0 18 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
				<g>
					<polygon class="sl-btn-pl" points="16.3746667 8.33860465 7.76133333 15.3067621 6.904 14.3175671 14.2906667 8.34246869 6.908 2.42790698 7.76 1.43613596"></polygon>
					<polygon class="sl-btn-pl-fixed" points="16.3746667 8.33860465 7.76133333 15.3067621 6.904 14.3175671 14.2906667 8.34246869 6.908 2.42790698 7.76 1.43613596"></polygon>
					<path d="M-4.58892184e-16,0.56157424 L-4.58892184e-16,16.1929159 L9.708,8.33860465 L-1.64313008e-15,0.56157424 L-4.58892184e-16,0.56157424 Z M1.33333333,3.30246869 L7.62533333,8.34246869 L1.33333333,13.4327013 L1.33333333,3.30246869 L1.33333333,3.30246869 Z"></path>
				</g>
			</svg>
			<ul class="sl-select">
				<xsl:apply-templates select="informationsystem_item" mode="det" />
			</ul>
		</div>
	</xsl:template>
	<xsl:template match="informationsystem_item">
		<xsl:if test="image_large!=''">
			<li class="sl">
				<div class="sl-partial sl-left"><img src="{dir}{image_large}"/></div>
				<div class="sl-partial sl-right"><img src="{dir}{image_large}"/></div>
				<div class="sl-text">
					<xsl:if test="name != ''">
						<div class="sl-title"><xsl:value-of select="name"/></div>
					</xsl:if>
					<xsl:if test="description != ''">
						<div class="sl-data"><xsl:value-of disable-output-escaping="yes" select="description"/></div>
					</xsl:if>
					<xsl:if test="property_value[tag_name='url']/value != ''">
					<a href="{property_value[tag_name='url']/value}" class="sl-read"><xsl:value-of select="property_value[tag_name='urltext']/value"/></a>
				</xsl:if>
			</div>
		</li>
	</xsl:if>
</xsl:template>
<xsl:template match="informationsystem_item" mode="det">
	<xsl:if test="image_large!=''">
		<li class="selector"></li>
	</xsl:if>
</xsl:template>
</xsl:stylesheet>

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE xsl:stylesheet>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform"

xmlns:hostcms="http://www.hostcms.ru/"

exclude-result-prefixes="hostcms">

<xsl:output xmlns="http://www.w3.org/TR/xhtml1/strict" doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" encoding="utf-8" indent="yes" method="html" omit-xml-declaration="no" version="1.0" media-type="text/xml"/>

<xsl:template match="/">

<xsl:apply-templates select="/informationsystem"/>

</xsl:template>

<xsl:template match="/informationsystem">

<xsl:apply-templates select="informationsystem_item"/>

</ul>

</g>

</svg>

<g>

</g>

</svg>

<xsl:apply-templates select="informationsystem_item" mode="det" />

</ul>

</div>

</xsl:template>

<xsl:template match="informationsystem_item">

<xsl:if test="image_large!=''">

<xsl:if test="name != ''">

</xsl:if>

<xsl:if test="description != ''">

</xsl:if>

<xsl:if test="property_value[tag_name='url']/value != ''">

</xsl:if>

</div>

</li>

</xsl:if>

</xsl:template>

<xsl:template match="informationsystem_item" mode="det">

<xsl:if test="image_large!=''">

</xsl:if>

</xsl:template>

</xsl:stylesheet>

Подключаем этот шаблон в макет:

<?php	
	if (Core::moduleIsActive('informationsystem'))
	{
		$Informationsystem_Controller_Show = new Informationsystem_Controller_Show(
		Core_Entity::factory('Informationsystem', 15) //Номер информационной системы
		);
		$Informationsystem_Controller_Show
		->xsl(
		Core_Entity::factory('Xsl')->getByName('Слайдер')
		)
		->itemsProperties(TRUE)				
		->limit(100)
		->show();
	}
?>

<?php

if (Core::moduleIsActive('informationsystem'))

{

$Informationsystem_Controller_Show = new Informationsystem_Controller_Show(

Core_Entity::factory('Informationsystem', 15) //Номер информационной системы

);

$Informationsystem_Controller_Show

->xsl(

Core_Entity::factory('Xsl')->getByName('Слайдер')

)

->itemsProperties(TRUE)

->limit(100)

->show();

}

Далее в информационную систему добавляем сам слайдер, в котором:

Название информационного элемента - это заголовок слайдера
Описание информационного элемента - это описание под его заголовком
И при необходимости, в дополнительных полях можно указать название кнопки и ссылку, куда по ней переходить.

Автор фотографий, используемых в слайдере: kellepics

Владислав: 15.03.2023 в 01:04

Подскажите пожалуйста, не работает переключатель (стрелки) как исправить?

Ответить
Екатерина: 06.02.2023 в 17:05

Спасибо большое за подробную инструкцию! Использую в варианте для hostcms - при этом не работают стрелки, в чем может быть дело?

Ответить
- Alexander: 07.02.2023 в 07:05
  
  Дайте ссылку на результат
  
  Ответить
Алекс: 17.01.2023 в 21:34

А будет пример для owl carousel?

Ответить
Михаил: 24.06.2022 в 19:38

Здравствуйте!
Подскажите, а как остановить автоматическую прокрутку?

Ответить
- Alexander: 24.06.2022 в 20:04
  
  Удалить все строки, где присутствует interval, кроме первой, там просто можно удалить переменную.
  А если не убрать а остановить, например при заходе мыши на слайдер, то добавлять функции на вход и выход мышки.
  
  Ответить

Пример:

HTML:

CSS:

jQuery:

Установка на HostCMS:

Смотрите также:

Добавить комментарий:

Комментарии: