1

Есть слайдер, как добавить к нему dots?(точки под слайдером для переключения между слайдами) уже голову сломал, помогите пожалуйста. вот так выглядит

$(document).on('ready', function() {
  var slide = $('.slider-single');
  var slideTotal = slide.length - 1;
  var slideCurrent = -1;

  function slideInitial() {
    slide.addClass('proactivede');
    setTimeout(function() {
      slideRight();
    }, 500);
  }

  function slideRight() {
    if (slideCurrent < slideTotal) {
      slideCurrent++;
    } else {
      slideCurrent = 0;
    }

    if (slideCurrent > 0) {
      var preactiveSlide = slide.eq(slideCurrent - 1);
    } else {
      var preactiveSlide = slide.eq(slideTotal);
    }
    var activeSlide = slide.eq(slideCurrent);
    if (slideCurrent < slideTotal) {
      var proactiveSlide = slide.eq(slideCurrent + 1);
    } else {
      var proactiveSlide = slide.eq(0);

    }

    slide.each(function() {
      var thisSlide = $(this);
      if (thisSlide.hasClass('preactivede')) {
        thisSlide.removeClass('preactivede preactive active proactive').addClass('proactivede');
      }
      if (thisSlide.hasClass('preactive')) {
        thisSlide.removeClass('preactive active proactive proactivede').addClass('preactivede');
      }
    });
    preactiveSlide.removeClass('preactivede active proactive proactivede').addClass('preactive');
    activeSlide.removeClass('preactivede preactive proactive proactivede').addClass('active');
    proactiveSlide.removeClass('preactivede preactive active proactivede').addClass('proactive');
  }

  function slideLeft() {
    if (slideCurrent > 0) {
      slideCurrent--;
    } else {
      slideCurrent = slideTotal;
    }

    if (slideCurrent < slideTotal) {
      var proactiveSlide = slide.eq(slideCurrent + 1);
    } else {
      var proactiveSlide = slide.eq(0);
    }
    var activeSlide = slide.eq(slideCurrent);
    if (slideCurrent > 0) {
      var preactiveSlide = slide.eq(slideCurrent - 1);
    } else {
      var preactiveSlide = slide.eq(slideTotal);
    }
    slide.each(function() {
      var thisSlide = $(this);
      if (thisSlide.hasClass('proactivede')) {
        thisSlide.removeClass('preactive active proactive proactivede').addClass('preactivede');
      }
      if (thisSlide.hasClass('proactive')) {
        thisSlide.removeClass('preactivede preactive active proactive').addClass('proactivede');
      }
    });
    preactiveSlide.removeClass('preactivede active proactive proactivede').addClass('preactive');
    activeSlide.removeClass('preactivede preactive proactive proactivede').addClass('active');
    proactiveSlide.removeClass('preactivede preactive active proactivede').addClass('proactive');
  }
  var left = $('.slider-left');
  var right = $('.slider-right');
  left.on('click', function() {
    slideLeft();
  });
  right.on('click', function() {
    slideRight();
  });
  slideInitial();
});
@keyframes heartbeat {
  0% {
    transform: scale(0);
  }
  25% {
    transform: scale(1.2);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.slider-container {
  position: relative;
  top: 0%;
  width: 100%;
  height: 700px;
  margin: 0px 0 0 0px;
  overflow: hidden;
}

.slider-container .slider-content {
  position: relative;
  left: 50%;
  top: 40%;
  width: 70%;
  height: 60%;
  transform: translate(-50%, -55%);
}

.slider-container .slider-content .slider-single {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: z-index 0ms 250ms;
}

.slider-container .slider-content .slider-single .slider-single-image {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.2);
  transition: 500ms cubic-bezier(0.17, 0.67, 0.55, 1.43);
  transform: scale(0);
  opacity: 0;
}

.slider-container .slider-content .slider-single .slider-single-download {
  position: absolute;
  display: block;
  left: 20px;
  bottom: 22px;
  padding: 10px;
  color: #333333;
  background-color: #fdc84b;
  font-size: 18px;
  font-weight: 600;
  font-family: 'Open Sans', sans-serif;
  border-radius: 5px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
  transition: 500ms cubic-bezier(0.17, 0.67, 0.55, 1.43);
  opacity: 0;
}

.slider-container .slider-content .slider-single .slider-single-download:hover,
.slider-container .slider-content .slider-single .slider-single-download:focus {
  outline: none;
  text-decoration: none;
}

.slider-container .slider-content .slider-single .slider-single-title {
  display: block;
  float: left;
  margin: 16px 0 0 20px;
  font-size: 20px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  color: #ffffff;
  transition: 500ms cubic-bezier(0.17, 0.67, 0.55, 1.43);
  opacity: 0;
}

.slider-container .slider-content .slider-single .slider-single-likes {
  display: block;
  float: right;
  margin: 16px 20px 0 0;
  transition: 500ms cubic-bezier(0.17, 0.67, 0.55, 1.43);
  opacity: 0;
}

.slider-container .slider-content .slider-single .slider-single-likes i {
  font-size: 20px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
  color: #ff6060;
  transition: 500ms cubic-bezier(0.17, 0.67, 0.55, 1.43);
  transform: scale(0);
}

.slider-container .slider-content .slider-single .slider-single-likes p {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  color: #787878;
}

.slider-container .slider-content .slider-single .slider-single-likes:hover,
.slider-container .slider-content .slider-single .slider-single-likes:focus {
  outline: none;
  text-decoration: none;
}

.slider-container .slider-content .slider-single.preactivede .slider-single-image {
  transform: translateX(-50%) scale(0);
}

.slider-container .slider-content .slider-single.preactive {
  z-index: 1;
}

.slider-container .slider-content .slider-single.preactive .slider-single-image {
  opacity: .3;
  transform: translateX(-25%) scale(0.8);
}

.slider-container .slider-content .slider-single.preactive .slider-single-download {
  transform: translateX(-150px);
}

.slider-container .slider-content .slider-single.preactive .slider-single-title {
  transform: translateX(-150px);
}

.slider-container .slider-content .slider-single.preactive .slider-single-likes {
  transform: translateX(-150px);
}

.slider-container .slider-content .slider-single.proactive {
  z-index: 1;
}

.slider-container .slider-content .slider-single.proactive .slider-single-image {
  opacity: .3;
  transform: translateX(25%) scale(0.8);
}

.slider-container .slider-content .slider-single.proactive .slider-single-download {
  transform: translateX(150px);
}

.slider-container .slider-content .slider-single.proactive .slider-single-title {
  transform: translateX(150px);
}

.slider-container .slider-content .slider-single.proactive .slider-single-likes {
  transform: translateX(150px);
}

.slider-container .slider-content .slider-single.proactivede .slider-single-image {
  transform: translateX(50%) scale(0);
}

.slider-container .slider-content .slider-single.active {
  z-index: 2;
}

.slider-container .slider-content .slider-single.active .slider-single-image {
  opacity: 1;
  transform: translateX(0%) scale(1);
}

.slider-container .slider-content .slider-single.active .slider-single-download {
  opacity: 1;
  transition-delay: 100ms;
  transform: translateX(0px);
}

.slider-container .slider-content .slider-single.active .slider-single-title {
  opacity: 1;
  transition-delay: 200ms;
  transform: translateX(0px);
}

.slider-container .slider-content .slider-single.active .slider-single-likes {
  opacity: 1;
  transition-delay: 300ms;
  transform: translateX(0px);
}

.slider-container .slider-content .slider-single.active .slider-single-likes i {
  animation-name: heartbeat;
  animation-duration: 500ms;
  animation-delay: 900ms;
  animation-interation: 1;
  animation-fill-mode: forwards;
}

.slider-container .slider-left {
  position: absolute;
  z-index: 3;
  display: block;
  right: 85%;
  top: 36%;
  color: #ffffff;
  transform: translateY(-50%);
  padding: 20px 15px;
  border-top: 2px solid #fdc84b;
  border-right: 2px solid #fdc84b;
  border-bottom: 2px solid #fdc84b;
  border-left: 2px solid #fdc84b;
  margin-right: -2px;
}

.slider-container .slider-right {
  position: absolute;
  z-index: 3;
  display: block;
  left: 85%;
  top: 36%;
  color: #ffffff;
  transform: translateY(-50%);
  padding: 20px 15px;
  border-top: 2px solid #fdc84b;
  border-right: 2px solid #fdc84b;
  border-bottom: 2px solid #fdc84b;
  border-left: 2px solid #fdc84b;
  margin-left: -2px;
}

.menu-left {
  width: 84%;
  display: inline-block;
  float: left;
}

.menu-left h2 {
  font-size: 20px;
  color: #ff7624;
  font-weight: 400;
}

.menu-left p {
  font-size: 15px;
  color: #424c5f;
  line-height: 1.6em;
}

.menu-right {
  width: 16%;
  display: inline-block;
  float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider-container">
  <div class="slider-content">
    <div class="slider-single">
      <img class="slider-single-image" src="img/project_preview_1.png" alt="6" />
      <div class="square-1-project">
        <p></p>
      </div>
    </div>
    <div class="slider-single">
      <img class="slider-single-image" src="img/project_preview_3.png" alt="6" />
      <div class="square-1-project">
        <p></p>
      </div>
    </div>
    <div class="slider-single">
      <img class="slider-single-image" src="img/project_preview_2.png" alt="6" />
      <div class="square-1-project">
        <p></p>
      </div>
    </div>
  </div>
  <a class="slider-left" href="javascript:void(0);"></a>
  <a class="slider-right" href="javascript:void(0);"></a>
</div>

6
  • Кто сказал, что z-index поддается плавной трансформации transition: z-index 0ms 250ms;
    – Air
    22 авг 2018 в 0:49
  • И если честно не понимаю что такое dots
    – Air
    22 авг 2018 в 0:50
  • dots это точки под слайдером для переключения между слайдами.
    – ZANY BHF
    22 авг 2018 в 1:37
  • Ну для начала вам нужен метод перехода на слайд по номеру. И через него будет работать и next и prev. Точки тогда будет уже просто сделать. 22 авг 2018 в 5:56
  • Если вы не изобретаете велосипед - проще использовать готовые настраиваемые решения вроде slick-slider или owl-carousel.
    – zhurof
    22 авг 2018 в 6:10

1 ответ 1

2

Как-то так... (То,что добавил, выделил комментариями)

$(document).on('ready', function() {
  var slide = $('.slider-single');
  var slideTotal = slide.length - 1;
  var slideCurrent = -1;

  /* Функция добавления точек по количеству слайдов */
  var slideDotWrap = $('.slider-dot-wrapper');
  var slideDotRef = $('.slider-dot');

  function slideDotAdd() {
    for (var i = 0; i < slideTotal; i++) {
      slideDotWrap.append(slideDotRef.clone());
    };
    slideDotWrap.on('click', '.slider-dot', function() {
      slideCurrent = $(this).index() - 1;
      slideRight();
    });
    slideDotRef = $('.slider-dot');
  }
  /* Функция подсветки активной точки */
  function slideDotCurr() {
    $('div.slider-dot').css('background', 'none');
    slideDotRef.eq(slideCurrent).css('background', '#fdc84b');
  }
  /* ----- */

  function slideInitial() {
    slide.addClass('proactivede');
    slideDotAdd();
    setTimeout(function() {
      slideRight();
    }, 500);
  }

  function slideRight() {
    if (slideCurrent < slideTotal) {
      slideCurrent++;
    } else {
      slideCurrent = 0;
    }

    slideDotCurr(); // Подсвечиваем активную точку

    if (slideCurrent > 0) {
      var preactiveSlide = slide.eq(slideCurrent - 1);
    } else {
      var preactiveSlide = slide.eq(slideTotal);
    }
    var activeSlide = slide.eq(slideCurrent);
    if (slideCurrent < slideTotal) {
      var proactiveSlide = slide.eq(slideCurrent + 1);
    } else {
      var proactiveSlide = slide.eq(0);

    }

    slide.each(function() {
      var thisSlide = $(this);
      if (thisSlide.hasClass('preactivede')) {
        thisSlide.removeClass('preactivede preactive active proactive').addClass('proactivede');
      }
      if (thisSlide.hasClass('preactive')) {
        thisSlide.removeClass('preactive active proactive proactivede').addClass('preactivede');
      }
    });
    preactiveSlide.removeClass('preactivede active proactive proactivede').addClass('preactive');
    activeSlide.removeClass('preactivede preactive proactive proactivede').addClass('active');
    proactiveSlide.removeClass('preactivede preactive active proactivede').addClass('proactive');
  }

  function slideLeft() {
    if (slideCurrent > 0) {
      slideCurrent--;
    } else {
      slideCurrent = slideTotal;
    }

    slideDotCurr(); // Подсвечиваем активную точку

    if (slideCurrent < slideTotal) {
      var proactiveSlide = slide.eq(slideCurrent + 1);
    } else {
      var proactiveSlide = slide.eq(0);
    }
    var activeSlide = slide.eq(slideCurrent);
    if (slideCurrent > 0) {
      var preactiveSlide = slide.eq(slideCurrent - 1);
    } else {
      var preactiveSlide = slide.eq(slideTotal);
    }
    slide.each(function() {
      var thisSlide = $(this);
      if (thisSlide.hasClass('proactivede')) {
        thisSlide.removeClass('preactive active proactive proactivede').addClass('preactivede');
      }
      if (thisSlide.hasClass('proactive')) {
        thisSlide.removeClass('preactivede preactive active proactive').addClass('proactivede');
      }
    });
    preactiveSlide.removeClass('preactivede active proactive proactivede').addClass('preactive');
    activeSlide.removeClass('preactivede preactive proactive proactivede').addClass('active');
    proactiveSlide.removeClass('preactivede preactive active proactivede').addClass('proactive');
  }
  var left = $('.slider-left');
  var right = $('.slider-right');
  left.on('click', function() {
    slideLeft();
  });
  right.on('click', function() {
    slideRight();
  });
  slideInitial();
});
@keyframes heartbeat {
  0% {
    transform: scale(0);
  }
  25% {
    transform: scale(1.2);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.slider-container {
  position: relative;
  top: 0%;
  width: 100%;
  height: 700px;
  margin: 0px 0 0 0px;
  overflow: hidden;
  text-align: center;
}

.slider-container .slider-content {
  position: relative;
  left: 50%;
  top: 40%;
  width: 70%;
  height: 60%;
  transform: translate(-50%, -55%);
}

.slider-container .slider-content .slider-single {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: z-index 0ms 250ms;
}

.slider-container .slider-content .slider-single .slider-single-image {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.2);
  transition: 500ms cubic-bezier(0.17, 0.67, 0.55, 1.43);
  transform: scale(0);
  opacity: 0;
}

.slider-container .slider-content .slider-single .slider-single-download {
  position: absolute;
  display: block;
  left: 20px;
  bottom: 22px;
  padding: 10px;
  color: #333333;
  background-color: #fdc84b;
  font-size: 18px;
  font-weight: 600;
  font-family: 'Open Sans', sans-serif;
  border-radius: 5px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
  transition: 500ms cubic-bezier(0.17, 0.67, 0.55, 1.43);
  opacity: 0;
}

.slider-container .slider-content .slider-single .slider-single-download:hover,
.slider-container .slider-content .slider-single .slider-single-download:focus {
  outline: none;
  text-decoration: none;
}

.slider-container .slider-content .slider-single .slider-single-title {
  display: block;
  float: left;
  margin: 16px 0 0 20px;
  font-size: 20px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  color: #ffffff;
  transition: 500ms cubic-bezier(0.17, 0.67, 0.55, 1.43);
  opacity: 0;
}

.slider-container .slider-content .slider-single .slider-single-likes {
  display: block;
  float: right;
  margin: 16px 20px 0 0;
  transition: 500ms cubic-bezier(0.17, 0.67, 0.55, 1.43);
  opacity: 0;
}

.slider-container .slider-content .slider-single .slider-single-likes i {
  font-size: 20px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
  color: #ff6060;
  transition: 500ms cubic-bezier(0.17, 0.67, 0.55, 1.43);
  transform: scale(0);
}

.slider-container .slider-content .slider-single .slider-single-likes p {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  color: #787878;
}

.slider-container .slider-content .slider-single .slider-single-likes:hover,
.slider-container .slider-content .slider-single .slider-single-likes:focus {
  outline: none;
  text-decoration: none;
}

.slider-container .slider-content .slider-single.preactivede .slider-single-image {
  transform: translateX(-50%) scale(0);
}

.slider-container .slider-content .slider-single.preactive {
  z-index: 1;
}

.slider-container .slider-content .slider-single.preactive .slider-single-image {
  opacity: .3;
  transform: translateX(-25%) scale(0.8);
}

.slider-container .slider-content .slider-single.preactive .slider-single-download {
  transform: translateX(-150px);
}

.slider-container .slider-content .slider-single.preactive .slider-single-title {
  transform: translateX(-150px);
}

.slider-container .slider-content .slider-single.preactive .slider-single-likes {
  transform: translateX(-150px);
}

.slider-container .slider-content .slider-single.proactive {
  z-index: 1;
}

.slider-container .slider-content .slider-single.proactive .slider-single-image {
  opacity: .3;
  transform: translateX(25%) scale(0.8);
}

.slider-container .slider-content .slider-single.proactive .slider-single-download {
  transform: translateX(150px);
}

.slider-container .slider-content .slider-single.proactive .slider-single-title {
  transform: translateX(150px);
}

.slider-container .slider-content .slider-single.proactive .slider-single-likes {
  transform: translateX(150px);
}

.slider-container .slider-content .slider-single.proactivede .slider-single-image {
  transform: translateX(50%) scale(0);
}

.slider-container .slider-content .slider-single.active {
  z-index: 2;
}

.slider-container .slider-content .slider-single.active .slider-single-image {
  opacity: 1;
  transform: translateX(0%) scale(1);
}

.slider-container .slider-content .slider-single.active .slider-single-download {
  opacity: 1;
  transition-delay: 100ms;
  transform: translateX(0px);
}

.slider-container .slider-content .slider-single.active .slider-single-title {
  opacity: 1;
  transition-delay: 200ms;
  transform: translateX(0px);
}

.slider-container .slider-content .slider-single.active .slider-single-likes {
  opacity: 1;
  transition-delay: 300ms;
  transform: translateX(0px);
}

.slider-container .slider-content .slider-single.active .slider-single-likes i {
  animation-name: heartbeat;
  animation-duration: 500ms;
  animation-delay: 900ms;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.slider-container .slider-left {
  position: absolute;
  z-index: 3;
  display: block;
  right: 85%;
  top: 36%;
  color: #ffffff;
  transform: translateY(-50%);
  padding: 20px 15px;
  border-top: 2px solid #fdc84b;
  border-right: 2px solid #fdc84b;
  border-bottom: 2px solid #fdc84b;
  border-left: 2px solid #fdc84b;
  margin-right: -2px;
}

.slider-container .slider-right {
  position: absolute;
  z-index: 3;
  display: block;
  left: 85%;
  top: 36%;
  color: #ffffff;
  transform: translateY(-50%);
  padding: 20px 15px;
  border-top: 2px solid #fdc84b;
  border-right: 2px solid #fdc84b;
  border-bottom: 2px solid #fdc84b;
  border-left: 2px solid #fdc84b;
  margin-left: -2px;
}


/* Контейнер для точек */

.slider-container .slider-dot-wrapper {
  position: absolute;
  display: inline-flex;
  flex-flow: row nowrap;
  bottom: 35%;
  transform: translate(-50%, -50%);
}


/* Точка */

.slider-container .slider-dot-wrapper .slider-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #444;
  margin: 5px;
  box-shadow: 0px 0px 6px 1px black;
}

.slider-container .slider-dot-wrapper .slider-dot:hover {
  border: 2px solid #fdd01c;
}


/*  */

.menu-left {
  width: 84%;
  display: inline-block;
  float: left;
}

.menu-left h2 {
  font-size: 20px;
  color: #ff7624;
  font-weight: 400;
}

.menu-left p {
  font-size: 15px;
  color: #424c5f;
  line-height: 1.6em;
}

.menu-right {
  width: 16%;
  display: inline-block;
  float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider-container">
  <div class="slider-content">
    <div class="slider-single">
      <img class="slider-single-image" src="http://via.placeholder.com/160x120/ffaaaa/ffffff?text=1" alt="6" />
      <div class="square-1-project">
        <p></p>
      </div>
    </div>
    <div class="slider-single">
      <img class="slider-single-image" src="http://via.placeholder.com/160x120/ffcc66/ffffff?text=2" alt="6" />
      <div class="square-1-project">
        <p></p>
      </div>
    </div>
    <div class="slider-single">
      <img class="slider-single-image" src="http://via.placeholder.com/160x120/00CED1/444444?text=3" alt="6" />
      <div class="square-1-project">
        <p></p>
      </div>
    </div>
  </div>
  <a class="slider-left" href="javascript:void(0);"></a>
  <a class="slider-right" href="javascript:void(0);"></a>
  <!-- Контейнер с dot-ами -->
  <div class="slider-dot-wrapper">
    <div class="slider-dot"></div>
  </div>
  <!--  -->
</div>

3
  • Да именно нужен переход по клику на точку, а так вообще отлично сделано, спасибо за ответ)
    – ZANY BHF
    22 авг 2018 в 10:03
  • @ZANYBHF готово. Проверяйте.
    – UModeL
    22 авг 2018 в 10:04
  • отлично работает, огромная благодарность!
    – ZANY BHF
    22 авг 2018 в 10:07

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.