x x x
x

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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
formNamedashboardannouncementspremium
sortcreated DESC




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

-->

...