Slider:
Here is the code for this slider:
<div class="wpc-team s-back-switch swip-wrap"> <div class="container no-padding full-width-md"> <div class="row"> <div class="col-sm-12"> <div class="team-slider-wrapper"> <div class="wpc-team-slider"> <img src="img/team-bg.jpg" alt="" class="s-img-switch"> <div class="swiper-container" data-loop="1" data-speed="1000" data-slides-per-view="responsive" data-xs-slides="1" data-sm-slides="2" data-md-slides="3" data-lg-slides="3" data-add-slides="3"> <div class="swiper-wrapper"> <?php foreach ($our_directory as $value): ?> <div class="swiper-slide" data-title="" data-desc="Suspendisse non lectus sit amet dolor eleifend vehicula. Praesent placerat purus ut tempor elementum. Suspendisse viverra aliquam ultrices. Mauris id odio eu nunc facilisis cursus a eu sem. Ut mollis orci quis mauris pulvinar, sit amet mattis quam tempus. Aliquam iaculis velit sit amet feugiat porta. Donec velit nisl, commodo sed augue id, luctus cursus felis. Mauris diam neque, vehicula et lacus in, tempus fermentum felis. Aliquam sed eleifend felis, eu ultrices leo. Sed tortor erat, facilisis et libero non, porta pellentesque lorem."></a> <!-- swiper slide --> <div class="wrapper-img"> <div class="img-wrap s-back-switch"> <a href="<?php echo $value['id'] ?>"><img src="admin/<?php echo $value['url_img'] ?>" alt="" class="s-img-switch"></a> </div> </div> </div> <?php endforeach; ?> </div> <div class="pagination"></div> </div> <div class="wpc-swiper-arrow arrow-left swip-arrow-left classic light wpc-romb"> <i class="flaticon-back"></i> </div> <div class="wpc-swiper-arrow arrow-right swip-arrow-right classic light wpc-romb"> <i class="flaticon-next"></i> </div> </div> </div> </div> </div> <div class="row"> <div class="col-sm-12 col-md-6 col-md-offset-4"> <section class="wrap-info text-center text-right-md"> <?php foreach ($our_directory as $value): ?> <a href="articles.php?type=articles&id=<?php echo $value['id'] ?>"><h1 class="title team-title margin-lg-35b"><?php echo $value['title'] ?></h1></a> <?php endforeach; ?> </section> </div> </div> </div> </div> If you put data-title="<?php echo $value['title'] ?>" In data-title="<?php echo $value['title'] ?>" , then everything works, but you need a link, and if you put it in data-title , then the slider breaks. I framed foreach and in it made a link around H1 . It works this way, only now 2 titles of the rubric are showing right away, I think this is because of the second foreach . But otherwise he does not want to work. And if you use one foreach and put the entire slider block into it, then the layout breaks down but works. What can be done in this case? How strange the slider is made. With the slider that the above problems were not. Although there is also a data attribute.