Event собитие на slick slider(slick.next,slick.prev)

81
18 мая 2021, 06:20

Верстка мобильной версии slick slider.

Есть 6 блоков с картинками, данные блоки заключены в slick slider. У каждого из 6 блоков имеется скрытый div с определенным контентом, который располагается чуть ниже изображений.

У slick slider присутствуют стрелки .slick-next & .slick-prev. Отображение slick slider задано на экране 480px(slidesToShow: 1, slidesToScroll: 1)

Проблема заключается в том, чтобы показывать скрытый контент под определенным слайдом только на клик стрелок, т.е. при первоначальной загрузке страницы у меня показывается первый блок с контентом ниже, далее я тапаю на .slick-next и у меня показывается следующий слайд и контент меняется на контент второго слайда, а первый контент скрывается и далее если листать слайдер(пальцем) через draggable, чтобы контент тоже менялся.

На данный момент контент не меняется при клике на стрелки и обычным свайпом тоже не меняется.

Ссылка на fiddle 

    <div class="responsive_mob sum_rel_wide_slider_mob1">
<div class="picture1"><a class="js-open-box-mob" href="#/" data-target="#box1"><img class="pic1_img change_pic plus_mob" src="https://i.ibb.co/c1yQ7Pk/pic-plus.png" /></a></div>
<div class="picture1"><a class="js-open-box-mob" href="#/" data-target="#box2"><img class="pic1_img change_pic plus_mob" src="https://i.ibb.co/phfVDVq/pic-minus.png" /></a></div>
<div class="picture1"><a class="js-open-box-mob" href="#/" data-target="#box3"><img class="pic1_img change_pic plus_mob" src="https://i.ibb.co/c1yQ7Pk/pic-plus.png" /></a></div>
<div class="picture1"><a class="js-open-box-mob" href="#/" data-target="#box4"><img class="pic1_img change_pic plus_mob" src="https://i.ibb.co/phfVDVq/pic-minus.png" /></a></div>
<div class="picture1"><a class="js-open-box-mob" href="#/" data-target="#box5"><img class="pic1_img change_pic plus_mob" src="https://i.ibb.co/c1yQ7Pk/pic-plus.png" /></a></div>
<div class="picture1"><a class="js-open-box-mob" href="#/" data-target="#box6"><img class="pic1_img change_pic plus_mob" src="https://i.ibb.co/phfVDVq/pic-minus.png" /></a></div>
</div>
<p class="btsc_text_af_cat_pic">Выберите категорию</p>
<div class="dropdn_menu_mob">
<div class="js-block-of-text-mob block-of-text-mob active" id="box1"><a href="#" target="_blank"><img alt="pic1" class="pic1_img shadow_pics" src="https://i.ibb.co/CJXcjv0/pic-1.jpg" /></a></div>
<div class="js-block-of-text-mob block-of-text-mob" id="box2"><a href="#" target="_blank"><img alt="pic2" class="pic1_img shadow_pics" src="https://i.ibb.co/rbKt7Kh/pic-2.jpg" /></a> </div>
<div class="js-block-of-text-mob block-of-text-mob" id="box3"><a href="#" target="_blank"><img alt="pic2" class="pic1_img shadow_pics" src="https://i.ibb.co/qWvwGFK/pic-3.jpg"></a></div>
<div class="js-block-of-text-mob block-of-text-mob" id="box4"><a href="#" target="_blank"><img alt="pic3" class="pic1_img shadow_pics" src="https://i.ibb.co/GTQPzL4/pic-4.jpg" /></a> </div>
<div class="js-block-of-text-mob block-of-text-mob" id="box5"><a href="#" target="_blank"><img alt="pic5 обувь" class="pic1_img shadow_pics" src="https://i.ibb.co/Srx3Y1B/pic-5.jpg" /> </a></div>
<div class="js-block-of-text-mob block-of-text-mob" id="box6"><a href="#" target="_blank"><img alt="pic6" class="pic1_img shadow_pics" src="https://i.ibb.co/SJQ4WzS/pic-6.jpg" /> </a></div>
</div>

 jQuery('.slick-prev').click(function(){
    jQuery('#box1').hide();
    jQuery('#box2').show();
});

jQuery('.slick-next').click(function(){
    var $current = jQuery('.block-of-text-mob.active');
    jQuery('.block-of-text-mob').removeClass('active');
    $current.next().addClass('active');
});

         jQuery('.responsive_mob').slick({
                dots: false,
                speed: 300,
                slidesToShow: 1,
                slidesToScroll: 1,
                arrows: true,
                 infinite: false,
                responsive: [{
                        breakpoint: 1024,
                        settings: {
                            slidesToShow: 4,
                            slidesToScroll: 3,
                            infinite: true
                        }
                    }, {
                        breakpoint: 600,
                        settings: {
                            slidesToShow: 1,
                            slidesToScroll: 1,
                            infinite: false
                        }
                    }, {
                        breakpoint: 480,
                        settings: {
                            slidesToShow: 1,
                            slidesToScroll: 1,
                            infinite: false
                        }
                    }
                ]
            });



    .block-of-text.active{
        height: auto;
        }
        .picture1 {
            transition:0.5s;
          border:0;
          width:50px;
  height:150px;
        }
        .slick-slide img{
        }
        .btsc_main_pic{
            margin-top: 40px;
        }
        .btsc_txt{
            margin-bottom: 50px;
        }
