如何修复光滑的滑块下一个和上一个事件按钮

Question

I have 6 picture blocks, which used in slick slider. Every block has his own div with another pic, which show when i click on next and prev button

And the problem that then i click on prev button, the content show of next slide

How i can make show the current div in current slide when i click next and prev button? And when i click to the end of slider, the div content don't show anymore

 jQuery('.responsive_mob').slick({ dots: false, speed: 300, slidesToShow: 1, slidesToScroll: 1, arrows: true, infinite: true, 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/CJXcjv0/pic-1.jpg" /></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/rbKt7Kh/pic-2.jpg" /></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/qWvwGFK/pic-3.jpg" /></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/GTQPzL4/pic-4.jpg" /></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/Srx3Y1B/pic-5.jpg" /></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/SJQ4WzS/pic-6.jpg" /></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>

Answer 1

Look at this page if you want:

https://jsfiddle.net/L7nbyp0r/3/

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

 .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/CJXcjv0/pic-1.jpg" /></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/rbKt7Kh/pic-2.jpg" /></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/qWvwGFK/pic-3.jpg" /></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/GTQPzL4/pic-4.jpg" /></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/Srx3Y1B/pic-5.jpg" /></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/SJQ4WzS/pic-6.jpg" /></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>