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

时间：2019-08-08 09:29:58

标签： javascript jquery html css slick

我有6个图片块，用于光滑的滑块中。 每个区块都有自己的div和另一张图片，当我单击“下一步”和“上一步”按钮时显示

然后我单击上一个按钮的问题，下一张幻灯片的内容显示

当我单击“下一步”和“上一步”按钮时，如何显示当前幻灯片中的当前div？ 当我单击滑块的末尾时，div内容不再显示

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>

1 个答案:

答案 0 :(得分：0)

如果需要，请查看此页面

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>

相关问题
最新问题