Dokumentasi Pramuka Peduli Tahap 1

document.addEventListener(“DOMContentLoaded”, function(event) {
jQuery( ‘#slider-pro-3-1143’ ).sliderPro({
//width
width: “100%”,

//height
height: 500,

//autoplay
autoplay: true,
autoplayOnHover: ‘none’,
autoplayDelay: 5000,

arrows: true,
buttons: true,
smallSize: 500,
mediumSize: 1000,
largeSize: 3000,
fade: true,

//thumbnail
thumbnailArrows: true,
thumbnailWidth: 120,
thumbnailHeight: 120,
thumbnailsPosition: ‘bottom’,
centerImage: true,
imageScaleMode: ‘cover’,
allowScaleUp: true,
startSlide: 0,
loop: true,
slideDistance: 5,
autoplayDirection: ‘normal’,
touchSwipe: true,
fullScreen: true,
});
});

/* Layout 3 */
/* border */
#slider-pro-3-1143 .sp-selected-thumbnail {
border: 4px solid #000000;
}

/* font + color */
.title-in {
font-family: Arial !important;
color: #FFFFFF !important;
background-color: #000000 !important;
opacity: 0.7 !important;
}
.desc-in {
font-family: Arial !important;
color: #FFFFFF !important;
background-color: #00000 !important;
opacity: 0.7 !important;
}

/* bullets color */
.sp-button {
border: 2px solid #000000 !important;
}
.sp-selected-button {
background-color: #000000 !important;
}

/* pointer color – bottom */
.sp-selected-thumbnail::before {
border-bottom: 5px solid #000000 !important;
}
.sp-selected-thumbnail::after {
border-bottom: 13px solid #000000 !important;
}

/* pointer color – top */

/* full screen icon */
.sp-full-screen-button::before {
color: #FFFFFF !important;
}

/* hover navigation icon color */
.sp-next-arrow::after, .sp-next-arrow::before {
background-color: #FFFFFF !important;
}
.sp-previous-arrow::after, .sp-previous-arrow::before {
background-color: #FFFFFF !important;
}

#slider-pro-3-1143 .title-in {
color: #FFFFFF !important;
font-weight: bolder;
text-align: center;
}

#slider-pro-3-1143 .title-in-bg {
background: rgba(255, 255, 255, 0.7); !important;
white-space: unset !important;
max-width: 90%;
min-width: 40%;
transform: initial !important;
-webkit-transform: initial !important;
font-size: 14px !important;
}

#slider-pro-3-1143 .desc-in {
color: #FFFFFF !important;
text-align: center;
}
#slider-pro-3-1143 .desc-in-bg {
background: rgba(#00000, 0.7) !important;
white-space: unset !important;
width: 80% !important;
min-width: 30%;
transform: initial !important;
-webkit-transform: initial !important;
font-size: 13px !important;
}

@media (max-width: 640px) {
#slider-pro-3-1143 .hide-small-screen {
display: none;
}
}

@media (max-width: 860px) {
#slider-pro-3-1143 .sp-layer {
font-size: 18px;
}

#slider-pro-3-1143 .hide-medium-screen {
display: none;
}
}
.slides-not-found {
background-color: #a92929;
border-radius: 5px;
color: #fff;
font-family: initial;
text-align: center;
padding:12px;
}
/* Custom CSS */