Commit 972748fd authored by Yuri Bondarenko's avatar Yuri Bondarenko

info-carousel

parent 862d2297
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
@import url("../../components/ms-header/ms-header.css"); @import url("../../components/ms-header/ms-header.css");
@import url("../../components/ms-about/ms-about.css"); @import url("../../components/ms-about/ms-about.css");
@import url("../../components/ms-mini-gallery/ms-mini-gallery.css"); @import url("../../components/ms-mini-gallery/ms-mini-gallery.css");
@import url("../../components/ms-info-carousel/ms-info-carousel.css");
/* Custom media query */ /* Custom media query */
@custom-media --s (width <= 640px); @custom-media --s (width <= 640px);
......
import msMiniGallery from "../../components/ms-mini-gallery/ms-mini-gallery"; import msMiniGallery from "../../components/ms-mini-gallery/ms-mini-gallery";
import msInfoCarousel from "../../components/ms-info-carousel/ms-info-carousel";
document.addEventListener("DOMContentLoaded", async () => { document.addEventListener("DOMContentLoaded", async () => {
console.log("Start");
/** /**
* минигалерея * минигалерея
*/ */
...@@ -14,4 +14,28 @@ document.addEventListener("DOMContentLoaded", async () => { ...@@ -14,4 +14,28 @@ document.addEventListener("DOMContentLoaded", async () => {
type: "bullets" type: "bullets"
} }
}); });
/**
* инфокарусель
*/
new msInfoCarousel(".ms-info-carousel", {
slidesPerView: 1,
loop: false,
navigation: {
nextEl: ".ms-info-carousel__next",
prevEl: ".ms-info-carousel__prev"
},
pagination: {
el: ".ms-info-carousel__pagination",
type: "fraction"
},
breakpoints: {
1200: {
pagination: {
el: ".ms-info-carousel__pagination",
type: "bullets"
}
}
}
});
}); });
<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Canvas" fill="none">
<g id="arrow left">
<g id="Oval 2">
<path fill-rule="evenodd" clip-rule="evenodd" d="M 12 24C 18.6274 24 24 18.6274 24 12C 24 5.37258 18.6274 0 12 0C 5.37258 0 0 5.37258 0 12C 0 18.6274 5.37258 24 12 24Z" fill="#D0D0D0"/>
</g>
<g id="Page 1">
<path fill-rule="evenodd" clip-rule="evenodd" d="M 8.68427 0L 4.99966 3.49984L 1.31567 0L 0 1.2499L 4.99966 6.00024L 9.99932 1.2499L 8.68427 0Z" transform="matrix(0 1 -1 0 15 7)" fill="white"/>
</g>
</g>
</g>
</svg>
<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Canvas" fill="none">
<g id="arrow right">
<g id="Oval 2">
<path fill-rule="evenodd" clip-rule="evenodd" d="M 12 24C 18.6274 24 24 18.6274 24 12C 24 5.37258 18.6274 0 12 0C 5.37258 0 0 5.37258 0 12C 0 18.6274 5.37258 24 12 24Z" transform="translate(24 24) scale(-1)" fill="#D0D0D0"/>
</g>
<g id="Page 1">
<path fill-rule="evenodd" clip-rule="evenodd" d="M 8.68427 0L 4.99966 3.49984L 1.31567 0L 0 1.2499L 4.99966 6.00024L 9.99932 1.2499L 8.68427 0Z" transform="matrix(0 -1 1 0 9 17)" fill="white"/>
</g>
</g>
</g>
</svg>
.ms-info-carousel {
padding-bottom: 90px;
position: relative;
overflow: hidden;
@media (--m) {
padding-bottom: 60px;
margin: 0;
}
@media (--s) {
padding-bottom: 40px;
margin: 0;
}
}
.ms-info-carousel__item {
width: 100%;
display: flex;
align-items: center;
@media (--m) {
display: block;
padding: 0 30px;
}
@media (--s) {
padding: 0 20px;
}
}
.ms-info-carousel__info {
width: 37.5%;
padding: 0 60px 0 60px;
color: #111;
font-family: var(--fCirce);
@media (--m) {
padding: 0;
width: 100%;
}
@media (--s) {
padding: 4vw 0 3vw 0;
}
}
.ms-info-carousel__title {
font-size: 40px;
font-weight: normal;
margin-bottom: 30px;
line-height: 1.1;
@media (--s) {
font-size: 28px;
margin-bottom: 20px;
}
}
.ms-info-carousel__text {
font-size: 16px;
& p {
margin: 0.5em 0 0;
font-size: 16px;
}
}
.ms-info-carousel__picture {
width: 62.5%;
@media (--m) {
width: 100%;
margin-top: 20px;
}
& img {
display: block;
width: 100%;
}
}
.ms-info-carousel__control {
display: flex;
align-items: center;
justify-content: flex-start;
padding-left: 37.5%;
margin-top: 20px;
@media (--m) {
padding-left: 0;
justify-content: center;
}
}
.ms-info-carousel__prev {
display: block;
background: url("@@path/img/ms-info-carousel/arrow-left.svg");
width: 24px;
height: 24px;
cursor: pointer;
@media (--m) {
display: none;
}
}
.ms-info-carousel__next {
display: block;
background: url("@@path/img/ms-info-carousel/arrow-right.svg");
width: 24px;
height: 24px;
cursor: pointer;
@media (--m) {
display: none;
}
}
.ms-info-carousel__pagination {
width: auto;
position: static;
color: #111;
margin: 0 10px;
font-size: 15px;
font-family: var(--fCirce);
& .swiper-pagination-bullet {
width: 10px;
height: 10px;
margin: 0 5px;
background: #cecece;
opacity: 1;
}
& .swiper-pagination-bullet-active {
background: #e30613;
}
}
.ms-info-carousel__pattern {
position: absolute;
top: -54%;
left: 80px;
width: 612 / 1440 * 100vw;
height: 612 / 1440 * 100vw;
max-width: 680px;
max-height: 680px;
border-radius: 50%;
background: #6641c6;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: center;
@media (--m) {
top: -210 / 768 * 100vw;
left: -50 / 768 * 100vw;
width: 306 / 768 * 100vw;
height: 305 / 768 * 100vw;
}
@media (--s) {
top: -220 / 320 * 100vw;
left: -40 / 320 * 100vw;
width: 300 / 320 * 100vw;
height: 300 / 320 * 100vw;
}
& img {
display: block;
width: 85%;
}
}
.swiper-pagination-fraction + div {
position: static;
}
<section class="ms-info-carousel swiper-container">
<!-- prettier-ignore -->
<div class="ms-info-carousel__list swiper-wrapper">
@@include( 'ms-info-carousel__item.html', {
"title": "Идея фестиваля",
"img": "@@path/img/ms-info-carousel/1.jpg",
"dscr": "Святой Николай – один из самых почитаемых в России святых, с чьим именем связывают спасение мореплавателей, помощь больным, заботу о детях. Потому его именем и решено было назвать весенний благотворительный фестиваль – «Николин день»! К тому же, в конце мая отмечается и традиционный праздник – Никола Вешний. «Николин день» – новый московский фестиваль искусств, организованный по инициативе российских благотворительных фондов, который впервые пройдет в столице с 17 по 19 мая 2019 года."
})
@@include( 'ms-info-carousel__item.html', {
"title": "Где пройдет",
"img": "@@path/img/ms-info-carousel/2.jpg",
"dscr": "Фестиваль пройдет на 8 площадках: в центре города – на площади Революции, на Манежной площади, на переходе от Манежной площади к площади Революции, на Тверском бульваре (там расположатся сразу три площадки), в Климентовском переулке, а также в парке Коломенское. <br /> <b>Часы работы площадок:</b> <br />17 мая – с 11.00 до 21.00, <br />18 и 19 мая – с 10.00 до 22.00."
})
@@include( 'ms-info-carousel__item.html', {
"title": "Сценическая программа",
"img": "@@path/img/ms-info-carousel/3.jpg",
"dscr": "2019 год в России посвящен театру, потому сценическая программа фестиваля «Николин день» включает в себя детские театральные постановки и инклюзивные спектакли, а также выступления талантливых московских музыкальных коллективов."
})
@@include( 'ms-info-carousel__item.html', {
"title": "Анимация",
"img": "@@path/img/ms-info-carousel/4.jpg",
"dscr": "Николай Чудотворец – покровитель путешественников и моряков, поэтому основой анимационной программы стала морская тема. Фантазийные морские персонажи будут развлекать гостей во время фестиваля. Основным цветом выбран белый — как символ радости и праздничного настроения."
})
</div>
<div class="ms-info-carousel__control">
<div class="ms-info-carousel__prev"></div>
<div class="ms-info-carousel__pagination"></div>
<div class="ms-info-carousel__next"></div>
</div>
</section>
/**
*
*/
import { Swiper, Navigation, Pagination, Scrollbar } from "swiper/dist/js/swiper.esm.js";
/**
*
*/
Swiper.use([Navigation, Pagination, Scrollbar]);
/**
*
*/
export default class msMiniGallery {
constructor(selector, options) {
new Swiper(selector, options);
}
}
<div class="ms-info-carousel__item swiper-slide">
<div class="ms-info-carousel__info">
<div class="ms-info-carousel__title">@@title</div>
<div class="ms-info-carousel__text">
@@dscr
</div>
</div>
<div class="ms-info-carousel__picture">
<img src="@@img" alt="@@title" />
</div>
</div>
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
@@include( './components/ms-mini-gallery/ms-mini-gallery.html' ) @@include( './components/ms-mini-gallery/ms-mini-gallery.html' )
<!-- Инфо слайдер --> <!-- Инфо слайдер -->
<!-- @ @include( './components/ms-info-carousel/ms-info-carousel.html' ) --> @@include( './components/ms-info-carousel/ms-info-carousel.html' )
<!-- Карта --> <!-- Карта -->
<!-- @ @include( './components/ms-map/ms-map.html' ) --> <!-- @ @include( './components/ms-map/ms-map.html' ) -->
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment