0

При переключении thumbnail класс active отрабатывается корректно. Но при переключении слайдов стрелками, на втором слайде фиксируется класс active. Идея в том, чтобы при переключении стрелками, класс active переключался с сохранением соответствия элементов друг другу. (Например: Желтый - Желтый, Красный - Красный и т.д.)

Помогите разобраться

var slideNow = 1;
    var slideCount = $('#portfolio_slider .slider_wrap').children().length;
    var navBtnId = 0;
    var translateWidth = 0;

    $(document).ready(function() {
        $('#portfolio_slider .viewport').hover(
            function () {
                $('.slider_btns').css({'opacity' : '1', 'transition' : 'all ease 0.3s'});
            },
            function () {
                $('.slider_btns').css('opacity','0');
        });
        $('.slider_arrow').click(function() {
            $(".slider_wrap .slide,.slider_nav .slider_nav_btn").removeClass("active");
            $(".slider_nav .slider_nav_btn:eq(" + $(this).addClass("active").index() + ")").addClass('active')
        });
        $(".slider_nav .slider_nav_btn:eq(" + $(".slider_wrap .slide").index() + ")").addClass('active')
        
        $('.next_btn').click(function() {
            nextSlide();
        });
        $('.prev_btn').click(function() {
            prevSlide();
        });

        $('.slider_nav_btn').click(function() {
            $('.slider_nav_btn').removeClass('active');
            $(this).addClass('active');
            navBtnId = $(this).index();

            if (navBtnId + 1 != slideNow) {
                translateWidth = -$('#portfolio_slider .viewport').width() * (navBtnId);
                $('#portfolio_slider .slider_wrap').css({
                    'transform': 'translate(' + translateWidth + 'px, 0)',
                    '-webkit-transform': 'translate(' + translateWidth + 'px, 0)',
                    '-ms-transform': 'translate(' + translateWidth + 'px, 0)',
                });
                slideNow = navBtnId + 1;
            }
        });
    });


    function nextSlide() {
        if (slideNow == slideCount || slideNow <= 0 || slideNow > slideCount) {
            $('#portfolio_slider .slider_wrap').css('transform', 'translate(0, 0)');
            slideNow = 1;
        } else {
            translateWidth = -$('#portfolio_slider .viewport').width() * (slideNow);
            $('#portfolio_slider .slider_wrap').css({
                'transform': 'translate(' + translateWidth + 'px, 0)',
                '-webkit-transform': 'translate(' + translateWidth + 'px, 0)',
                '-ms-transform': 'translate(' + translateWidth + 'px, 0)',
            });
            slideNow++;
        }
    }

    function prevSlide() {
        if (slideNow == 1 || slideNow <= 0 || slideNow > slideCount) {
            translateWidth = -$('#portfolio_slider .viewport').width() * (slideCount - 1);
            $('#portfolio_slider .slider_wrap').css({
                'transform': 'translate(' + translateWidth + 'px, 0)',
                '-webkit-transform': 'translate(' + translateWidth + 'px, 0)',
                '-ms-transform': 'translate(' + translateWidth + 'px, 0)',
            });
            slideNow = slideCount;
        } else {
            translateWidth = -$('#portfolio_slider .viewport').width() * (slideNow - 2);
            $('#portfolio_slider .slider_wrap').css({
                'transform': 'translate(' + translateWidth + 'px, 0)',
                '-webkit-transform': 'translate(' + translateWidth + 'px, 0)',
                '-ms-transform': 'translate(' + translateWidth + 'px, 0)',
            });
            slideNow--;
        }
    }
