Swiper Slide中的4个div

时间:2016-11-28 17:25:41

标签: javascript php jquery swiper

我有一个滑块滑块。

我需要在一张幻灯片中放置4个div,在第二张幻灯片放置2个div。

在第一张幻灯片中,我在第二张幻灯片中有2个div和4个div。

$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>';
  }
}

// showthis.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>

// mypage.php //

import re

ptr = r'your_regular_expression'

with open('your_file_name', 'r') as file:
    for line in file:
        for match in re.finditer(ptr, line):
            print(match.group())

// mypage.php //

z-index

我使用javascript来更新此滑块。

1 个答案:

答案 0 :(得分:0)

我找不到array_chunk的解决方案。我在滑块中使用slidesPerColumnslidesPerGroup。这是代码:

//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>';
        }