Иконка ресурса

Дополнение Слайдер для вашего сайта (Адаптивен к OverPro)

Обзор Обсуждение
Совместимость
  1. Лицензия
  2. Пиратская [Null]
На данный момент адаптация под OverPro, это дополнение скорее является обновлением старой темы, но относительно)
Баннер -
У вас нет разрешения на просмотр ссылки. Вход или Регистрация

Конечно можно преобразовать данный слайдер под свой шаблон, не много изменив классы, на это много времени не потратится)

Портировал с LR WEB.

[ATTACH type="full"...
У Вас недостаточно прав для просмотра полного содержимого этого ресурса. Войдите или зарегистрируйтесь.
Установка и настройка
Вставить css, код, JS по пути index/body.tpl и home/index.tpl

Код: 
<div class="row">
    <div class="col-md-12">
                <div class="slider slider-design-one">
                                    <div class="item" style="display: none;">
                        <div class="slide-text">
                            <div class="slide-title slide-item">Испытай удачу прямо сейчас</div>
                            <div class="slide-desc">Забирай бонус каждый день     <i style="color:#aecce4; animation: notification 5s infinite;" class="fa-solid fa-box-open"></i></div>
                                                    </div>
                        <div class="slide-button">
                            <a class="slide-button-text" href="cases" style="border-radius: 10px" target="_self"><div style="color:#6080ff"><b>ОТКРЫТЬ СУНДУК</b></div></a>
                        </div>
                        <img src="Путь к вашему изображению">
                    </div>
                                    <div class="item" style="display: block;">
                        <div class="slide-text">
                            <div class="slide-title slide-item">Понравился сервер? Поддержи его работу!</div>
                            <div class="slide-desc">Стань премиум игроком    <i style="color:#f4a633; animation: notification 5s infinite;" class="fa-solid fa-crown"></i></div>
                                                    </div>
                        <div class="slide-button">
                            <a class="slide-button-text" href="shop" style="border-radius: 10px" target="_self"><div style="color:#6080ff"><b>Приобрести</b></div></a>
                        </div>
                        <img src="Путь к вашему изображению">
                    </div>
                                    <div class="item" style="display: none;">
                        <div class="slide-text">
                            <div class="slide-title slide-item">Беседа проекта ВКонтакте</div>
                            <div class="slide-desc">Присоединяйся к нам!   <i style="color:#aecce4; animation: notification 5s infinite;" class="fa-brands fa-vk"></i></div>
                                                    </div>
                        <div class="slide-button">
                            <a class="slide-button-text" href="https://vk.me/join/5YNGoWsX1KxLf/xibxORjOg0vN_TXD_u0nE=" style="border-radius: 10px" target="_self"><div style="color:#6080ff"><b>В беседу</b></div></a>
                        </div>
                        <img src="Путь к вашему изображению">
                    </div>
                                                <a class="prev" onclick="minusSlide()">❮</a>
                <a class="next" onclick="plusSlide()">❯</a>
            </div>
                            <div class="slider-dots" style="margin-top: -40px; text-align: center; position: relative;">
                                                                                <span class="slider-dots-item-rect slider-dots-item" onclick="currentSlide(1)"></span>
                                                                                                            <span class="slider-dots-item-rect slider-dots-item active" onclick="currentSlide(2)"></span>
                                                                                                            <span class="slider-dots-item-rect slider-dots-item" onclick="currentSlide(3)"></span>
                                                                </div>
                                            </div>
</div>

css: 
<style>
.slider {
  position: relative;
  margin: auto;
  height: 280px;
  margin-bottom: 10px;
  border-radius: 7px;
  background-color: var(--sidebar-color);
}

.slider .item img {
  object-fit: cover;
  width: 100%;
  height: 280px;
  border-radius: 7px;
  border: none !important;
  box-shadow: none !important;
}

.slider .prev, .slider .next {
  cursor: pointer;
  position: absolute;
  top: 0;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

.slider .next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.slider-design-one .slide-text {
  padding: 40px 50px 60px 60px;
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 280px;
}

.slider-design-one .slide-cat {
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 1px;
}

.slider-design-one .slide-cat {
  text-transform: uppercase;
}

.slider-design-one .slide-title {
  color: #fff;
  font-weight: 700;
  font-size: 32px;
}

.slider-design-one .slide-desc {
  max-width: 70%;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.5);
}

.slider-design-one .slide-button a {
  font-size: 20px;
  border: 1px solid #fff;
  color: #fff;
  padding: 5px 15px;
  transition: .3s;
  text-align: center;
}

.slider-design-one .slide-button a:hover {
  background-color: #fff;
  color: #000;
}

.slider-design-one .slide-button {
  position: absolute;
  right: 60px; 
  display: flex;
  flex-direction: column;
  justify-content: center; 
  height: 280px;
  text-transform: uppercase;
}


.slider .item {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@media (max-width: 982px) and (min-width: 768px) {
  
   .slide-desc {
    font-size: 10px !important;
    max-width: 10% !important;
  }

  .slide-title {
    font-size: 20px !important;
  }
    
  .slider-design-one .slide-button {
    position: absolute !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    height: 240px !important;
    text-transform: uppercase !important;
    font-size: 16px !important;
    left: 50px !important;
    top: 50px !important;
    right: unset;
}
}

@media (max-width: 429px) and (min-width: 0px) {
  .slider-design-one .slide-desc {
    font-size: 13px !important;
    max-width: 100% !important;
  }

  .slider-design-one .slide-title {
    font-size: 24px !important;
  }

  .slider-design-one .slide-button a {
    font-size: 14px !important;
     position: relative;
     text-transform: uppercase;
     top: 85px;
     right: center;
     left: center;
  }
}


/* Второй дизайн */
.slider {
  position: relative;
  margin: auto;
  height: 280px;
  margin-bottom: 15px;
  background-color: var(--sidebar-color);
}

.slider .item img {
  object-fit: cover;
  width: 100%;
  height: 280px;
  border: none !important;
  box-shadow: none !important;
}

.slider .prev, .slider .next {
  cursor: pointer;
  position: absolute;
  top: 0;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

.slider .next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.slider-design-second .slide-text {
  padding: 40px 50px 60px 60px;
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 280px;
}

.slider-design-second .slide-cat {
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 1px;
}

.slider-design-second .slide-cat {
  text-transform: uppercase;
}

.slider-design-second .slide-title {
  color: #fff;
  font-weight: 700;
  font-size: 40px;
}


-design-second .slide-desc {
  max-width: 50%;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.5);
}

.slider-design-second .slide-button a {
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  padding: 15px 30px;
  background-color: var(--span-color);
  transition: .3s;
}

.slider-design-second .slide-button a:hover {
  background-color: var(--span-color-back);
}

.active,
.slider-design-second .slider-dots-item:hover {
  background-color: rgba(255, 255, 255, 0.7);
}


.slider .item {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@media (max-width: 767.98px) and (min-width: 530px) {
  .slide-desc {
    font-size: 14px !important;
    max-width: 70% !important;
  }

  .slide-title {
    font-size: 27px !important;
  }
}

@media (max-width: 529px) and (min-width: 0px) {
  .slide-desc {
    font-size: 13px !important;
    max-width: 100% !important;
  }

  .slide-title {
    font-size: 24px !important;
  }
}

@-webkit-keyframes fade {
  from {
      opacity: .4
  }
  to {
      opacity: 1
  }
}
@keyframes fade {
  from {
      opacity: .4
  }
  to {
      opacity: 1
  }
}
  </style>

JS: 
<script>
  /* Индекс слайда по умолчанию */
var slideIndex = 2;
showSlides(slideIndex);

/* Функция увеличивает индекс на 1, показывает следующй слайд*/
function plusSlide() {
    showSlides(slideIndex += 1);
}

/* Функция уменьшяет индекс на 1, показывает предыдущий слайд*/
function minusSlide() {
    showSlides(slideIndex -= 1);
}

/* Устанавливает текущий слайд */
function currentSlide(n) {
    showSlides(slideIndex = n);
}

/* Основная функция слайдера */
function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("item");
    var dots = document.getElementsByClassName("slider-dots-item");
    if (n > slides.length) {
      slideIndex = 1
    }
    if (n < 1) {
        slideIndex = slides.length
    }
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex - 1].style.display = "block";
    dots[slideIndex - 1].className += " active";
}
 
  autoslide: true
  </script>
Автор
BalzeFreame
Просмотры
942
Первый выпуск
Обновление
Оценка
0,00 звёзд 0 оценок
Обсудить ресурс

Другие ресурсы пользователя BalzeFreame

Поделиться ресурсом

Сверху Снизу