#portfolio_slider {
  width: 100%;
}
#portfolio_slider .viewport {
  width: 100%;
  position: relative;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  text-align: center;
  height: 200px;
}
#portfolio_slider .viewport .slider_wrap {
  position: relative;
  width: calc(100% * 5);
  -webkit-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
  -webkit-transition-timing-function: cubic-bezier(0.67, 0.01, 0.23, 1);
  -o-transition-timing-function: cubic-bezier(0.67, 0.01, 0.23, 1);
  transition-timing-function: cubic-bezier(0.67, 0.01, 0.23, 1);
}
#portfolio_slider .viewport .slider_wrap .slide {
  width: calc(100%/5);
  list-style: none;
  display: inline;
  float: left;
}
#portfolio_slider .viewport .slider_wrap .slide .slide_img {
  width: 100%;
  height: auto;
}
#portfolio_slider .viewport .slider_wrap {
  margin: 0;
  padding: 0;
}
#portfolio_slider .viewport .slider_wrap .slide .main_slide {
  width: 100%;
  height: 200px;
}
#portfolio_slider .viewport .slider_wrap .slide .main_slide.red {
  background: red;
}
#portfolio_slider .viewport .slider_wrap .slide .main_slide.blue {
  background: blue;
}
#portfolio_slider .viewport .slider_wrap .slide .main_slide.green {
  background: green;
}
#portfolio_slider .viewport .slider_wrap .slide .main_slide.purple {
  background: purple;
}
#portfolio_slider .viewport .slider_wrap .slide .main_slide.yellow {
  background: yellow;
}
#portfolio_slider .viewport .slider_btns {
  width: 100%;
  padding: 0;
  margin: 0;
  text-align: center;
  opacity: 0;
}
#portfolio_slider .viewport .slider_btns .prev_btn,
#portfolio_slider .viewport .slider_btns .next_btn {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: #fff;
  border-radius: 50%;
  top: calc(25% - 25px);
  line-height: 50px;
  font-size: 16px;
}
#portfolio_slider .viewport .slider_btns .prev_btn:hover,
#portfolio_slider .viewport .slider_btns .next_btn:hover {
  cursor: pointer;
}
#portfolio_slider .viewport .slider_btns .prev_btn {
  left: 20px;
}
#portfolio_slider .viewport .slider_btns .next_btn {
  right: 20px;
}
#portfolio_slider .viewport .slider_btns:hover {
  cursor: pointer;
}
.slider_nav {
 display: table;
}
.slider_nav .slider_nav_btn {
  display: table-cell;
  padding: 5px;
}
.slider_nav .slider_nav_btn .thumbnail_slide {
  width: 100px;
  height: 100px;
}
.slider_nav .slider_nav_btn.active .thumbnail_slide {
  border: 3px solid #333;
}
.slider_nav .slider_nav_btn .thumbnail_slide.red {
  background: red;
}
.slider_nav .slider_nav_btn .thumbnail_slide.blue {
  background: blue;
}
.slider_nav .slider_nav_btn .thumbnail_slide.green {
  background: green;
}
.slider_nav .slider_nav_btn .thumbnail_slide.purple {
  background: purple;
}
.slider_nav .slider_nav_btn .thumbnail_slide.yellow {
  background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="portfolio_slider">
        <div class="viewport">
            <div class="slider_wrap">
                <div class="slide active"><div class="main_slide red"></div></div>
                <div class="slide"><div class="main_slide blue"></div></div>
                <div class="slide"><div class="main_slide green"></div></div>
                <div class="slide"><div class="main_slide purple"></div></div>
                <div class="slide"><div class="main_slide yellow"></div></div>
            </div>
            <div class="slider_btns">
                <div class="prev_btn slider_arrow"> PREV </div>
                <div class="next_btn slider_arrow"> NEXT </div>
            </div>
        </div>
</div>
<div class="slider_nav">
    <div class="slider_nav_btn active"><div class="thumbnail_slide red"></div></div>
    <div class="slider_nav_btn"><div class="thumbnail_slide blue"></div></div>
    <div class="slider_nav_btn"><div class="thumbnail_slide green"></div></div>
    <div class="slider_nav_btn"><div class="thumbnail_slide purple"></div></div>
    <div class="slider_nav_btn"><div class="thumbnail_slide yellow"></div></div>
</div>

1 ответ 1

0

Как-то перемудрили) Можно было еще сократить код, но не трогал остальные куски, чтобы лишний раз не запутать. Комментарии только там, где были изменения:

