Logo
Populer:
  1. Beranda
  2. Post
  3. Menampilkan konten atau komponen video sebagai slider

Menampilkan konten atau komponen video sebagai slider

Gambar 282. Display content or component video as slider

Untuk Menampilkan konten atau komponen video sebagai slider sebenarnya cukup mudah, yang perlu kita lakukan hanya merubah snippet gambar menjadi snippet video.

Sebagai contoh dalam artikel ini, video ditampilkan sebagai slider pada tema chingsy. Langkah-langkahnya adalah:

  1. Gantikan snippet slider dengan snippet video
  2. Rubah snippet gambar dengan snippet video dalam format iframe
  3. Rubah ancor link dengan url video
  4. Ganti snippet judul slider dengan judul video
  5. Hapus snippet kategori slider
  6. Rubah data-thumbs="true" menjadi data-thumbs="false"
  7. Hapus data-thumbs="value"

Perhatikan contoh script yang diambil dari tema chingsy berikut:

<div class="container clearfix">
	<div class="row">
		<div class="col-md-8 bottommargin">
			<div class="col_full bottommargin-lg">
				<div class="fslider flex-thumb-grid grid-6" data-speed="2000" data-pause="8000" data-animation="slide" data-arrows="true" data-thumbs="false">
					<div class="flexslider">
						<div class="slider-wrap">
							<?php
								$videos = $this->video()->getVideo('6', 'id_video ASC'); <!-- Hapus ", $this->e($page)" dari snippet video ini -->
								foreach($videos as $video){
							?>
							<div class="slide">
								<a href="<?=$video['url'];?>">
									<iframe src="<?=$video['url'];?>" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
									<div class="overlay">
										<div class="text-overlay">
											<div class="text-overlay-title"><h3><?=$video['title'];?></h3></div>
										</div>
									</div>
								</a>
							</div>
						<?php } ?>
						</div>
					</div>
				</div>
			</div>
			
			<!-- Disini adalah script konten lainya -->
			
		</div>
		
		<div class="col-md-4">
			<!-- Insert Sidebar -->
			<?=$this->insert('sidebar');?>
		</div>
		
	</div>
</div>

3
0
PrevPost
NexPost
Post Terkait
Membuat Video Lightbox

Membuat Video Lightbox

Membuat Video Lightbox Berawal dari keinginan saya untuk kembali menyediakan video tutorial berupa video di blog ini, lalu muncul keinginan untuk...

Author

Administrator
Super Administrator
12 Februari 2018

Hey..... Apa kabar? Semua artikel dan layanan yang kami sediakan di sini semata-mata untuk kepentingan pengguna dan klien. Jadi jika Anda merasa membutuhkan pelayanan kami silahkan jangan ragu untuk menghubungi. Kami juga bersedia untuk melayani konsultasi online melalui media sosial, melalui komentar dan melalui halaman testimonial yang telah kami sediakan. Selain itu Anda juga dapat menggunakan kontak form yang tersedia.

Jika apa yang anda dapatkan dari situs ini bermanfaat, silahkan dukung dengan like dan share . Terimakasih telah berkunjung, silahkan kembali kapanpun anda merasa membutuhkan layanan yang kami sediakan.

Status Akun Iklan 11 Juni 2024

Saya sampaikan bahwa status akun iklan sudah saya cek dan saya kelola. Sehingga pagi ini siap untuk di jalankan.

Abaikan notifikasi/tanda yang ada; Dibatasi anggaran, merah, kuning, apapun itu mohon di abaikan. Saya sudah pertimbangkan dan sesuaikan di masing-masing akun. Pagi ini, pukul 04.45 WIB saya baru selesai periksa dan setting semua akun. Sehingga tidak ada lagi yang perlu di tanyakan. Silahkan jalankan iklan.
Ingin berbagi dengan multibisnisindo dan memberikan kontribusi....? Tulis pengalamanmu Di Sini

Terimakasih
JOPanda

3 Komentar

edison sinaga
edison sinaga
13 Feb 2018 02:43:am

Saya praktekan tp ada pesan spt ini bang Admin....sy coba di localhost


Warning: Missing argument 3 for Video::getVideo(), called in C:\xampp\htdocs\PopojiCMS-Griya\po-content\themes\corsaracer\pages.php on line 11 and defined in C:\xampp\htdocs\PopojiCMS-Griya\po-content\widget\video\video.php on line 76

Notice: Undefined variable: page in C:\xampp\htdocs\PopojiCMS-Griya\po-content\widget\video\video.phpon line 78

