[PHPBB 3.2.x] Gallery

Всякакви bbcodes за phpbb.
Аватар
Autumn Shade
Извън линия
Потребител
Потребител
Мнения: 269
Регистриран на: 14 Мар 2019, 13:20
Се отблагодари: 48 пъти
Получена благодарност: 150 пъти

[PHPBB 3.2.x] Gallery

Мнение от Autumn Shade » 29 Юли 2019, 18:53

I've tried to do this for my own purpose out of curiosity and inspired by the request here, Netflix Slider. 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 API.

Gallery

BBCode:
[gallery]{TEXT}[/gallery]

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:
[slide]{URL}[/slide]

HTML:
<div class="swiper-slide"><img src="{URL}"></div>

Hope you like it!

ПС:
По-късно ще го преведа.

  • Подобни теми
    Отговори
    Преглеждания
     Последно мнение

Обратно към “BBCodes”

Кой е на линия

Потребители разглеждащи този форум: Semrush [Bot] и 9 госта