$(document).ready(function() { // всё обернул в ready, потому что сильно захотелось.
  var slideNow = 0; // в JS счет начинается с нуля.
  var slideCount = $('#portfolio_slider .slider_wrap').children().length;
  var navBtnId = 0;
  var translateWidth = 0;

  $('#portfolio_slider .viewport').hover(
    function () {
      $('.slider_btns').css({'opacity' : '1', 'transition' : 'all ease 0.3s'});
    },
    function () {
      $('.slider_btns').css('opacity','0');
    });
  $('.slider_arrow').click(function() {
    $(".slider_wrap .slide,.slider_nav .slider_nav_btn").removeClass("active");
    $(".slider_nav .slider_nav_btn:eq(" + $(this).addClass("active").index() + ")").addClass('active')
  });
  $(".slider_nav .slider_nav_btn:eq(" + $(".slider_wrap .slide").index() + ")").addClass('active')

  $('.next_btn').click(function() {
    nextSlide();
  });
  $('.prev_btn').click(function() {
    prevSlide();
  });

  $('.slider_nav_btn').click(function() {
    $('.slider_nav_btn').removeClass('active');
    $(this).addClass('active');
    navBtnId = $(this).index();

    if (navBtnId + 1 != slideNow) {
      translateWidth = -$('#portfolio_slider .viewport').width() * (navBtnId);
      $('#portfolio_slider .slider_wrap').css({
        'transform': 'translate(' + translateWidth + 'px, 0)',
        '-webkit-transform': 'translate(' + translateWidth + 'px, 0)',
        '-ms-transform': 'translate(' + translateWidth + 'px, 0)',
      });
      slideNow = navBtnId + 1;
    }
  });

function nextSlide() {
  /* slideNow = ... перед тем как дать ему значение - запускаем проверку. 
  slideNow равен slideCount - 1 ? если да, то ему дальше некуда расти, возвращается на 0
  а если нет, увеличится на единицу.*/
  slideNow = (slideNow == slideCount - 1) ? 0 : ( slideNow + 1 );
  translateWidth = -$('#portfolio_slider .viewport').width() * ( slideNow );
  $('#portfolio_slider .slider_wrap').css({
    'transform': 'translate(' + translateWidth + 'px, 0)',
    '-webkit-transform': 'translate(' + translateWidth + 'px, 0)',
    '-ms-transform': 'translate(' + translateWidth + 'px, 0)',
  });
  
  /* Убираем класс со всех кнопок, добавляем его на текущую, по индексу */
  $('.slider_nav_btn').removeClass('active');
  $('.slider_nav_btn').eq(slideNow).addClass('active');
}

/* Та же история, только в другую сторону */
function prevSlide() {  
  slideNow = (slideNow == 0) ? (slideCount - 1) : slideNow - 1;
  translateWidth = -$('#portfolio_slider .viewport').width() * ( slideNow );
  $('#portfolio_slider .slider_wrap').css({
    'transform': 'translate(' + translateWidth + 'px, 0)',
    '-webkit-transform': 'translate(' + translateWidth + 'px, 0)',
    '-ms-transform': 'translate(' + translateWidth + 'px, 0)',
  });
  $('.slider_nav_btn').removeClass('active');
  $('.slider_nav_btn').eq(slideNow).addClass('active');
}

});
#portfolio_slider {
  width: 100%;
}
#portfolio_slider .viewport {
  width: 100%;
  position: relative;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  text-align: center;
  height: 200px;
}
#portfolio_slider .viewport .slider_wrap {
  position: relative;
  width: calc(100% * 5);
  -webkit-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
  -webkit-transition-timing-function: cubic-bezier(0.67, 0.01, 0.23, 1);
  -o-transition-timing-function: cubic-bezier(0.67, 0.01, 0.23, 1);
  transition-timing-function: cubic-bezier(0.67, 0.01, 0.23, 1);
}
#portfolio_slider .viewport .slider_wrap .slide {
  width: calc(100%/5);
  list-style: none;
  display: inline;
  float: left;
}
#portfolio_slider .viewport .slider_wrap .slide .slide_img {
  width: 100%;
  height: auto;
}
#portfolio_slider .viewport .slider_wrap {
  margin: 0;
  padding: 0;
}
#portfolio_slider .viewport .slider_wrap .slide .main_slide {
  width: 100%;
  height: 200px;
}
#portfolio_slider .viewport .slider_wrap .slide .main_slide.red {
  background: red;
}
#portfolio_slider .viewport .slider_wrap .slide .main_slide.blue {
  background: blue;
}
#portfolio_slider .viewport .slider_wrap .slide .main_slide.green {
  background: green;
}
#portfolio_slider .viewport .slider_wrap .slide .main_slide.purple {
  background: purple;
}
#portfolio_slider .viewport .slider_wrap .slide .main_slide.yellow {
  background: yellow;
}
#portfolio_slider .viewport .slider_btns {
  width: 100%;
  padding: 0;
  margin: 0;
  text-align: center;
  opacity: 0;
}
#portfolio_slider .viewport .slider_btns .prev_btn,
#portfolio_slider .viewport .slider_btns .next_btn {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: #fff;
  border-radius: 50%;
  top: calc(25% - 25px);
  line-height: 50px;
  font-size: 16px;
}
#portfolio_slider .viewport .slider_btns .prev_btn:hover,
#portfolio_slider .viewport .slider_btns .next_btn:hover {
  cursor: pointer;
}
#portfolio_slider .viewport .slider_btns .prev_btn {
  left: 20px;
}
#portfolio_slider .viewport .slider_btns .next_btn {
  right: 20px;
}
#portfolio_slider .viewport .slider_btns:hover {
  cursor: pointer;
}
.slider_nav {
 display: table;
}
.slider_nav .slider_nav_btn {
  display: table-cell;
  padding: 5px;
}
.slider_nav .slider_nav_btn .thumbnail_slide {
  width: 100px;
  height: 100px;
}
.slider_nav .slider_nav_btn.active .thumbnail_slide {
  border: 3px solid #333;
}
.slider_nav .slider_nav_btn .thumbnail_slide.red {
  background: red;
}
.slider_nav .slider_nav_btn .thumbnail_slide.blue {
  background: blue;
}
.slider_nav .slider_nav_btn .thumbnail_slide.green {
  background: green;
}
.slider_nav .slider_nav_btn .thumbnail_slide.purple {
  background: purple;
}
.slider_nav .slider_nav_btn .thumbnail_slide.yellow {
  background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="portfolio_slider">
        <div class="viewport">
            <div class="slider_wrap">
                <div class="slide active"><div class="main_slide red"></div></div>
                <div class="slide"><div class="main_slide blue"></div></div>
                <div class="slide"><div class="main_slide green"></div></div>
                <div class="slide"><div class="main_slide purple"></div></div>
                <div class="slide"><div class="main_slide yellow"></div></div>
            </div>
            <div class="slider_btns">
                <div class="prev_btn slider_arrow"> PREV </div>
                <div class="next_btn slider_arrow"> NEXT </div>
            </div>
        </div>
</div>
<div class="slider_nav">
    <div class="slider_nav_btn active"><div class="thumbnail_slide red"></div></div>
    <div class="slider_nav_btn"><div class="thumbnail_slide blue"></div></div>
    <div class="slider_nav_btn"><div class="thumbnail_slide green"></div></div>
    <div class="slider_nav_btn"><div class="thumbnail_slide purple"></div></div>
    <div class="slider_nav_btn"><div class="thumbnail_slide yellow"></div></div>
</div>

1
  • Благодарю вас от всей души. Ваш код конечно логичнее. А где еще перемудрил? И еще такой вопрос: логичнее ли будет использовать для элементов список li нежели div? Или это на вкус и цвет? 15 июн 2019 в 18:34

Ваш ответ

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

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