Yohanes Guntur
Yohanes Guntur
14 Feb 2018 08:09:am

Silahkan custom script berikut ini:


<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

* {box-sizing: border-box}

body {font-family: Verdana, sans-serif; margin:0}

.mySlides {display: none}

iframe {vertical-align: middle;}



/* Slideshow container */

.slideshow-container {

  max-width: 1000px;

  position: relative;

  margin: auto;

}



/* Next & previous buttons */

.prev, .next {

  cursor: pointer;

  position: absolute;

  top: 50%;

  width: auto;

  padding: 16px;

  margin-top: -22px;

  color: white;

  font-weight: bold;

  font-size: 18px;

  transition: 0.6s ease;

  border-radius: 0 3px 3px 0;

}



/* Position the "next button" to the right */

.next {

  right: 0;

  border-radius: 3px 0 0 3px;

}



/* On hover, add a black background color with a little bit see-through */

.prev:hover, .next:hover {

  background-color: rgba(0,0,0,0.8);

}



/* Caption text */

.text {

  color: #f2f2f2;

  font-size: 15px;

  padding: 8px 12px;

  position: absolute;

  bottom: 8px;

  width: 100%;

  text-align: center;

}



/* Number text (1/3 etc) */

.numbertext {

  color: #f2f2f2;

  font-size: 12px;

  padding: 8px 12px;

  position: absolute;

  top: 0;

}



/* The dots/bullets/indicators */

.dot {

  cursor: pointer;

  height: 15px;

  width: 15px;

  margin: 0 2px;

  background-color: #bbb;

  border-radius: 50%;

  display: inline-block;

  transition: background-color 0.6s ease;

}



.active, .dot:hover {

  background-color: #717171;

}



/* Fading animation */

.fade {

  -webkit-animation-name: fade;

  -webkit-animation-duration: 1.5s;

  animation-name: fade;

  animation-duration: 1.5s;

}



@-webkit-keyframes fade {

  from {opacity: .4} 

  to {opacity: 1}

}



@keyframes fade {

  from {opacity: .4} 

  to {opacity: 1}

}



/* On smaller screens, decrease text size */

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

  .prev, .next,.text {font-size: 11px}

}

</style>

</head>

<body>



<div class="slideshow-container">



<div class="mySlides fade">

  <div class="numbertext">1 / 3</div> <iframe width="420" height="315"

src="https://www.youtube.com/embed/tgbNymZ7vqY">

</iframe> 

  <div class="text">Caption Text</div>

</div>



<div class="mySlides fade">

  <div class="numbertext">2 / 3</div> <iframe width="420" height="315"

src="https://www.youtube.com/embed/GHEUsGhUtgg?list=PL4AA0C82892422E7F">

</iframe> 

  <div class="text">Caption Two</div>

</div>



<div class="mySlides fade">

  <div class="numbertext">3 / 3</div> <iframe width="420" height="315"

src="https://www.youtube.com/embed/tgbNymZ7vqY">

</iframe> 

  <div class="text">Caption Three</div>

</div>



<a class="prev" onclick="plusSlides(-1)">&#10094;</a>

<a class="next" onclick="plusSlides(1)">&#10095;</a>



</div>

<br>



<div style="text-align:center">

  <span class="dot" onclick="currentSlide(1)"></span> 

  <span class="dot" onclick="currentSlide(2)"></span> 

  <span class="dot" onclick="currentSlide(3)"></span> 

</div>



<script>

var slideIndex = 1;

showSlides(slideIndex);



function plusSlides(n) {

  showSlides(slideIndex += n);

}



function currentSlide(n) {

  showSlides(slideIndex = n);

}



function showSlides(n) {

  var i;

  var slides = document.getElementsByClassName("mySlides");

  var dots = document.getElementsByClassName("dot");

  if (n > slides.length) {slideIndex = 1}    

  if (n < 1) {slideIndex = slides.length}

  for (i = 0; i < slides.length; i++) {

      slides[i].style.display = "none";  

  }

  for (i = 0; i < dots.length; i++) {

      dots[i].className = dots[i].className.replace(" active", "");

  }

  slides[slideIndex-1].style.display = "block";  

  dots[slideIndex-1].className += " active";

}

</script>



</body>

</html>

Mudah-mudahan berhasil, saya sudah coba dan dapat bekerja dengan baik.......coolcoolcool

Yohanes Guntur
Yohanes Guntur
13 Feb 2018 05:34:am
<?php

	$limit = '6';

	$videos = $this->pocore()->call->podb->from('video', 'id_video ASC')->fetchAll();

	foreach($videos as $video) {

?>