ช่วยด้วย!!!! Slider ทำงานไม่สมบูรณ์ wp +1 สำหรับคนช่วยแก้ครับ

[narupot]

สไลด์หน้า homepage สไลต์ไปอันสุดท้ายแล้วมึดไปเลยมันไม่ลูปมาอันแรกตามภาพครับ
รบกวนขั้นเทพเกี่ยวกับสคริปช่วยหน่อยครับ


ไฟล์ slider.php

โค้ด เลือก ขยาย

case 'style-bigone' :
$args = array(
'posts_per_page' => 5 ,
'offset' => 0 ,
'category' => $cate_id ,
'orderby' => 'post_date',
'order' => 'DESC',
'post_type' => 'post',
'post_status' => 'publish',
'suppress_filters' => true
);

$posts_array = get_posts($args);

?>
<section class="featured"> <!-- section featured -->
<div class="slider"> <!-- slider -->
<?php
if(!empty($posts_array))  {
foreach($posts_array as $key => $post) {
if(has_post_thumbnail($post->ID)) {
$image = wp_get_attachment_url(get_post_thumbnail_id($post->ID, 'thumbnail'));
}else{
$image = get_template_directory_uri() . '/images/image.jpg';
}
setup_postdata($post);
?>
<div class="slide" id="<?php _e($key); ?>">
<div class="thumbnail"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" target="_blank"><img src="<?php _e($image); ?>" /></a></div>
<div class="title"><h2><a href="<?php the_permalink(); ?>" title="<?php the_permalink(); ?>" target="_blank"><?php the_title(); ?></a></h2></div>
<div class="short-detail"><a href="<?php the_permalink(); ?>" title="<?php the_permalink(); ?>" target="_blank"><?php _e(the_excerpt()); ?></a></div>
</div>
<?php
}
?>
</div> <!-- slider -->


<div class="list-slide"> <!-- listr slide -->
<?php
foreach($posts_array as $key => $post) {
?>
<span class="<?php _e($key); ?>" ></span>
<?php
}
?>
</div> <!-- list slide -->
<?php
}
?>
<div class="clear"></div>
</section> <!-- secotion featured -->

<script type="text/javascript">
var on_slide = $('.slider div.slide:first-child').attr('id');
var slide_id = $('.slider div.slide:first-child').next().attr('id');
var last_slide = $('.slider div.slide').last().attr('id');
var _slide = '';

function showSlide(_id) {
$('.slider #' on_slide).hide();
$('.list-slide span.' on_slide).removeClass('select');
$('.list-slide span.' _id).addClass('select');
$('.slider #' _id).fadeIn("slow");

on_slide = _id;
if(last_slide == _id) {
slide_id = $('.slider div.slide:first-child').attr('id');
}else{
slide_id = $('.slider #' _id).next().attr('id');
}
}

function slide() {
_slide = setInterval(function(){
if(jQuery(window).width() > 610 ) {
showSlide(slide_id);
}
},3000);
}

$(function(){
showSlide(on_slide);
slide();

$('.slider').hover(function(){ clearInterval(_slide); },function(){ slide(); });

$('.list-slide span').click(function(){
if(parseInt($(this).attr('class')) != on_slide) {
showSlide(parseInt($(this).attr('class')));
}
});
});
</script>


<?php
break;

โค้ด เลือก ขยาย

/* h style bigone */
section.featured {
display:block;
width:100%;
height:auto;
background-color:#000;
color:white;
}

.slider {
display:block;
width:100%;
height:440px;
}

.slider>div {
display:none;
}

.slider .thumbnail{
display:block;
width:100%;
height:350px;
text-align:center;
background-color:#222;
padding:10px 0px;
}

.slider img {
width:95%;
height:340px;
margin-top:5px;
}

.slider img:hover {
-webkit-transition: opacity 0.25s ease-in-out;
-moz-transition: opacity 0.25s ease-in-out;
-o-transition: opacity 0.25s ease-in-out;
transition: opacity 0.25s ease-in-out;
-moz-opacity:0.7;
-khtml-opacity:0.7;
opacity:0.7;
}

.slider .title {
display:block;
width:96%;
height:30px;
padding:0px 20px;
margin-top:5px;
}

.slider .title a{
display:block;
width:96%;
height:30px;
color:white;
line-height:30px;
font-size:18px;
font-weight:bold;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.slider .title a:hover {
text-decoration:underline;
}

.slider .short-detail {
display:block;
width:96%;
height:32px;
line-height:16px;
font-size:12px;
padding:0px 20px;
text-indent: 1.5em;
overflow:hidden;
text-overflow:ellipsis;
}

.slider .short-detail a{
color:white;
}

.slider .short-detail a:hover {
text-decoration:underline;
}
.list-slide {
display:block;
float:right;
padding:0px 20px;
}

.list-slide span {
display: inline-block;
width: 13px;
height: 12px;
background: #DDD;
margin:2px;
border-radius: 50%;
cursor: pointer;
}

.list-slide span:hover {
background: #999;
}

.list-slide span.select {
background:#73C5E1;
box-shadow:0 0 2px #73C5E1;
-webkit-box-shadow:0 0 2px #73C5E1;
-moz-box-shadow:0 0 2px #73C5E1;
transition:box-shadow 0.2s ease-in-out;
}

/*end h style bigone */

[jewyi]

ช่วยดันรอผู้รู้ 

[CONY]

ตั้งค่าไว้ยังไงบ้างครับ

[narupot]

ตั้งค่าไว้ยังไงบ้างครับ

ไม่ได้ตั้งค่าอะไรสักอย่างครับ มันเป็นสไลด์ปกติไม่ widget หรือ ปลั๊กอินควบคุม มันเป็นโค๊ดใน Function ล้วนๆ ประมาณนั้นครับ
พอช่วยได้มั้ย หมดปัญญาแล้วจริงๆครับผม อาการคือ มันสไลด์มาหน้า 1 2 3 4 5 ปุ๋ป มันไม่วนลูปไปหน้า 1 ใหม่ ประมาณนี้ครับ
มันจอดำไปเลย ตามภาพ ><

[subport]

ใช้ปลั๊กอินอะไรครับ สำหรับ Slide

[narupot]

ใช้ปลั๊กอินอะไรครับ สำหรับ Slide

ไม่ได้ใช้ฮะ เขียนโค๊ดใส่ใน Function >< แต่ไม่แน่ใจเลยว่ามันผิดพลาดตรงไหน ทั้งๆก็มีแค่นั้นแหละจ้า งงหนักมาก

[nociouz]

โค้ด เลือก ขยาย

https://owlcarousel2.github.io/OwlCarousel2/

[narupot]

โค้ด เลือก ขยาย

https://owlcarousel2.github.io/OwlCarousel2/

ขอคำอธิบายได้มั้ยครับ ไม่เคยใช้จริงๆ ><