رفتن به مطلب

تغییر تعداد آیتم های اسلایدر در اندازه موبایل(کروسل بوتسترپ)


پست های پیشنهاد شده

سلام و درود به اساتید گرامی..

یک اسلایدر با بوتسترپ (carousel) ساخته شده که تعداد 8 آیتم رو بصورت 2 آیتم 4 تایی نمایش میده. یعنی تو هر آیتم فعال 4 پست نمایش داده میشه و وقتی روی Next کلیک بشه 4 مورد بعدی رو نمایش میده.

آیا امکان این وجود داره که مثلا تو یک اندازه خاص صفحه نمایش این تعداد تغییر کنه. مثلا 1 مورد یا 2 مورد به جای 4 تا نمایش بده؟؟

کدهای مربوط به اسلایدر:

 <!-- Carousel -->
<div id="carousel" class="carousel slide" data-ride="carousel" data-interval="false">

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">

    <?php
    // Item size (set here the number of posts for each group)
    $i = 4; 

    // Set the arguments for the query
    global $post; 
    $args = array(
  'post_type' => 'product',
  'posts_per_page' => 8,
  'post_status' => 'publish',
  'meta_key' => '_wc_review_count',
  'orderby' => 'meta_value_num'
);

$query = new WP_Query($args);

    // Get the posts
    $myposts = get_posts($args);

    // If there are posts
    if($myposts):

      // Groups the posts in groups of $i
      $chunks = array_chunk($myposts, $i);
      $html = "";

      /*
       * Item
       * For each group (chunk) it generates an item
       */
      foreach($chunks as $chunk):
        // Sets as 'active' the first item
        ($chunk === reset($chunks)) ? $active = "active" : $active = "";
        $html .= '<div class="item '.$active.'"><div class="container"><div class="row">';
  
        /*
         * Posts inside the current Item
         * For each item it generates the posts HTML
         */
        foreach($chunk as $post):
          $html .= '<div class="col-md-3 col-sm-12 col-xs-12">';
          $html .= '<a href="'.get_permalink($post->ID).'">';
          $html .= get_the_post_thumbnail($post->ID); 
          $html .= '<h3>';
          $html .= get_the_title($post->ID);
          $html .= '</h3>';
          $html .= '</a>';
          $html .= '</div>';
        endforeach;

        $html .= '</div></div></div>';  

      endforeach;

      // Prints the HTML
      echo $html;

    endif;
    ?>

  </div> <!-- carousel inner -->


  <!-- Controls -->
  <a class="left carousel-control" href="#promo-carousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#promo-carousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>


</div> <!-- /carousel -->

 

242424234.jpg

ویرایش شده توسط maraljoon
لینک به ارسال
در در 1/5/2018 at 13:45، maraljoon گفته است :

سلام و درود به اساتید گرامی..

یک اسلایدر با بوتسترپ (carousel) ساخته شده که تعداد 8 آیتم رو بصورت 2 آیتم 4 تایی نمایش میده. یعنی تو هر آیتم فعال 4 پست نمایش داده میشه و وقتی روی Next کلیک بشه 4 مورد بعدی رو نمایش میده.

آیا امکان این وجود داره که مثلا تو یک اندازه خاص صفحه نمایش این تعداد تغییر کنه. مثلا 1 مورد یا 2 مورد به جای 4 تا نمایش بده؟؟

کدهای مربوط به اسلایدر:


 <!-- Carousel -->
<div id="carousel" class="carousel slide" data-ride="carousel" data-interval="false">

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">

    <?php
    // Item size (set here the number of posts for each group)
    $i = 4; 

    // Set the arguments for the query
    global $post; 
    $args = array(
  'post_type' => 'product',
  'posts_per_page' => 8,
  'post_status' => 'publish',
  'meta_key' => '_wc_review_count',
  'orderby' => 'meta_value_num'
);

$query = new WP_Query($args);

    // Get the posts
    $myposts = get_posts($args);

    // If there are posts
    if($myposts):

      // Groups the posts in groups of $i
      $chunks = array_chunk($myposts, $i);
      $html = "";

      /*
       * Item
       * For each group (chunk) it generates an item
       */
      foreach($chunks as $chunk):
        // Sets as 'active' the first item
        ($chunk === reset($chunks)) ? $active = "active" : $active = "";
        $html .= '<div class="item '.$active.'"><div class="container"><div class="row">';
  
        /*
         * Posts inside the current Item
         * For each item it generates the posts HTML
         */
        foreach($chunk as $post):
          $html .= '<div class="col-md-3 col-sm-12 col-xs-12">';
          $html .= '<a href="'.get_permalink($post->ID).'">';
          $html .= get_the_post_thumbnail($post->ID); 
          $html .= '<h3>';
          $html .= get_the_title($post->ID);
          $html .= '</h3>';
          $html .= '</a>';
          $html .= '</div>';
        endforeach;

        $html .= '</div></div></div>';  

      endforeach;

      // Prints the HTML
      echo $html;

    endif;
    ?>

  </div> <!-- carousel inner -->


  <!-- Controls -->
  <a class="left carousel-control" href="#promo-carousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#promo-carousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>


</div> <!-- /carousel -->

 

242424234.jpg

سلام . وقت بخیر .

می تونید با جی کوئری اندازه صفحه رو بگیرید و شرط کنید مثلا از 768 کوچکتر بود متغیر i که مساوی 4 بود بشه 1  

 

لینک به ارسال
در در 1/9/2018 at 10:30، Mirrajabi گفته است :

سلام . وقت بخیر .

می تونید با جی کوئری اندازه صفحه رو بگیرید و شرط کنید مثلا از 768 کوچکتر بود متغیر i که مساوی 4 بود بشه 1  

 

سلام.

تشکر.. میتونید بصورت کد این مورد رو بهم بگید؟

لینک به ارسال

روی بوت استرپ تست نکردم ولی روی OwlCarousel تست کردم همچین کدی میشه:

var c = 5;
if(jQuery(window).width() < 1024){
    var c = 4;
}
if(jQuery(window).width() < 768){
    var c = 3;
}
if(jQuery(window).width() < 360){
    var c = 1;
}
jQuery('.carouel').carouel({
        items : c,
});

 

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...