test manipulace s článkem

by Petr Haluza

HTML

<div class="panel-body">

<table class="slide" data-editable="" data-edit-description="Large picture" data-edit-description-cs="Velký obrázek" data-edit-id="27" class="" width="100%" cellspacing="0" cellpadding="0" border="0">
	<tbody><tr>
		<td style="padding: 10px 15px 10px 15px;" bgcolor="#ffffff" align="center">
			<table style="width: 600px;" class="stretch" cellspacing="0" cellpadding="0" border="0">
				<tbody><tr>
					<td align="center">
						<img src="https://cdn-smartemailing.cz/12399/media/letters/asm-i4-novinky/banner-do-prezentace.jpg?456b7ssj" alt="" style="display:block;" class="full" data-edit-id="28" width="600" height="336" border="0">
					</td>
				</tr>
			</tbody></table>
		</td>
	</tr>
</tbody></table><p><br></p><table data-editable="" data-edit-description="Product with image on the left" data-edit-id="29" class="" width="100%" cellspacing="0" cellpadding="0" border="0">
	<tbody><tr>
		<td style="padding: 10px 15px 10px 15px;" class="" bgcolor="#ffffff" align="center">
			<table style="width: 600px;" class="stretch" cellspacing="0" cellpadding="0" border="0">
				<tbody><tr>
					<td style="padding: 10px 20px; border: 1px solid #000000;" class="" bgcolor="#ffffff" align="center">
						<table style="width: 528px;" class="stretch" cellspacing="0" cellpadding="0" border="0" align="center">
							<tbody><tr>
								<td style="width: 238px; padding: 10px 0px 10px 0px;" class="stretch" align="left">
									<a href="https://www.i4wifi.cz/cs/249757-ubnt-unifi-switch-pro-48" target="_blank" style="text-decoration: none; text-decoration: none !important;">
										<img src="https://cdn-smartemailing.cz/12399/media/letters/asm-i4-novinky/switch-pro-48.jpg?bj7i9s76" style="display: block;" alt="" class="full" data-edit-id="33" width="216" height="216" border="0">
									</a>
								</td>
								<td style="width: 290px; padding: 10px 0px 10px 0px;" class="stretch">
									<table width="100%" cellspacing="0" cellpadding="0"...

CSS

/*
essential styles:
these make the slideshow work
*/
#slides{
	position: relative;
	height: 150px;
	padding: 0px;
	margin: 0px;
	list-style-type: none;
}

.slide{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	opacity: 0;
	z-index: 1;

	-webkit-transition: opacity 1s;
	-moz-transition: opacity 1s;
	-o-transition: opacity 1s;
	transition: opacity 1s;
}


.table{

	-webkit-transition: opacity 1s;
	-moz-transition: opacity 1s;
	-o-transition: opacity 1s;
	transition: opacity 1s;
}


.showing{
	opacity: 1;
	z-index: 2;
}



/*
non-essential styles:
just for appearance; change whatever you want
*/

.slide{
	font-size: 40px;
	padding: 40px;
	box-sizing: border-box;
	background: #333;
	color: #fff;
}

.slide:nth-of-type(1){
	background: red;
}
.slide:nth-of-type(2){
	background: orange;
}
.slide:nth-of-type(3){
	background: green;
}
.slide:nth-of-type(4){
	background: blue;
}
.slide:nth-of-type(5){
	background: purple;
}

table table { max-width: 850px;width:95% !important}

JavaScript

var slides = document.querySelectorAll('.panel-body > table');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,2000);

function nextSlide(){
	slides[currentSlide].className = 'slide';
	currentSlide = (currentSlide+1)%slides.length;
	slides[currentSlide].className = 'slide showing';
}