.sum_rel_wide_slider_mob1{
max-width: 768px;
        text-align: center;
        margin: 0 auto;
        margin-bottom: 50px;
margin-top: 123px;
}
.plus_mob{
}
.dropdn_menu_mob{
display:block;
}
.sum_rel_wide_slider_mob1 img{
    width: 75%;
    margin-bottom: 30px;
    margin: 0 auto;
}
.block-of-text-mob:not(.active){
  display:none;
}
        .picture1 img {
          -webkit-transition: opacity 0.2s ease-in-out;
          -moz-transition: opacity 0.2s ease-in-out;
          -o-transition: opacity 0.2s ease-in-out;
          transition: opacity 0.2s ease-in-out;
        }

        .btsc_txt p{
          height: 77px;
          font-family: Roboto;
          font-size: 20px;
          font-weight: 300;
          font-style: normal;
          font-stretch: normal;
          line-height: 1.2;
          letter-spacing: normal;
          text-align: center;
          color: #2d2d2d;
        }
        .shadow_pics{
        position: relative;
    display: inline-block;
    min-width: 110px;
    margin-bottom: 18px;
    overflow: hidden;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    line-height: 105px;
    border-radius: 20px;
    box-shadow: 0 3px 10px rgba(0,0,0,.1);
    margin-right: 24px;
    margin-top: 5px;
    margin-left: 5px;
        }
        .btsc_text_af_cat_pic{
        font-family: Roboto;
          font-size: 20px;
          font-weight: 300;
          font-style: normal;
          font-stretch: normal;
          line-height: 1.05;
          letter-spacing: normal;
          text-align: left;
          color: #000000;
            margin-top: 43px;
            margin-bottom: 43px;
        }
