x
x
x
x
...
HTML |
---|
<!-- End Admin section --> |
HTML |
---|
<style>
.table-wrap p {
color: white;
text-align: left;
font-size: 14px;
}
.table-wrap span {
margin-bottom: 15px;
}
input#i_image {
margin-top: 10px;
}
.carousel-container {
display: flex;
align-items: center;
}
span.carousel-arrow.carousel-next {
margin-left: 5px;
}
span.carousel-arrow.carousel-previous {
margin-right: 5px;
}
.arrow-right {
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid white;
z-index: 12;
margin: 25px 0 0 -24px;
transform: rotate(180deg);
}
</style>
<p class="header"> Announcements </p>
<div class="carousel-container">
<span class="carousel-arrow carousel-previous">◀</span> |
ConfiForms CleanView | ||||
---|---|---|---|---|
| ||||
HTML |
---|
<span class="carousel-arrow carousel-next">▶</span>
</div>
<script>
let anouncementNo = document.getElementsByClassName("announcementcard").length
if(anouncementNo < 2){
$('.carousel-next').hide()
$('.carousel-previous').hide()
}
$('.carousel-previous').click(function() {
if(slideIndex -1 === 0){
currentSlide(anouncementNo)
}
else{
currentSlide(slideIndex - 1)
}
});
$('.carousel-next').click(function() {
if(slideIndex + 1 > anouncementNo){
currentSlide(1)
}
else{
currentSlide(slideIndex + 1)
}
});
let div = document.getElementsByClassName('carousel-container')[0]
div.addEventListener('touchstart', handleTouchStart, false);
div.addEventListener('touchmove', handleTouchMove, false);
var xDown = null;
var yDown = null;
function getTouches(evt) {
return evt.touches || // browser API
evt.originalEvent.touches; // jQuery
}
function handleTouchStart(evt) {
console.log('touched')
const firstTouch = getTouches(evt)[0];
xDown = firstTouch.clientX;
yDown = firstTouch.clientY;
};
function handleTouchMove(evt) {
if ( ! xDown || ! yDown ) {
return;
}
var xUp = evt.touches[0].clientX;
var yUp = evt.touches[0].clientY;
var xDiff = xDown - xUp;
var yDiff = yDown - yUp;
if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/
if ( xDiff > 0 ) {
/* left swipe */
console.log('swiped left')
if(slideIndex + 1 > anouncementNo){
currentSlide(1)
}
else{
currentSlide(slideIndex + 1)
}
} else {
/* right swipe */
console.log('swiped right')
if(slideIndex -1 === 0){
currentSlide(anouncementNo)
}
else{
currentSlide(slideIndex - 1)
}
}
} else {
if ( yDiff > 0 ) {
/* up swipe */
console.log('swiped up')
} else {
/* down swipe */
console.log('swiped down')
}
}
/* reset values */
xDown = null;
yDown = null;
};</script> |
HTML |
---|
<!-- Old carousel macro here --> |
...