به ترتیب میگم
پوشه owl-carousel رو کپی کن توی پوشه قالبت... (از سایتی که دادم دانلود کن و پوشه ای با همین نام رو در مسیر قالبت بریز)
فایل header.php رو باز کن
اینا رو بزار داخلش...
(قبل از تگ wp_head بزاری)
<link href="<?php bloginfo('template_directory') ?>/owl-carousel/owl.carousel.css" rel="stylesheet">
<link href="<?php bloginfo('template_directory') ?>/owl-carousel/owl.theme.css" rel="stylesheet">
<script src="<?php bloginfo('template_directory') ?>/owl-carousel/owl.carousel.js"></script>
فایل footer.php رو باز کن
اینا رو بزار داخلش... (قبل از تگ wp_footer بزاری)
<script>
$(document).ready(function() {
$("#customerlist ").owlCarousel({
autoPlay: 3000,
items : 8,
itemsDesktop : [1199,3],
itemsDesktopSmall : [979,3]
});
});
</script>
در کد بالا من میگم 8 مورد رو نمایش بده... در هر بار نمایش...(میتونی تغییر بدی اما پیشنهاد نمیشه زیاد کمش کنی)
کد های زیر رو درون style.css قالبت وارد کن (در انتهای کد ها بزار)
#customerlist {direction:ltr;}
#customerlist .item{
margin: 3px;
}
حالا در جای مناسب میتونی لیست مشتری هات رو نمایش بدی. با استفاده از کد زیر:
<div id="customerlist" class="owl-carousel">
<div class="item"><img src="<?php bloginfo('template_directory') ?>/assets/1.jpg" alt="Owl Image"></div>
<div class="item"><img src="<?php bloginfo('template_directory') ?>/assets/2.jpg" alt="Owl Image"></div>
<div class="item"><img src="<?php bloginfo('template_directory') ?>/assets/3.jpg" alt="Owl Image"></div>
<div class="item"><img src="<?php bloginfo('template_directory') ?>/assets/4.jpg" alt="Owl Image"></div>
<div class="item"><img src="<?php bloginfo('template_directory') ?>/assets/5.jpg" alt="Owl Image"></div>
<div class="item"><img src="<?php bloginfo('template_directory') ?>/assets/6.jpg" alt="Owl Image"></div>
<div class="item"><img src="<?php bloginfo('template_directory') ?>/assets/7.jpg" alt="Owl Image"></div>
<div class="item"><img src="<?php bloginfo('template_directory') ?>/assets/8.jpg" alt="Owl Image"></div>
<div class="item"><img src="<?php bloginfo('template_directory') ?>/assets/9.jpg" alt="Owl Image"></div>
<div class="item"><img src="<?php bloginfo('template_directory') ?>/assets/10.jpg" alt="Owl Image"></div>
<div class="item"><img src="<?php bloginfo('template_directory') ?>/assets/11.jpg" alt="Owl Image"></div>
<div class="item"><img src="<?php bloginfo('template_directory') ?>/assets/12.jpg" alt="Owl Image"></div>
<div class="item"><img src="<?php bloginfo('template_directory') ?>/assets/13.jpg" alt="Owl Image"></div>
</div>
نکته: تصاویر خودت رو جایگزین کن...