.shadow_pics:hover{
    box-shadow: 0 0 5px rgba(0,0,0,0.9);
}
        .picture1 img{
        }
         .block-of-text{
         margin-left:15px;
          overflow: hidden;
        }
        .btsc_first_elem{
            text-align: left;
            margin-left: 209px;
            margin-top: 100px;
        }
        .svg_spisok{
        float: left;
            margin-right: 20px;
        }
        .txt_left_p{
        font-family: Roboto;
          font-size: 16px;
          font-weight: 300;
          font-style: normal;
          font-stretch: normal;
          line-height: 1.25;
          letter-spacing: normal;
          color: #354656;
        }

        .txt_left_second_p{
        font-family: Roboto;
          font-size: 14px;
          font-weight: normal;
          font-style: normal;
          font-stretch: normal;
          line-height: 1.14;
          letter-spacing: normal;
          color: #222124;
        margin-top: 13px;
        margin-left: 44px;
        }

        .txt_right_p{
        font-family: Roboto;
          font-size: 16px;
          font-weight: 300;
          font-style: normal;
          font-stretch: normal;
          line-height: 1.25;
          letter-spacing: normal;
          color: #354656;
        }

        .btsc_second_elem{
        margin-left: 719px;
            margin-top: -67px;
            text-align: left;
        }

        .svg_mestopolojenie{
        float: left;
            margin-right: 20px;
        }

        .txt_right_second_p{
        font-family: Roboto;
          font-size: 14px;
          font-weight: normal;
          font-style: normal;
          font-stretch: normal;
          line-height: 1.14;
          letter-spacing: normal;
          color: #222124;
            margin-top: 13px;
            margin-left: 45px;
        }
        .slick-prev,
                .slick-next {
             font-size: 0;
            line-height: 0;
            position: absolute;
            top: 44%;
            display: block;
            width: 20px;
            height: 20px;
            padding: 0;
            -webkit-transform: translate(0,-50%);
            -ms-transform: translate(0,-50%);
            transform: translate(0,-50%);
            cursor: pointer;
            color: transparent;
            border: none;
            outline: none;
            background: transparent;
            z-index: 3;
        background: -webkit-gradient(linear,right top,left top,from(hsla(0,0%,100%,0)),to(#fff));
            background: -webkit-linear-gradient(right,hsla(0,0%,100%,0),#fff);
            background: -o-linear-gradient(right,hsla(0,0%,100%,0),#fff);
            background: linear-gradient(270deg,hsla(0,0%,100%,0),#fff);
        }


        .slick-prev:before,.slick-next:before{
        display: block;
            content: "";
            width: 48px;
            height: 48px;
            font-size: 0;
            -webkit-transition: .2s cubic-bezier(.4,0,.2,1);
            -o-transition: .2s cubic-bezier(.4,0,.2,1);
            transition: .2s cubic-bezier(.4,0,.2,1);
            -webkit-transition-property: height,width;
            -o-transition-property: height,width;
            transition-property: height,width;
            border-radius: 50%;
        opacity: .9;
        }

        .slick-prev:before{
        background: #ececec;
        content:"<";
        }

        .slick-next:before{
        background: #ececec;
        content:">" 
        }

                .sum_rel_last {
                    margin-right: -12px!important;
                }

                .sum_rel_wide_slider {
                    margin: 16px auto;
                    width: calc(100% - 80px);
                }
                .sum_rel_wide_slider img {
                    width: 100%;
                }
                .sum_rel_dsk_img {
                    display: block;
                    width: 100%;
                }
                .sum_rel_mob_img {
                    display: none;
                }
                .sum_rel_wide_slider_mob {
                    display: block;
                }
        .slick-next{
        right: -5px;
        }
              .slick-prev{
        left: -63px;
        }
                .slick-slide {
                    display: none;
                    float: left;
                    height: auto;
                    min-height: 1px;
                    outline:none;
                }
        .slick-slide a {
            outline: none;
        }
                .slick-prev:hover,
                .slick-prev:focus,
                .slick-next:hover,
                .slick-next:focus {
                    color: #000;
                    outline: none;
                    background: #e2e2e2;
                    */
                }
                .slick-prev:hover,
                .slick-prev:focus,
                .slick-next:hover,
                .slick-next:focus {
                    color: #000;
                    outline: none;
                    background: transparent;
                }

        .slick-prev.hidden,
        .slick-next.hidden {
            opacity: 0;
            pointer-events:none;
        }
        .slick-disabled {
        display: none !important;
          pointer-events:none;
        }

                .slick-slide div {
                    width: 90%
                }

        @media screen and (max-width: 1366px) {
            .slick-next{
           right: 25px;
            }
            }

           @media screen and (max-width: 1024px) {
            .slick-next{
           right: 7px;
            }
            }


            @media screen and (max-width: 1023px) {
            .InD_wrapper {
            float: none;
            width:100%;
            }
            }
            @media screen and (max-width: 800px) {
            .sum_rel_wide_blk {
            display:none;
            }
            .sum_rel_wide_slider_mob{
            display:block;
            }
             .sum_rel_wide_slider_mob img {
                        width: 75%;
                    margin-bottom: 30px;
               margin: 0 auto;
                    }
             .sum_rel_mob_img {
                        width: 100%;
                        display: block;
                    }
            @media screen and (max-width: 414px) {
            .slick-next{
           right: 27px;
            }
        .slick-prev{
            left: 0px;
        }
            .slick-prev, .slick-next{
        top: 61%;
        }
        .sum_rel_wide_slider_mob img{
        margin-top:89px;
        }
.shadow_pics{
       margin-right: 19px;
    margin-left: -5.5px;
}
        .sum_rel_wide_slider_mob1{
display:block;
}
.sum_rel_wide_slider_mob{
display:none;
}
.dropdn_menu_mob{
display:block;
}
.dropdn_menu{
display:none;
}

            }
        @media screen and (max-width: 320px) {
            .slick-next{
           right: 3px;
            }
            }
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
<link rel="stylesheet" href="http://kenwheeler.github.io/slick/slick/slick-theme.css">
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
Answer 1

Во время навешивания событий нажатия на кнопку, элементов .slick-prev и .slick-next еще не существует.

Есть три способа решения.

  1. Навесить обработчик после инициализации (самый плохой).
  2. Делегирование событий (плохой).
  3. Использовать события самого слайдера при смене слайда (лучший).

Первый способ:

jQuery('.responsive_mob').slick({ 
  dots: false, 
  speed: 300, 
  slidesToShow: 1, 
  slidesToScroll: 1, 
  arrows: true, 
  infinite: false, 
  responsive: [{ 
    breakpoint: 1024, 
    settings: { 
      slidesToShow: 4, 
      slidesToScroll: 3, 
      infinite: true 
    } 
  }, { 
    breakpoint: 600, 
    settings: { 
      slidesToShow: 1, 
      slidesToScroll: 1, 
      infinite: false 
    } 
  }, { 
    breakpoint: 480, 
    settings: { 
      slidesToShow: 1, 
      slidesToScroll: 1, 
      infinite: false 
    } 
  }] 
}); 
 
jQuery('.slick-prev').on('click', function() { 
  jQuery('#box1').hide(); 
  jQuery('#box2').show(); 
}); 
jQuery('.slick-next').on('click', function() { 
  var $current = jQuery('.block-of-text-mob.active'); 
  jQuery('.block-of-text-mob').removeClass('active'); 
  $current.next().addClass('active'); 
});
.block-of-text.active { 
  height: auto; 
} 
 
.picture1 { 
  transition: 0.5s; 
  border: 0; 
  width: 50px; 
  height: 150px; 
} 
 
.btsc_main_pic { 
  margin-top: 40px; 
} 
 
.btsc_txt { 
  margin-bottom: 50px; 
} 
 
.sum_rel_wide_slider_mob1 { 
  max-width: 768px; 
  text-align: center; 
  margin: 0 auto; 
  margin-bottom: 50px; 
  margin-top: 123px; 
} 
 
.plus_mob {} 
 
.dropdn_menu_mob { 
  display: block; 
} 
 
.sum_rel_wide_slider_mob1 img { 
  width: 75%; 
  margin-bottom: 30px; 
  margin: 0 auto; 
} 
 
.block-of-text-mob:not(.active) { 
  display: none; 
} 
 
.block-of-text { 
  margin-left: 15px; 
  overflow: hidden; 
} 
 
.btsc_first_elem { 
  text-align: left; 
  margin-left: 209px; 
  margin-top: 100px; 
} 
 
.svg_spisok { 
  float: left; 
  margin-right: 20px; 
} 
 
.txt_left_p { 
  font-family: Roboto; 
  font-size: 16px; 
  font-weight: 300; 
  font-style: normal; 
  font-stretch: normal; 
  line-height: 1.25; 
  letter-spacing: normal; 
  color: #354656; 
} 
 
.txt_left_second_p { 
  font-family: Roboto; 
  font-size: 14px; 
  font-weight: normal; 
  font-style: normal; 
  font-stretch: normal; 
  line-height: 1.14; 
  letter-spacing: normal; 
  color: #222124; 
  margin-top: 13px; 
  margin-left: 44px; 
} 
 
.txt_right_p { 
  font-family: Roboto; 
  font-size: 16px; 
  font-weight: 300; 
  font-style: normal; 
  font-stretch: normal; 
  line-height: 1.25; 
  letter-spacing: normal; 
  color: #354656; 
} 
 
.btsc_second_elem { 
  margin-left: 719px; 
  margin-top: -67px; 
  text-align: left; 
} 
 
.svg_mestopolojenie { 
  float: left; 
  margin-right: 20px; 
} 
 
.txt_right_second_p { 
  font-family: Roboto; 
  font-size: 14px; 
  font-weight: normal; 
  font-style: normal; 
  font-stretch: normal; 
  line-height: 1.14; 
  letter-spacing: normal; 
  color: #222124; 
  margin-top: 13px; 
  margin-left: 45px; 
} 
 
.slick-prev, 
.slick-next { 
  font-size: 0; 
  line-height: 0; 
  position: absolute; 
  top: 44%; 
  display: block; 
  width: 20px; 
  height: 20px; 
  padding: 0; 
  -webkit-transform: translate(0, -50%); 
  -ms-transform: translate(0, -50%); 
  transform: translate(0, -50%); 
  cursor: pointer; 
  color: transparent; 
  border: none; 
  outline: none; 
  background: transparent; 
  z-index: 3; 
  background: -webkit-gradient(linear, right top, left top, from(hsla(0, 0%, 100%, 0)), to(#fff)); 
  background: -webkit-linear-gradient(right, hsla(0, 0%, 100%, 0), #fff); 
  background: -o-linear-gradient(right, hsla(0, 0%, 100%, 0), #fff); 
  background: linear-gradient(270deg, hsla(0, 0%, 100%, 0), #fff); 
} 
 
.slick-prev:before, 
.slick-next:before { 
  display: block; 
  content: ""; 
  width: 48px; 
  height: 48px; 
  font-size: 0; 
  -webkit-transition: .2s cubic-bezier(.4, 0, .2, 1); 
  -o-transition: .2s cubic-bezier(.4, 0, .2, 1); 
  transition: .2s cubic-bezier(.4, 0, .2, 1); 
  -webkit-transition-property: height, width; 
  -o-transition-property: height, width; 
  transition-property: height, width; 
  border-radius: 50%; 
  opacity: .9; 
} 
 
.slick-prev:before { 
  background: #ececec url(https://www.auchan.ru/pokupki/media/uploads/strelka_Left_150519.svg) no-repeat 50%; 
} 
 
.slick-next:before { 
  background: #ececec url(https://www.auchan.ru/pokupki/media/uploads/strelka_right_150519.svg) no-repeat 50%; 
} 
 
.sum_rel_last { 
  margin-right: -12px!important; 
} 
 
.sum_rel_wide_slider { 
  margin: 16px auto; 
  width: calc(100% - 80px); 
} 
 
.sum_rel_wide_slider img { 
  width: 100%; 
} 
 
.sum_rel_dsk_img { 
  display: block; 
  width: 100%; 
} 
 
.sum_rel_mob_img { 
  display: none; 
} 
 
.sum_rel_wide_slider_mob { 
  display: block; 
} 
 
.slick-next { 
  right: -5px; 
} 
 
.slick-prev { 
  left: -63px; 
} 
 
.slick-slide { 
  display: none; 
  float: left; 
  height: auto; 
  min-height: 1px; 
  outline: none; 
} 
 
.slick-slide a { 
  outline: none; 
} 
 
.slick-prev:hover, 
.slick-prev:focus, 
.slick-next:hover, 
.slick-next:focus { 
  color: #000; 
  outline: none; 
  background: #e2e2e2; 
  */ 
} 
 
.slick-prev:hover, 
.slick-prev:focus, 
.slick-next:hover, 
.slick-next:focus { 
  color: #000; 
  outline: none; 
  background: transparent; 
} 
 
.slick-prev.hidden, 
.slick-next.hidden { 
  opacity: 0; 
  pointer-events: none; 
} 
 
.slick-disabled { 
  display: none !important; 
  pointer-events: none; 
} 
 
.slick-slide div { 
  width: 90% 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"> 
<link rel="stylesheet" href="http://kenwheeler.github.io/slick/slick/slick-theme.css"> 
<div class="responsive_mob sum_rel_wide_slider_mob1"> 
  <div class="picture1"> 
    <a class="js-open-box-mob" href="#/" data-target="#box1"><img class="pic1_img change_pic plus_mob" src="https://i.ibb.co/c1yQ7Pk/pic-plus.png" /></a> 
  </div> 
  <div class="picture1"> 
    <a class="js-open-box-mob" href="#/" data-target="#box2"><img class="pic1_img change_pic plus_mob" src="https://i.ibb.co/phfVDVq/pic-minus.png" /></a> 
  </div> 
  <div class="picture1"> 
    <a class="js-open-box-mob" href="#/" data-target="#box3"><img class="pic1_img change_pic plus_mob" src="https://i.ibb.co/c1yQ7Pk/pic-plus.png" /></a> 
  </div> 
  <div class="picture1"> 
    <a class="js-open-box-mob" href="#/" data-target="#box4"><img class="pic1_img change_pic plus_mob" src="https://i.ibb.co/phfVDVq/pic-minus.png" /></a> 
  </div> 
  <div class="picture1"> 
    <a class="js-open-box-mob" href="#/" data-target="#box5"><img class="pic1_img change_pic plus_mob" src="https://i.ibb.co/c1yQ7Pk/pic-plus.png" /></a> 
  </div> 
  <div class="picture1"> 
    <a class="js-open-box-mob" href="#/" data-target="#box6"><img class="pic1_img change_pic plus_mob" src="https://i.ibb.co/phfVDVq/pic-minus.png" /></a> 
  </div> 
</div> 
<p class="btsc_text_af_cat_pic">Выберите категорию</p> 
 
<div class="dropdn_menu_mob"> 
  <div class="js-block-of-text-mob block-of-text-mob active" id="box1"> 
    <a href="#" target="_blank"><img alt="pic1" class="pic1_img shadow_pics" src="https://i.ibb.co/CJXcjv0/pic-1.jpg" /></a> 
  </div> 
  <div class="js-block-of-text-mob block-of-text-mob" id="box2"> 
    <a href="#" target="_blank"><img alt="pic2" class="pic1_img shadow_pics" src="https://i.ibb.co/rbKt7Kh/pic-2.jpg" /></a> 
  </div> 
  <div class="js-block-of-text-mob block-of-text-mob" id="box3"> 
    <a href="#" target="_blank"><img alt="pic2" class="pic1_img shadow_pics" src="https://i.ibb.co/qWvwGFK/pic-3.jpg"></a> 
  </div> 
  <div class="js-block-of-text-mob block-of-text-mob" id="box4"> 
    <a href="#" target="_blank"><img alt="pic3" class="pic1_img shadow_pics" src="https://i.ibb.co/GTQPzL4/pic-4.jpg" /></a> 
  </div> 
  <div class="js-block-of-text-mob block-of-text-mob" id="box5"> 
    <a href="#" target="_blank"><img alt="pic5 обувь" class="pic1_img shadow_pics" src="https://i.ibb.co/Srx3Y1B/pic-5.jpg" /> </a> 
  </div> 
  <div class="js-block-of-text-mob block-of-text-mob" id="box6"> 
    <a href="#" target="_blank"><img alt="pic6" class="pic1_img shadow_pics" src="https://i.ibb.co/SJQ4WzS/pic-6.jpg" /> </a> 
  </div> 
</div>

Второй способ:

jQuery(document).on('click', '.slick-prev', function() { 
  jQuery('#box1').hide(); 
  jQuery('#box2').show(); 
}); 
jQuery(document).on('click', '.slick-next', function() { 
  var $current = jQuery('.block-of-text-mob.active'); 
  jQuery('.block-of-text-mob').removeClass('active'); 
  $current.next().addClass('active'); 
}); 
jQuery('.responsive_mob').slick({ 
  dots: false, 
  speed: 300, 
  slidesToShow: 1, 
  slidesToScroll: 1, 
  arrows: true, 
  infinite: false, 
  responsive: [{ 
    breakpoint: 1024, 
    settings: { 
      slidesToShow: 4, 
      slidesToScroll: 3, 
      infinite: true 
    } 
  }, { 
    breakpoint: 600, 
    settings: { 
      slidesToShow: 1, 
      slidesToScroll: 1, 
      infinite: false 
    } 
  }, { 
    breakpoint: 480, 
    settings: { 
      slidesToShow: 1, 
      slidesToScroll: 1, 
      infinite: false 
    } 
  }] 
});
.block-of-text.active { 
  height: auto; 
} 
 
.picture1 { 
  transition: 0.5s; 
  border: 0; 
  width: 50px; 
  height: 150px; 
} 
 
.btsc_main_pic { 
  margin-top: 40px; 
} 
 
.btsc_txt { 
  margin-bottom: 50px; 
} 
 
.sum_rel_wide_slider_mob1 { 
  max-width: 768px; 
  text-align: center; 
  margin: 0 auto; 
  margin-bottom: 50px; 
  margin-top: 123px; 
} 
 
.plus_mob {} 
 
.dropdn_menu_mob { 
  display: block; 
} 
 
.sum_rel_wide_slider_mob1 img { 
  width: 75%; 
  margin-bottom: 30px; 
  margin: 0 auto; 
} 
 
.block-of-text-mob:not(.active) { 
  display: none; 
} 
 
.block-of-text { 
  margin-left: 15px; 
  overflow: hidden; 
} 
 
.btsc_first_elem { 
  text-align: left; 
  margin-left: 209px; 
  margin-top: 100px; 
} 
 
.svg_spisok { 
  float: left; 
  margin-right: 20px; 
} 
 
.txt_left_p { 
  font-family: Roboto; 
  font-size: 16px; 
  font-weight: 300; 
  font-style: normal; 
  font-stretch: normal; 
  line-height: 1.25; 
  letter-spacing: normal; 
  color: #354656; 
} 
 
.txt_left_second_p { 
  font-family: Roboto; 
  font-size: 14px; 
  font-weight: normal; 
  font-style: normal; 
  font-stretch: normal; 
  line-height: 1.14; 
  letter-spacing: normal; 
  color: #222124; 
  margin-top: 13px; 
  margin-left: 44px; 
} 
 
.txt_right_p { 
  font-family: Roboto; 
  font-size: 16px; 
  font-weight: 300; 
  font-style: normal; 
  font-stretch: normal; 
  line-height: 1.25; 
  letter-spacing: normal; 
  color: #354656; 
} 
 
.btsc_second_elem { 
  margin-left: 719px; 
  margin-top: -67px; 
  text-align: left; 
} 
 
.svg_mestopolojenie { 
  float: left; 
  margin-right: 20px; 
} 
 
.txt_right_second_p { 
  font-family: Roboto; 
  font-size: 14px; 
  font-weight: normal; 
  font-style: normal; 
  font-stretch: normal; 
  line-height: 1.14; 
  letter-spacing: normal; 
  color: #222124; 
  margin-top: 13px; 
  margin-left: 45px; 
} 
 
.slick-prev, 
.slick-next { 
  font-size: 0; 
  line-height: 0; 
  position: absolute; 
  top: 44%; 
  display: block; 
  width: 20px; 
  height: 20px; 
  padding: 0; 
  -webkit-transform: translate(0, -50%); 
  -ms-transform: translate(0, -50%); 
  transform: translate(0, -50%); 
  cursor: pointer; 
  color: transparent; 
  border: none; 
  outline: none; 
  background: transparent; 
  z-index: 3; 
  background: -webkit-gradient(linear, right top, left top, from(hsla(0, 0%, 100%, 0)), to(#fff)); 
  background: -webkit-linear-gradient(right, hsla(0, 0%, 100%, 0), #fff); 
  background: -o-linear-gradient(right, hsla(0, 0%, 100%, 0), #fff); 
  background: linear-gradient(270deg, hsla(0, 0%, 100%, 0), #fff); 
} 
 
.slick-prev:before, 
.slick-next:before { 
  display: block; 
  content: ""; 
  width: 48px; 
  height: 48px; 
  font-size: 0; 
  -webkit-transition: .2s cubic-bezier(.4, 0, .2, 1); 
  -o-transition: .2s cubic-bezier(.4, 0, .2, 1); 
  transition: .2s cubic-bezier(.4, 0, .2, 1); 
  -webkit-transition-property: height, width; 
  -o-transition-property: height, width; 
  transition-property: height, width; 
  border-radius: 50%; 
  opacity: .9; 
} 
 
.slick-prev:before { 
  background: #ececec url(https://www.auchan.ru/pokupki/media/uploads/strelka_Left_150519.svg) no-repeat 50%; 
} 
 
.slick-next:before { 
  background: #ececec url(https://www.auchan.ru/pokupki/media/uploads/strelka_right_150519.svg) no-repeat 50%; 
} 
 
.sum_rel_last { 
  margin-right: -12px!important; 
} 
 
.sum_rel_wide_slider { 
  margin: 16px auto; 
  width: calc(100% - 80px); 
} 
 
.sum_rel_wide_slider img { 
  width: 100%; 
} 
 
.sum_rel_dsk_img { 
  display: block; 
  width: 100%; 
} 
 
.sum_rel_mob_img { 
  display: none; 
} 
 
.sum_rel_wide_slider_mob { 
  display: block; 
} 
 
.slick-next { 
  right: -5px; 
} 
 
.slick-prev { 
  left: -63px; 
} 
 
.slick-slide { 
  display: none; 
  float: left; 
  height: auto; 
  min-height: 1px; 
  outline: none; 
} 
 
.slick-slide a { 
  outline: none; 
} 
 
.slick-prev:hover, 
.slick-prev:focus, 
.slick-next:hover, 
.slick-next:focus { 
  color: #000; 
  outline: none; 
  background: #e2e2e2; 
  */ 
} 
 
.slick-prev:hover, 
.slick-prev:focus, 
.slick-next:hover, 
.slick-next:focus { 
  color: #000; 
  outline: none; 
  background: transparent; 
} 
 
.slick-prev.hidden, 
.slick-next.hidden { 
  opacity: 0; 
  pointer-events: none; 
} 
 
.slick-disabled { 
  display: none !important; 
  pointer-events: none; 
} 
 
.slick-slide div { 
  width: 90% 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"> 
<link rel="stylesheet" href="http://kenwheeler.github.io/slick/slick/slick-theme.css"> 
<div class="responsive_mob sum_rel_wide_slider_mob1"> 
  <div class="picture1"> 
    <a class="js-open-box-mob" href="#/" data-target="#box1"><img class="pic1_img change_pic plus_mob" src="https://i.ibb.co/c1yQ7Pk/pic-plus.png" /></a> 
  </div> 
  <div class="picture1"> 
    <a class="js-open-box-mob" href="#/" data-target="#box2"><img class="pic1_img change_pic plus_mob" src="https://i.ibb.co/phfVDVq/pic-minus.png" /></a> 
  </div> 
  <div class="picture1"> 
    <a class="js-open-box-mob" href="#/" data-target="#box3"><img class="pic1_img change_pic plus_mob" src="https://i.ibb.co/c1yQ7Pk/pic-plus.png" /></a> 
  </div> 
  <div class="picture1"> 
    <a class="js-open-box-mob" href="#/" data-target="#box4"><img class="pic1_img change_pic plus_mob" src="https://i.ibb.co/phfVDVq/pic-minus.png" /></a> 
  </div> 
  <div class="picture1"> 
    <a class="js-open-box-mob" href="#/" data-target="#box5"><img class="pic1_img change_pic plus_mob" src="https://i.ibb.co/c1yQ7Pk/pic-plus.png" /></a> 
  </div> 
  <div class="picture1"> 
    <a class="js-open-box-mob" href="#/" data-target="#box6"><img class="pic1_img change_pic plus_mob" src="https://i.ibb.co/phfVDVq/pic-minus.png" /></a> 
  </div> 
</div> 
<p class="btsc_text_af_cat_pic">Выберите категорию</p> 
 
<div class="dropdn_menu_mob"> 
  <div class="js-block-of-text-mob block-of-text-mob active" id="box1"> 
    <a href="#" target="_blank"><img alt="pic1" class="pic1_img shadow_pics" src="https://i.ibb.co/CJXcjv0/pic-1.jpg" /></a> 
  </div> 
  <div class="js-block-of-text-mob block-of-text-mob" id="box2"> 
    <a href="#" target="_blank"><img alt="pic2" class="pic1_img shadow_pics" src="https://i.ibb.co/rbKt7Kh/pic-2.jpg" /></a> 
  </div> 
  <div class="js-block-of-text-mob block-of-text-mob" id="box3"> 
    <a href="#" target="_blank"><img alt="pic2" class="pic1_img shadow_pics" src="https://i.ibb.co/qWvwGFK/pic-3.jpg"></a> 
  </div> 
  <div class="js-block-of-text-mob block-of-text-mob" id="box4"> 
    <a href="#" target="_blank"><img alt="pic3" class="pic1_img shadow_pics" src="https://i.ibb.co/GTQPzL4/pic-4.jpg" /></a> 
  </div> 
  <div class="js-block-of-text-mob block-of-text-mob" id="box5"> 
    <a href="#" target="_blank"><img alt="pic5 обувь" class="pic1_img shadow_pics" src="https://i.ibb.co/Srx3Y1B/pic-5.jpg" /> </a> 
  </div> 
  <div class="js-block-of-text-mob block-of-text-mob" id="box6"> 
    <a href="#" target="_blank"><img alt="pic6" class="pic1_img shadow_pics" src="https://i.ibb.co/SJQ4WzS/pic-6.jpg" /> </a> 
  </div> 
</div>

Третий способ:

jQuery('.responsive_mob').slick({ 
  dots: false, 
  speed: 300, 
  slidesToShow: 1, 
  slidesToScroll: 1, 
  arrows: true, 
  infinite: false, 
  responsive: [{ 
    breakpoint: 1024, 
    settings: { 
      slidesToShow: 4, 
      slidesToScroll: 1, 
      infinite: true 
    } 
  }, { 
    breakpoint: 600, 
    settings: { 
      slidesToShow: 1, 
      slidesToScroll: 1, 
      infinite: false 
    } 
  }, { 
    breakpoint: 480, 
    settings: { 
      slidesToShow: 1, 
      slidesToScroll: 1, 
      infinite: false 
    } 
  }] 
}).on('beforeChange', function(event, slick, currentSlide, nextSlide) { 
  var $current = jQuery('.block-of-text-mob.active'); 
  jQuery('.block-of-text-mob').removeClass('active'); 
  $current.next().addClass('active'); 
});
.block-of-text.active { 
  height: auto; 
} 
 
.picture1 { 
  transition: 0.5s; 
  border: 0; 
  width: 50px; 
  height: 150px; 
} 
 
.btsc_main_pic { 
  margin-top: 40px; 
} 
 
.btsc_txt { 
  margin-bottom: 50px; 
} 
 
.sum_rel_wide_slider_mob1 { 
  max-width: 768px; 
  text-align: center; 
  margin: 0 auto; 
  margin-bottom: 50px; 
  margin-top: 123px; 
} 
 
.plus_mob {} 
 
.dropdn_menu_mob { 
  display: block; 
} 
 
.sum_rel_wide_slider_mob1 img { 
  width: 75%; 
  margin-bottom: 30px; 
  margin: 0 auto; 
} 
 
.block-of-text-mob:not(.active) { 
  display: none; 
} 
 
.block-of-text { 
  margin-left: 15px; 
  overflow: hidden; 
} 
 
.btsc_first_elem { 
  text-align: left; 
  margin-left: 209px; 
  margin-top: 100px; 
} 
 
.svg_spisok { 
  float: left; 
  margin-right: 20px; 
} 
 
.txt_left_p { 
  font-family: Roboto; 
  font-size: 16px; 
  font-weight: 300; 
  font-style: normal; 
  font-stretch: normal; 
  line-height: 1.25; 
  letter-spacing: normal; 
  color: #354656; 
} 
 
.txt_left_second_p { 
  font-family: Roboto; 
  font-size: 14px; 
  font-weight: normal; 
  font-style: normal; 
  font-stretch: normal; 
  line-height: 1.14; 
  letter-spacing: normal; 
  color: #222124; 
  margin-top: 13px; 
  margin-left: 44px; 
} 
 
.txt_right_p { 
  font-family: Roboto; 
  font-size: 16px; 
  font-weight: 300; 
  font-style: normal; 
  font-stretch: normal; 
  line-height: 1.25; 
  letter-spacing: normal; 
  color: #354656; 
} 
 
.btsc_second_elem { 
  margin-left: 719px; 
  margin-top: -67px; 
  text-align: left; 
} 
 
.svg_mestopolojenie { 
  float: left; 
  margin-right: 20px; 
} 
 
.txt_right_second_p { 
  font-family: Roboto; 
  font-size: 14px; 
  font-weight: normal; 
  font-style: normal; 
  font-stretch: normal; 
  line-height: 1.14; 
  letter-spacing: normal; 
  color: #222124; 
  margin-top: 13px; 
  margin-left: 45px; 
} 
 
.slick-prev, 
.slick-next { 
  font-size: 0; 
  line-height: 0; 
  position: absolute; 
  top: 44%; 
  display: block; 
  width: 20px; 
  height: 20px; 
  padding: 0; 
  -webkit-transform: translate(0, -50%); 
  -ms-transform: translate(0, -50%); 
  transform: translate(0, -50%); 
  cursor: pointer; 
  color: transparent; 
  border: none; 
  outline: none; 
  background: transparent; 
  z-index: 3; 
  background: -webkit-gradient(linear, right top, left top, from(hsla(0, 0%, 100%, 0)), to(#fff)); 
  background: -webkit-linear-gradient(right, hsla(0, 0%, 100%, 0), #fff); 
  background: -o-linear-gradient(right, hsla(0, 0%, 100%, 0), #fff); 
  background: linear-gradient(270deg, hsla(0, 0%, 100%, 0), #fff); 
} 
 
.slick-prev:before, 
.slick-next:before { 
  display: block; 
  content: ""; 
  width: 48px; 
  height: 48px; 
  font-size: 0; 
  -webkit-transition: .2s cubic-bezier(.4, 0, .2, 1); 
  -o-transition: .2s cubic-bezier(.4, 0, .2, 1); 
  transition: .2s cubic-bezier(.4, 0, .2, 1); 
  -webkit-transition-property: height, width; 
  -o-transition-property: height, width; 
  transition-property: height, width; 
  border-radius: 50%; 
  opacity: .9; 
} 
 
.slick-prev:before { 
  background: #ececec url(https://www.auchan.ru/pokupki/media/uploads/strelka_Left_150519.svg) no-repeat 50%; 
} 
 
.slick-next:before { 
  background: #ececec url(https://www.auchan.ru/pokupki/media/uploads/strelka_right_150519.svg) no-repeat 50%; 
} 
 
.sum_rel_last { 
  margin-right: -12px!important; 
} 
 
.sum_rel_wide_slider { 
  margin: 16px auto; 
  width: calc(100% - 80px); 
} 
 
.sum_rel_wide_slider img { 
  width: 100%; 
} 
 
.sum_rel_dsk_img { 
  display: block; 
  width: 100%; 
} 
 
.sum_rel_mob_img { 
  display: none; 
} 
 
.sum_rel_wide_slider_mob { 
  display: block; 
} 
 
.slick-next { 
  right: -5px; 
} 
 
.slick-prev { 
  left: -63px; 
} 
 
.slick-slide { 
  display: none; 
  float: left; 
  height: auto; 
  min-height: 1px; 
  outline: none; 
} 
 
.slick-slide a { 
  outline: none; 
} 
 
.slick-prev:hover, 
.slick-prev:focus, 
.slick-next:hover, 
.slick-next:focus { 
  color: #000; 
  outline: none; 
  background: #e2e2e2; 
  */ 
} 
 
.slick-prev:hover, 
.slick-prev:focus, 
.slick-next:hover, 
.slick-next:focus { 
  color: #000; 
  outline: none; 
  background: transparent; 
} 
 
.slick-prev.hidden, 
.slick-next.hidden { 
  opacity: 0; 
  pointer-events: none; 
} 
 
.slick-disabled { 
  display: none !important; 
  pointer-events: none; 
} 
 
.slick-slide div { 
  width: 90% 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"> 
<link rel="stylesheet" href="http://kenwheeler.github.io/slick/slick/slick-theme.css"> 
<div class="responsive_mob sum_rel_wide_slider_mob1"> 
  <div class="picture1"> 
    <a class="js-open-box-mob" href="#/" data-target="#box1"><img class="pic1_img change_pic plus_mob" src="https://i.ibb.co/c1yQ7Pk/pic-plus.png" /></a> 
  </div> 
  <div class="picture1"> 
    <a class="js-open-box-mob" href="#/" data-target="#box2"><img class="pic1_img change_pic plus_mob" src="https://i.ibb.co/phfVDVq/pic-minus.png" /></a> 
  </div> 
  <div class="picture1"> 
    <a class="js-open-box-mob" href="#/" data-target="#box3"><img class="pic1_img change_pic plus_mob" src="https://i.ibb.co/c1yQ7Pk/pic-plus.png" /></a> 
  </div> 
  <div class="picture1"> 
    <a class="js-open-box-mob" href="#/" data-target="#box4"><img class="pic1_img change_pic plus_mob" src="https://i.ibb.co/phfVDVq/pic-minus.png" /></a> 
  </div> 
  <div class="picture1"> 
    <a class="js-open-box-mob" href="#/" data-target="#box5"><img class="pic1_img change_pic plus_mob" src="https://i.ibb.co/c1yQ7Pk/pic-plus.png" /></a> 
  </div> 
  <div class="picture1"> 
    <a class="js-open-box-mob" href="#/" data-target="#box6"><img class="pic1_img change_pic plus_mob" src="https://i.ibb.co/phfVDVq/pic-minus.png" /></a> 
  </div> 
</div> 
<p class="btsc_text_af_cat_pic">Выберите категорию</p> 
 
<div class="dropdn_menu_mob"> 
  <div class="js-block-of-text-mob block-of-text-mob active" id="box1"> 
    <a href="#" target="_blank"><img alt="pic1" class="pic1_img shadow_pics" src="https://i.ibb.co/CJXcjv0/pic-1.jpg" /></a> 
  </div> 
  <div class="js-block-of-text-mob block-of-text-mob" id="box2"> 
    <a href="#" target="_blank"><img alt="pic2" class="pic1_img shadow_pics" src="https://i.ibb.co/rbKt7Kh/pic-2.jpg" /></a> 
  </div> 
  <div class="js-block-of-text-mob block-of-text-mob" id="box3"> 
    <a href="#" target="_blank"><img alt="pic2" class="pic1_img shadow_pics" src="https://i.ibb.co/qWvwGFK/pic-3.jpg"></a> 
  </div> 
  <div class="js-block-of-text-mob block-of-text-mob" id="box4"> 
    <a href="#" target="_blank"><img alt="pic3" class="pic1_img shadow_pics" src="https://i.ibb.co/GTQPzL4/pic-4.jpg" /></a> 
  </div> 
  <div class="js-block-of-text-mob block-of-text-mob" id="box5"> 
    <a href="#" target="_blank"><img alt="pic5 обувь" class="pic1_img shadow_pics" src="https://i.ibb.co/Srx3Y1B/pic-5.jpg" /> </a> 
  </div> 
  <div class="js-block-of-text-mob block-of-text-mob" id="box6"> 
    <a href="#" target="_blank"><img alt="pic6" class="pic1_img shadow_pics" src="https://i.ibb.co/SJQ4WzS/pic-6.jpg" /> </a> 
  </div> 
</div>

READ ALSO
метод concat в конструкторах на прототипе Array
javascript

метод concat в конструкторах на прототипе Array

Не понимаю поведение метода concat в конструкторах на прототипе Array; это БАГ или что ( ?

 107
Проблема с textContent [дубликат]
javascript

Проблема с textContent [дубликат]

Почему при клике на button, textContent у $alertApp появляется и тут же исчезает?

 283
Элементы списка разными цветами с помощью :nth-child()
CSS

Элементы списка разными цветами с помощью :nth-child()

Ребята, я новичок и пытаюсь изучать cssСейчас изучаю селектор nth-child

 99
Как сделать свой livetemplate css webstorm?
CSS

Как сделать свой livetemplate css webstorm?

Вот задачка: w115 превратить в width: 1

 115