[PHPBB 3.2.x] Gallery

Всичко свързано с phpBB3!
Autumn Shade
Newbie
Мнения: 13
Регистриран: 27 юли 2019, 10:15
Баланс: Locked

29 юли 2019, 10:39

I've tried to do this for my own purpose out of curiosity and inspired by the request here, Трябва да си влязъл в системата, за да можеш да виждаш линковете. Here, using Swiper(the js library), I've managed to do a fully responsive gallery with n-count of slides. The thing is really basic and it is highly customizable. If you want to add more slides per view or customize the effects, having paginations, etc - visit the Трябва да си влязъл в системата, за да можеш да виждаш линковете.

Gallery

BBCode: HTML:

Код: Трябва да си влязъл в системата, за да можеш да виждаш линковете

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<style>
    .swiper-container {
        width: 100%;
        height: auto;
    }
    .swiper-slide {
        width: 100%;
        height: auto;
        text-align: center;
        background: transparent;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    .swiper-container img {
        max-width:100%;
        height:auto;
    }
  </style>
  <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
       {TEXT}
    </div>
  </div>

  <!-- Initialize Swiper -->
  <script>
   var swiper = new Swiper('.swiper-container', {
      autoHeight: true, //enable auto height
      spaceBetween: 350,
      effect: 'coverflow',
      calculateHeight: true,
    });

  </script>
  
Slide

BBCode: HTML: Hope you like it!

Отговори

Върни се в “phpBB3”

  • Информация
  • Кой е на линия

    Потребители, разглеждащи този форум: Няма регистрирани потребители и 0 госта