2017-01-14 3 views
1

Я хочу отобразить три столба в одном цикле для слайдера карусели. Я хочу, чтобы три сообщения показывались и переключались одновременно. Я мог бы получить одно сообщение для каждого, но не три. Вот мой текущий цикл:Показать три сообщения в карусели на тумблере

<div class="col-lg-5 col-md-4 col-sm-6"> 
    <h3 class="mgntop">LATEST NEWS</h3><br> 
    <div class="latest_news_slider"> 
     <?php 
     $args = array(
      'posts_per_page' => 4, 
      'cat' => 4 
      ); 
     $news_query = new WP_Query($args); 
     while ($news_query->have_posts()) : $news_query->the_post(); ?> 
     <div> 

      <div class="newswidth newsbox"> 
       <h6><a href="<?php the_permalink(); ?>"> 
        <?php 
        the_title(); 
        ?> 
       </a></h6> 
       <div class="boxelements"> 
        <span class="fa fa-calendar"> </span> <?php the_time(); ?> 
       </div> 
       <p> <?php the_excerpt() ?></p> 
      </div> 
     </div> 
     <?php 
     endwhile; 
     wp_reset_postdata(); ?> 
    </div><!--latest_news_slider--> 

    <div class="review_toggle"> 
     <span class="fa fa-chevron-left prev2"></span> 
     <span class="fa fa-chevron-right next2"></span> 
    </div> 
</div> 

Вот результат кода выше

enter image description here

И в JQuery

jQuery(function($) { 
    $('.latest_news_slider').slick({ 
     dots: false, 
     infinite: false, 
     speed: 300, 
     slidesToShow: 1, 
     slidesToScroll: 1, 
     prevArrow: $('.prev2'), 
     nextArrow: $('.next2'), 
     responsive: [ 
      { 
       breakpoint: 990, 
       settings: { 
        slidesToShow: 1, 
        slidesToScroll: 1 
       } 
      } 
      // You can unslick at a given breakpoint now by adding: 
      // settings: "unslick" 
      // instead of a settings object 
     ] 
    }); 
}); 

То, что я хочу, чтобы иметь три результата, отображаемого на один раз, так что, когда вы нажмете на следующую стрелку, вы увидите еще три столбца столбцов друг над другом.

Я буду рад за любезную помощь

ответ

0

Просто укажите slidesToShow: 3 и slidesToScroll: 3

Как это:

$('.latest_news_slider').slick({ 
    dots: false, 
    infinite: false, 
    speed: 300, 
    slidesToShow: 3, 
    slidesToScroll: 3, 
    prevArrow: $('.prev2'), 
    nextArrow: $('.next2'), 
    responsive: [ 
     { 
      breakpoint: 990, 
      settings: { 
       slidesToShow: 1, 
       slidesToScroll: 1 
      } 
     } 
     // You can unslick at a given breakpoint now by adding: 
     // settings: "unslick" 
     // instead of a settings object 
    ] 
}); 

Кроме того, вы, вероятно, хотите, чтобы удалить 'posts_per_page' => 4 аргумент из запроса, так как это покажет только 3 сообщения и 1 в списке прокрутки. Kinda поражает цель слайдера, если у вас есть только 4 предмета, а не 10+ imo.

Смежные вопросы