HTML / PHP

<!--SLIDER POST-->
<div class="row slider_post_container ">
    <div class="arrow_left">
        <input id="slide_right" type="button" value="Prev">
    </div>

    <div class="slide_post">

        <div class="slide_post_wrap">

            <?php query_posts('posts_per_page=9&cat=4');; if(have_posts()) : while(have_posts()) :the_post(); ?>
            <div class="slider_post">
                    <h2><a class="post_title" href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
                <div class="post_thumbnail">
                  <a href="<?php echo get_permalink(); ?>"><?php if ( has_post_thumbnail()) { $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large'); echo '<img src="' . $large_image_url[0] . '" title="' . the_title_attribute('echo=0') . '" alt="' . the_title_attribute('echo=0') . '">';  } ?></a>
                 </div>
                <?php the_excerpt(); ?>
                <a class="read_more" href="<?php echo get_permalink(); ?>" title="Read More">Read More</a>
            </div>

            <?php endwhile; endif; wp_reset_query();?>


        </div>

    </div>

    <div class="arrow_right">
        <input id="slide_left" type="button" value="Next">
    </div>
    <div class="row-end">&nbsp;</div>
</div>
<!--END SLIDER POST -->

CSS

.slider_post_container{
background-image:url(images/slide_background.png);
background-repeat:no-repeat;
padding:80px 0px 50px 0px;  
}

.arrow_left{float:left; width:100px;}

.arrow_right{float:left; width:100px;}

input#slide_left{
background-image:url(images/slider_buttons.png);
background-color:transparent;
background-position:-60px 0px;
display:block; border:0px;
height:61px;
margin:150px auto 0px;
position:relative;
text-indent:-99999px;
width:60px;
}

input#slide_right{
background-image:url(images/slider_buttons.png);
background-color:transparent; 
background-position:0px 0px;
display:block; border:0px; 
height:61px; 
margin:150px auto 0px;
text-indent:-99999px; 
width:60px; 
 }

.slide_post{
  float:left;
  overflow:hidden;
  width:1000px; 
}



.slide_post_wrap{min-width:5000px; float:left}

.slider_post{
  float:left; 
  margin:0 10px;  
  position:relative; 
  width:230px;
}

.slider_post h2{margin-bottom:10px; height:40px}

.slider_post  a.post_title{
  color:black;
  font-size:20px; 
  font-family:'Quicksand', sans-serif;
  text-decoration:none;
  font-weight:normal;
}

.slider_post .post_thumbnail{width:230px; margin-bottom:10px}
.slider_post .post_thumbnail img{max-width:230px; overflow:hidden;}

.slider_post p{margin-bottom:10px; font-size:12px; height:140px}

a.read_more{
  color:#2e3192; 
  font-family: 'Arial', sans-serif; 
  font-weight: bold; 
  font-size: 14px;
  text-decoration:none; 
  text-transform:uppercase; 
}

JAVASCRIPT

<script type="text/javascript">
$(document).ready(function(){

var $item = $('div.slider_post'),
    visible = 1,
    index = 0,
    endIndex = ( $item.length / visible ) -1

$('input#slide_left').click(function(){
    if(index < endIndex ){
        index++;
        $item.animate({'left':'-=235px'});
    }
});

$('input#slide_right').click(function(){
    if(index > 0){
        index--;
        $item.animate({'left':'+=235px'});
        }
 });
});
</script>

Answer 1

您正在错误地计算幻灯片的宽度，因为您忽略了边距。

按照@BenR的建议硬编码，或者以编程方式确定宽度：

var w = $item.outerWidth( true );

$item.animate({'left':'-=' + w + 'px'});
$item.animate({'left':'+=' + w + 'px'});

此外，要使幻灯片停在最后一张幻灯片，您必须更改结束索引变量。

您可以将其硬编码为5，或者以编程方式执行此操作：

endIndex = $item.length - Math.floor($(".slide_post").width()/w);

以下是一切：

var $item = $('div.slider_post'),
  w = $item.outerWidth( true ),
  visible = 1,
  index = 0,
  endIndex = $item.length - Math.floor($(".slide_post").width()/w);

$('input#slide_left').click(function(){
  if(index < endIndex ){
    index++;
    $item.animate({'left':'-=' + w + 'px'});

});


$('input#slide_right').click(function(){
  if(index > 0){
    index--;
    $item.animate({'left':'+=' + w + 'px'});
  }
});

这是demo的工作原理。

Answer 2

可能是一个CSS问题。将滑块的宽度设置为100％或者如果它是静态的，只需调整宽度使其不超过滑块的内容。

Answer 3

你没有足够的滑动：你的物品是250px宽而不是235（你忘了边距）。 endIndex也等于8而不是5：你必须将它设置为$ item.length - （可见项目数）。

$(document).ready(function() {

    var $item = $('div.slider_post'),
        visible = 1,
        index = 0,
        endIndex = 5;

    $('input#slide_left').click(function() {
        if (index < endIndex) {
            index++;
            $item.animate({
                'left': '-=250px'
            });
        }
    });

    $('input#slide_right').click(function() {
        if (index > 0) {
            index--;
            $item.animate({
                'left': '+=250px'
            });
        }
    });
});

修复一个简单的滑块

HTML / PHP

CSS

JAVASCRIPT

3 个答案: