Сниппеты: Ротация элементов

Ротация элементов (m155) — этот блок состоит из нескольких прокручиваемых слева-направо элементов, каждый из которых состоит из изображения, подзаголовка, заголовка, текстового блока и кнопки.

Чтобы добавить ещё один элемент, скопируйте выделенный фрагмент и вместо <!--add element--> вставьте его. Таким образом вы легко сможете найти место для вставки следующего элемента, если возникнет такая необходимость.

Код сниппета:

<div class="m155">

   <div class="mk505 m155__tab_nav">

   </div>

   <div class="m155__container">

       <div class="gridcontainer">

           <div class="m155__inner">

               <!--start element-->

               <section class="m200 m155_item">

                   <div class="m200__image-wrapper m155_item__image-wrapper">

                       <figure class="m013_media_16x9">

                           <a class="m013_media_16x9__image-wrapper m200__img-16x9 m155_item__img-16x9" href="">

                               <picture class="m013_media_16x9__picture">

                                   <img class="m013_media_16x9__image" src="/upload/dws/static/16x9.png" data-srcset="" alt="" title="">

                               </picture>

                           </a>

                       </figure>

                   </div>

                   <div class="m200__inner m155_item__inner">

                       <div class="m200__content m155_item__content">

                           <div class="m024_Headline_H5 m200__subline m155_item__subline">

                               Волоколамское

                           </div>

                           <h3 class="m022_Headline_H3 m200__headline m155_item__headline">

                               Волоколамское шоссе, 95

                           </h3>

                           <p class="m200__copy m155_item__copy">

                               +7 (495) 565-38-06 </br>Ближайшие станции метро:

                               Волоколамская, Тушинская. </br>пн-пт 08:00 — 21:00 </br>сб-вс 10:00 — 17:00

                           </p>

                       </div>

                       <div class="m200__footer m155_item__footer">

                           <a class="btn btn_cta btn_center m200__button m155_item__button" role="button" href="#">

                               <span class="btn__text">Узнать больше</span>

                           </a>

                       </div>

                   </div>

               </section>

               <!--end element-->

               <!--start element-->

               <section class="m200 m155_item">

                   <div class="m200__image-wrapper m155_item__image-wrapper">

                       <figure class="m013_media_16x9">

                           <a class="m013_media_16x9__image-wrapper m200__img-16x9 m155_item__img-16x9" href="">

                               <picture class="m013_media_16x9__picture">

                                   <img class="m013_media_16x9__image" src="/upload/dws/static/16x9.png" data-srcset="" alt="" title="">

                               </picture>

                           </a>

                       </figure>

                   </div>

                   <div class="m200__inner m155_item__inner">

                       <div class="m200__content m155_item__content">

                           <div class="m024_Headline_H5 m200__subline m155_item__subline">

                               Волоколамское

                           </div>

                           <h3 class="m022_Headline_H3 m200__headline m155_item__headline">

                               Волоколамское шоссе, 95

                           </h3>

                           <p class="m200__copy m155_item__copy">

                               +7 (495) 565-38-06 </br>Ближайшие станции метро:

                               Волоколамская, Тушинская. </br>пн-пт 08:00 — 21:00 </br>сб-вс 10:00 — 17:00

                           </p>

                       </div>

                       <div class="m200__footer m155_item__footer">

                           <a class="btn btn_cta btn_center m200__button m155_item__button" role="button" href="#">

                               <span class="btn__text">Узнать больше</span>

                           </a>

                       </div>

                   </div>

               </section>

               <!--end element-->

               <!--start element-->

               <section class="m200 m155_item">

                   <div class="m200__image-wrapper m155_item__image-wrapper">

                       <figure class="m013_media_16x9">

                           <a class="m013_media_16x9__image-wrapper m200__img-16x9 m155_item__img-16x9" href="">

                               <picture class="m013_media_16x9__picture">

                                   <img class="m013_media_16x9__image" src="/upload/dws/static/16x9.png" data-srcset="" alt="" title="">

                               </picture>

                           </a>

                       </figure>

                   </div>

                   <div class="m200__inner m155_item__inner">

                       <div class="m200__content m155_item__content">

                           <div class="m024_Headline_H5 m200__subline m155_item__subline">

                               Волоколамское

                           </div>

                           <h3 class="m022_Headline_H3 m200__headline m155_item__headline">

                               Волоколамское шоссе, 95

                           </h3>

                           <p class="m200__copy m155_item__copy">

                               +7 (495) 565-38-06 </br>Ближайшие станции метро:

                               Волоколамская, Тушинская. </br>пн-пт 08:00 — 21:00 </br>сб-вс 10:00 — 17:00

                           </p>

                       </div>

                       <div class="m200__footer m155_item__footer">

                           <a class="btn btn_cta btn_center m200__button m155_item__button" role="button" href="#">

                               <span class="btn__text">Узнать больше</span>

                           </a>

                       </div>

                   </div>

               </section>

               <!--end element-->

               <!--add element-->

           </div>

       </div>

       <div class="m155__dots">

       </div>

       <div class="m155__arrow">

           <div class="m155__arrow-align">

               <div class="m155__arrow-inner"></div>

           </div>

       </div>

   </div>

</div><br>

Сниппет на сайте

Синем выделен один элемент ротации. Элементы выделенные зелёным можно заменить собственным контентом.