MinimalistSlider.css

Замечание. Возможно, после сохранения вам придётся очистить кэш своего браузера, чтобы увидеть изменения.

  • Firefox / Safari: Удерживая клавишу Shift, нажмите на панели инструментов Обновить либо нажмите Ctrl-F5 или Ctrl-R (⌘-R на Mac)
  • Google Chrome: Нажмите Ctrl-Shift-R (⌘-Shift-R на Mac)
  • Internet Explorer: Удерживая Ctrl, нажмите Обновить либо нажмите Ctrl-F5
  • Opera: Перейдите в Menu → Настройки (Opera → Настройки на Mac), а затем Безопасность → Очистить историю посещений → Кэшированные изображения и файлы
/*  MinimalistSlider (Минималистичный слайдер)
 *  Описание:    Настраивает слайдер
 *  Авторы:      Sociophobia и Rairakkumee
 *  Скрипт:      dev.wikia.com/wiki/MinimalistSlider
*/

/* Оформление слайдера */ 
.fandom-slider {
    border-radius: 20px;
    border: .5px solid transparent
}

/* Подложка с информацией */
.fandom-slider__nav {
    background: none;
}

.fandom-slider__nav__caption {
    left: 0 !important;
    background: rgba(0, 0, 0, 0.4) !important;
    padding: 10px 15px 20px 15px !important;
    border-top-right-radius: 30px !important;
    width: 250px;
}

.fandom-slider:hover .fandom-slider__nav__caption, .fandom-slider:hover .fandom-slider__nav {
    height: 92px;
}

.fandom-slider__nav__caption p {
    width: 200px;
    white-space: normal;
    margin-bottom: 4px;
}

.fandom-slider__nav__caption h2 {
    margin-bottom: 5px !important;
}

.fandom-slider__nav__caption span {
    display: inline-block;
    padding: 2px;
    padding-left: 4px;
    padding-right: 4px;
    border-radius: 5px;
}

.fandom-slider__nav__caption a:not(:hover) {
    color: white !important;
}

/* Скрывает навигацию по изображению */
.fandom-slider__nav__thumbs img {
    display: none !important;
}

/* Настраивает круги */
.fandom-slider__nav__thumbs {
    display: inline-block;
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 10px;
}

.fandom-slider__nav__thumbs div {
    float: right;
    background: #D3D3D3;
    border: 2px solid #D3D3D3;
    border-radius: 50%;
    width: 12px;
    height: 12px;
}
 
/* Стиль активного круга */
.fandom-slider__nav__thumbs > .current-thumb {
    background: #999999;
    border: 2px solid #999999 !important;
}

/* ВЕРСИЯ ДЛЯ СТАРОЙ ПЛАТФОРМЫ */

/* Подложка под кнопкой и названием. */ 
.wikiaPhotoGallery-slider-body .horizontal .description {
    left: 0 !important;
    background: rgba(0, 0, 0, 0.4) !important;
    padding: 10px 15px 20px 15px !important;
    border-top-right-radius: 30px !important;
    width: 250px !important;
}

.wikiaPhotoGallery-slider-body:hover .horizontal .description {
    height: 92px;
}

.wikiaPhotoGallery-slider-body .horizontal .description p {
    white-space: normal !important;
    margin-bottom: 4px;
}

.read-more-button-wrapper {
    border: 1px solid #fff;
    display: inline-block;
    padding: 2px;
    padding-left: 4px;
    padding-right: 4px;
    border-radius: 5px;
    
}

.read-more-button-wrapper a {
    color: white !important;
}

/* Картинки в слайдере */
.wikiaPhotoGallery-slider-body img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    margin: 0px !important;
}

/* Делает фон слайдера прозрачным. */
 
.wikiaPhotoGallery-slider-body {
    background: transparent !important; /* Вы можете написать здесь любой желаемый цвет, хотя я бы не советовал этого делать. Вы также можете удалить этот блок, чтобы получить стандартный черный цвет. */
    border-radius: 10px;
}
 
/* Уменьшает высоту фона кругов и делает его прозрачным. */
 
.wikiaPhotoGallery-slider-body .horizontal .description-background {
    height: 7px !important; /* Не устанавливайте слишком высоко. */
    opacity: 0 !important; /* Делать этот блок полностью видимым не стоит. Просто оставьте это как есть. */
}
 
/* Скрывает навигацию по изображению */
 
.wikiaPhotoGallery-slider-body .nav > img, .wikiaPhotoGallery-slider-body .nav p > img {
    display: none !important; /* Просто...Не трогайте это. */
}
 
 
/* Текст и описание настроек закончены, начинаются некоторые махинации. */
 
/* Стиль кругов */
 
.wikiaPhotoGallery-slider-body .nav {
    background: #D3D3D3;
    border: 2px solid #D3D3D3;
    border-radius: 50%;
    width: 7px;
    cursor: pointer;
    height: 7px;
    position: absolute;
}
 
 /* Стиль активного круга */
 
.wikiaPhotoGallery-slider-body .selected {
    background: #A9A9A9;
    border: 2px solid #A9A9A9;
    border-radius: 50%;
    width: 7px;
    cursor: pointer;
    height: 7px;
}
 
/* Устанавливает положение каждого круга, также можно настроить */
 
.wikiaPhotoGallery-slider-body .horizontal .wikiaPhotoGallery-slider-0 .nav {
    right: 70px !important;
}

.wikiaPhotoGallery-slider-body .horizontal .wikiaPhotoGallery-slider-1 .nav {
    right: 50px !important;
}
.wikiaPhotoGallery-slider-body .horizontal .wikiaPhotoGallery-slider-2 .nav {
    right: 30px !important;
}
.wikiaPhotoGallery-slider-body .horizontal .wikiaPhotoGallery-slider-3 .nav {
    right: 10px !important;
}