<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css"/>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<script>
$('.portal-carousel').slick({
slidesToShow: 4,
slidesToScroll: 1,
infinite: true,
arrows: true,
prevArrow: '
',
nextArrow: '
',
responsive: [
{
breakpoint: 1300,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
}
},
{
breakpoint: 1000,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
}
},
{
breakpoint: 800,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
/* Слайдер галерея*/
$('.gallery-slider').slick({
dots: false,
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear',
arrows: false,
asNavFor: '.gallery-slider-nav',
});
$('.gallery-slider-nav').slick({
infinite: true,
slidesToShow: 5,
slidesToScroll: 1,
asNavFor: '.gallery-slider',
dots: false,
centerMode: true,
focusOnSelect: true,
arrows: true,
prevArrow: '
',
nextArrow: '
',
responsive: [
{
breakpoint: 1200,
settings: {
slidesToShow: 4,
}
},
{
breakpoint: 992,
settings: {
slidesToShow: 3,
}
}
]
});
/* Слайдер сликовский на страницах порталов внизу*/
$('.friends-carousel').slick({
slidesToShow: 5,
slidesToScroll: 1,
infinite: true,
arrows: true,
prevArrow: '
',
nextArrow: '
',
responsive: [
{
breakpoint: 1300,
settings: {
slidesToShow: 4,
slidesToScroll: 1,
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 3,
slidesToScroll: 1
}
}
]
});
$(document).ready(function() {
$(".portals-friends__card_img").mouseenter(function() {
$(this).addClass("rotate");
}).mouseleave(function() {
$(this).removeClass("rotate");
});
});
</script>
<style>
.sections_title {
width: 100%;
font-size: 25px;
font-weight: bold;
padding: 5px;
margin-top: 20px;
margin-bottom: 20px;
text-align: center;
}
.portal-carousel {
width: 91%;
margin-right: auto;
margin-left: auto;
}
.portal-card {
color: #fff;
height: 450px;
padding: 15px;
text-align: center;
margin-left: 15px;
margin-right: 15px;
outline: none;
display: flex !important;
flex-direction: column;
align-items: center;
}
.portal-card__text {
margin-top: 5px;
font-size: 0.9em;
padding: 5px;
overflow-y: auto;
}
.portal-card__text a {
text-decoration: none;
transition: all 0.2s;
}
.portal-card__title {
font-weight: bold;
margin-top: 5px;
}
.portal-card img {
width: 100%;
height: 200px;
object-fit: cover;
}
.slider-arrow {
position: absolute;
top: 38%;
height: 60px;
width: 60px;
padding: 10px;
z-index: 1;
border-radius: 50%;
}
.slider-arrow:hover {
opacity: 70%;
}
.slider-arrow_prod_right, .slider-arrow_gallery_right {
right: -3em;
background: url("https://wikiwarriors.org/images/Arrow-right.png") center no-repeat;
}
.slider-arrow_prod_left, .slider-arrow_gallery_left {
left: -3em;
background: url("https://wikiwarriors.org/images/Arrow-left.png") center no-repeat;
}
.slider-arrow:hover {
cursor: pointer;
}
.period_title {
padding: 5px;
font-size: 1.3em;
margin-bottom: 10px;
}
.period_title span {
color: #fff;
}
.warriors-cards-wrap {
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-content: center;
justify-content: space-around;
align-items: center;
}
.warriors-card {
border-radius: 5%;
height: 110px;
width: 140px;
margin-bottom: 15px;
position: relative;
z-index: 0;
transition: 0.2s all ease;
}
.warriors-card:hover {
transform: scale3d(1.1, 1.1, 1.1);
}
.warriors-card img {
margin: 0;
width: 100%;
height: 100%;
vertical-align: bottom;
object-fit: cover;
object-position: top;
}
.warriors-card-descr {
color: #fff;
font-size: 0.8em;
background-color: #000;
border-radius: 0 5px 0 3px;
padding: 4px;
line-height: 1;
position: absolute;
z-index: 1;
left: 0;
bottom: -1px;
}
.gallery-slider {
width: 90%;
margin: auto;
}
.gallery-img {
width: auto!important;
height: 550px!important;
position: relative;
margin-bottom: 0;
}
.gallery-wrap {
height: 550px;
text-align: center;
margin: auto;
outline: none;
display: flex !important;
justify-content: space-around;
align-items: center;
}
.gallery-img-wrap {
position: relative;
height: 500px;
}
.gallery-descr {
opacity: 0;
position: absolute;
font-size: 1em;
direction: ltr;
padding: 10px;
text-align: center;
bottom: -50px;
height: auto;
width: 100%;
background: rgba(0, 0, 0, 0.6);
color: white;
transition: all 0.2s ease;
}
.gallery-wrap:hover .gallery-descr { opacity: 1; bottom: -25px; }
.gallery-slider-nav {
width: 90%;
margin: 20px auto;
}
.gallery-image-nav {
max-width: 12rem;
max-height: 7.8rem;
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.gallery-wrap-nav {
height: 100px;
padding: 0;
outline: none;
-webkit-filter: brightness(40%);
filter: brightness(40%);
}
.slick-current {
-webkit-filter: none !important;
filter: none !important;
}
.gallery-image-nav img {
width: 100%;
object-fit: cover;
height: 7.8rem;
}
.slider-arrow_gallery {
height: 100%;
top: 0;
border-radius: 0;
}
/* Карточки дружественных порталов */
.friends-carousel {
width: 91%;
margin-right: auto;
margin-left: auto;
}
.portals-friends__card, .portals-collections__card {
text-align: center;
padding: 10px;
display: -webkit-box!important;
display: -ms-flexbox!important;
display: flex!important;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.portals-friends__card:focus {
outline: none;
}
.portals-friends__card .portal-card__img {
height: 140px;
}
.portals-friends__card_img {
margin-bottom: 5px;
}
.portals-friends__card a, .portals-collections__card a {
font-size: 1.7em;
text-decoration: none;
transition: all 0.2s;
}
.rotate {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: -webkit-transform 0.5s ease;
transition: transform 0.5s ease;
}
.mobile {
display: none;
}
.portal-collections-cards-wrap {
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-content: center;
justify-content: space-around;
align-items: center;
}
.portal-card__img_small {
font-size: 0.6em;
}
.portals-collections__card {
width: 150px;
}
.toc {
display: none!important;
}
@media only screen and (max-width:640px) {
.slider-arrow_prod_right {
right: -2em;
}
.slider-arrow_prod_left {
left: -2em;
}
.portal-card__text {
font-size: 0.75em;
}
.warriors-card-descr {
font-size: 0.6em;
}
.portals-friends__card {
font-size: 0.55em;
}
.period_title {
text-align: center;
}
.gallery-wrap {
height: 280px;
}
.gallery-slider {
width: 100%;
}
.gallery-descr {
font-size: 0.6em;
padding: 5px;
left: 0;
bottom: 0;
opacity: 1;
}
.gallery-img {
width: auto!important;
max-height: 280px!important;
}
.gallery-wrap-nav {
height: 45px;
}
.gallery-image-nav {
height: 3.8rem;
}
.gallery-image-nav img {
width: 100%;
height: 2.8rem;
}
.gallery-img-wrap {
position: initial;
height: 280px;
}
.slider-arrow_gallery {
height: 110%;
top: -2px;
}
.friends-carousel {
height: 100px;
}
.slider-arrow_gallery_right {
right: -2.2em;
}
.slider-arrow_gallery_left {
left: -2.2em;
}
.gallery-img {
object-fit: cover;
}
.nomobile {
display: none;
}
.mobile {
display: inline;
}
.friends-carousel {
margin-bottom: 40px;
}
.portals-friends__card .portal-card__img {
height: 90px;
}
}
</style>
