斯威斯幻燈片中的4個div

我需要把4個格在一個滑塊，和2周的div中的第二個。

在第一滑動我有2名的div和4個格中的第二個。

function loadcontent() { 
    var id = $('.catslide>.swiper-wrapper>.swiper-slide-active').attr('data-id'); 
    $.ajax({ 
    type: "POST", 
    url: "../showthis.php", 
    data: { 
     id: id, 
     rand: 1 
    }, 
    datatype: 'json', 
    success: function(data) { 
     var height = $('#slideadv').height(); 
     $('#slideadv').height(height); 
     mySwiper.removeAllSlides(); 
     mySwiper.appendSlide(data); 
     mySwiper.update(); 
    } 
    }); 
}

//showthis.php //

$query3 = 
    "SELECT * FROM adv_items WHERE category_id='$id' AND adv_type='Standard' AND hide='show' ORDER BY RAND()"; 
$advst = $db - > prepare($query3); 
$advst - > fetchAll(PDO::FETCH_ASSOC); 
$advst - > execute(); 
$text = ''; 


foreach(array_chunk($advst - > fetchAll(), 4, true) as $advsts) { 
    { 
    echo '<div class="swiper-slide">'; 
    foreach($advsts as $kicks) { 
     echo '<div class="col-md-6 advertising">'; 
     echo '<div class="company-logo"><img src="./'.$kicks['clogo']. 
     '" alt="..."></div>'; 
     echo '<div class="company-contcs"><p class="company-title">'.$kicks[ 
     'cname']. 
     '</p><a href="tel:'.$kicks['phone1']. 
     '">Телефон: '.$kicks['phone1']. 
     '</a><a href="'.$kicks['curl']. 
     '">'.$kicks['curl']. 
     '</a></div>'; 
     echo '<p class="company-desc">'.substr($kicks['text'], 0, 600). 
     '</p>'; 
     echo "</div>"; 
    } 
    echo '</div>'; 
    } 
}

// // mypage.php

$query3 = 
    "SELECT * FROM adv_items WHERE category_id='$id' AND adv_type='Standard' AND hide='show' ORDER BY RAND()"; 
$advst = $db - > prepare($query3); 
$advst - > fetchAll(PDO::FETCH_ASSOC); 
$advst - > execute(); 
$text = ''; 

foreach(array_chunk($advst - > fetchAll(), 4, true) as $advsts) { 
    { 
    echo '<div class="swiper-slide">'; 
    foreach($advsts as $kicks) { 
     echo '<div class="col-md-6 advertising">'; 
     echo '<div class="company-logo"><img src="./'.$kicks['clogo']. 
     '" alt="..."></div>'; 
     echo '<div class="company-contcs"><p class="company-title">'.$kicks[ 
     'cname']. 
     '</p><a href="tel:'.$kicks['phone1']. 
     '">Телефон: '.$kicks['phone1']. 
     '</a><a href="'.$kicks['curl']. 
     '">'.$kicks['curl']. 
     '</a></div>'; 
     echo '<p class="company-desc">'.substr($kicks['text'], 0, 600). 
     '</p>'; 
     echo "</div>"; 
    } 
    echo '</div>'; 
    } 
}

// // mypage.php

<div id = "webslider" class = "row webslider"> 
    <div class = "container"> 
    <div class = "swiper-container categories-advertising"> 
    <!-- Additional required wrapper --> 
    <div id = "slideadv" class = "swiper-wrapper slideadv"> 
     <?php 
     foreach (array_chunk($advst->fetchAll(), 4, true) as $advsts) { 
      { 
      echo '<div class="swiper-slide">'; 
      foreach ($advsts as $kicks) { 
     ?> 
     <div class = "col-md-6 advertising"> 
     <div class = "company-logo"> 
      <img src = "./<?php echo $kicks['clogo'] ?>" alt = "..."> 
    </div> 
    <div class = "company-contcs"> 
    <p class = "company-title"> 
     <?php 
     echo $kicks['cname'] 
     ?> 
    </p> 
    <a href = "tel:<?php echo $kicks['phone1'] ?>"> Телефон: 
     <?php 
     echo $kicks['phone1'] 
     ?> 
    </a> 
    <a href = "<?php echo $kicks['curl'] ?>"> 
     <?php 
     echo $kicks['curl'] 
     ?> 
    </a> 
    </div> 
    <p class = "company-desc"> 
    <?php 
     echo substr($kicks['text'], 0, 600) 
    ?> 
    </p> 
</div> 
<?php 
    } 
    echo '</div>'; 
    } 
?> 
<?php 
    } 
?> 
</div> 
<div class = "swiper-button-next"> 
    <img width = "30px" src = "./img/scroll-arrow-right.svg" alt = "arrow right"> 
</div> 
<div class = "swiper-button-prev"> 
    <img width = "30px" src = "./img/scroll-arrow-left.svg" alt = "arrow left"> 
</div> 
</div> 
</div> 
</div>

我使用JavaScript更新此滑塊。

來源

2016-11-28 Sergey Smekodub

你好，請提供您的HTML代碼，以及 –

我覺得沒有array_chunk的解決方案。我在滑塊中使用了slidesPerColumn和slidesPerGroup。下面是代碼：

//define swiper// 

var mySwiper = new Swiper('.swiper-container', { 
     direction: 'horizontal', 
     slidesPerView: '2', 
     slidesPerColumn: '2', 
     spaceBetween: 0, 
     slidesPerGroup: '1', 
     slidesPerColumnFill: 'column', 
     touchRatio: '2', 
     nextButton: '.swiper-button-next', 
     prevButton: '.swiper-button-prev' 
    });

mypage.php

<div class="swiper-container categories-advertising"> 
       <!-- Additional required wrapper --> 
       <div id="slideadv" class="swiper-wrapper slideadv"> 
         <?php foreach ($advst->fetchAll() as $kicks) { ?> 
          <div class="swiper-slide"> 
            <div class="col-md-12 advertising"> 
             <div class="company-logo"> 
              <img src="./<?php echo $kicks['clogo'] ?>" alt="..."> 
             </div> 
             <div class="company-contcs"> 
              <p class="company-title"><?php echo $kicks['cname'] ?></p> 
              <a href="tel:<?php echo $kicks['phone1'] ?>">Телефон: <?php echo $kicks['phone1'] ?></a> 
              <a href="<?php echo $kicks['curl'] ?>"><?php echo $kicks['curl'] ?></a> 
             </div> 
             <p class="company-desc"> 
              <?php echo substr($kicks['text'], 0, 600) ?> 
             </p> 
            </div> 
           </div> 
          <?php }?> 
       </div> 
       <div class="swiper-button-next"><img width="30px" src="./img/scroll-arrow-right.svg" alt="arrow right"> 
       </div> 
       <div class="swiper-button-prev"><img width="30px" src="./img/scroll-arrow-left.svg" alt="arrow left"> 
       </div> 
      </div>

showthis.php這是Ajax響應

$query3 = "SELECT * FROM adv_items WHERE category_id='$id' AND adv_type='STANDARD' AND hide='show' ORDER BY RAND()"; 
$advst = $db->prepare($query3); 
$advst->fetchAll(PDO::FETCH_ASSOC); 
$advst->execute(); 

foreach ($advst->fetchAll() as $kicks) 
     { 
      echo '<div class="swiper-slide">'; 
      echo '<div class="col-md-12 advertising">'; 
      echo '<div class="company-logo"><img src="./' . $kicks['clogo'] . '" alt="..."></div>'; 
      echo '<div class="company-contcs"><p class="company-title">' . $kicks['cname'] . '</p><a href="tel:' . $kicks['phone1'] . '">Phone: ' . $kicks['phone1'] . '</a><a href="' . $kicks['curl'] . '">' . $kicks['curl'] . '</a></div>'; 
      echo '<p class="company-desc">' . substr($kicks['text'], 0, 600) . '</p>'; 
      echo "</div>"; 
      echo '</div>'; 
     }

來源

2016-11-29 08:48:17

斯威斯幻燈片中的4個div

回答

相關問題