Question

我创建了一个基本的2滑块，我使用了光滑的滑块同步选项将它们同步在一起，除了其中一个滑块（左一个）过时之外，整个组件都很好用，我可以看到下一个和上一个的一部分幻灯片数据，这不是我想要看到的，这可能是由于我的样式和浮雕样式之间的冲突引起的。

当前问题

预期样式

我没有注意到这个问题，因为每张幻灯片具有不同的内容量（小段或大段），而我只使用全部相同的文本，这使我感到高兴。

如何解决此问题，这是我的整个代码。

$(document).ready(function () {
    var initialBg = $(".d-innerSlide-right-control").first().attr('background');
    $('.d-slideBg').css('background-image', 'url(' + initialBg + ')');


    $('.d-innerSlide-left').slick({
       slidesToShow: 1,
       slidesToScroll: 1,
       vertical: true,
       arrows: true,
       fade: false,
       draggable: false,
       asNavFor: '.d-innerSlide-right',
    });

    $('.d-innerSlide-right').slick({
       slidesToShow: 5,
       slidesToScroll: 1,
       asNavFor: '.d-innerSlide-left',
       dots: false,
       draggable: false,
       focusOnSelect: true,

    });


    //remove active class from all thumbnail slides
    $('.d-innerSlide-right .d-innerSlide-left').removeClass('slick-active');

    //set active class to first thumbnail slides
    $('.d-innerSlide-right .d-innerSlide-left').eq(0).addClass('slick-active');

    // On before slide change match active thumbnail to current slide
    $('.d-innerSlide-left').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
       var mySlideNumber = nextSlide;
       $('.d-innerSlide-right .d-innerSlide-left').removeClass('slick-active');
       $('.d-innerSlide-right .d-innerSlide-left').eq(mySlideNumber).addClass('slick-active');
    });


    $('.d-innerSlide-right-control').on('click', function (e) {
       e.preventDefault();

       //$('.d-slideBg').css('background-image', 'url(' +  + ')');

       var background = $(this).attr('background');
       $('.d-slideBg').css('background-image', 'url(' + background + ')');
    })

    $(window).resize(function () {
       $('.d-innerSlide-right')[0].slick.refresh();
       $('.d-innerSlide-left')[0].slick.refresh();
    });
 })

h1, h2, h3, h4, h5, h6 {
  font-family: 'Teko', sans-serif;
}
html {
  font-size: 18px;
}
@media (min-width: 576px) {
  .container {
    max-width: 540px;
 }
}
@media (min-width: 768px) {
  .container {
    max-width: 720px;
 }
}
@media (min-width: 992px) {
  .container {
    max-width: 960px;
 }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1400px;
 }
}
h1, .h1 {
  font-size: 3.815rem;
}
h2, .h2 {
  font-size: 2.441rem;
}
h3, .h3 {
  font-size: 1.563rem;
}
h4, .h4 {
  font-size: 1.25rem;
}
.vlognow-3in1-vSlider .d-slideBg {
  background-image: url(../img/slide1.jpg);
  background-size: cover;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
 /*padding-top: 10%;
 */
}
.vlognow-3in1-vSlider .vlognow-verticle-slider .d-innerSlide-left-col {
  background: linear-gradient(90deg, #232f39 50.1%, #fff 49.9%);
}
.vlognow-3in1-vSlider .vlognow-verticle-slider .d-innerSlide-right .slick-slide {
  opacity: 1;
  overflow: inherit;
}
.vlognow-3in1-vSlider .vlognow-verticle-slider .d-innerSlide-left .d-innerSlide-left-slide {
  position: relative;
}
.vlognow-3in1-vSlider .vlognow-verticle-slider .slick-next {
  display: none !important;
}
.vlognow-3in1-vSlider .vlognow-verticle-slider .slick-prev {
  display: none !important;
}
.vlognow-3in1-vSlider .vlognow-verticle-slider .d-innerSlide-right-wrap ul {
  padding: 0px;
  list-style: none;
  margin-bottom: 0px;
}
.vlognow-3in1-vSlider .vlognow-verticle-slider .d-innerSlide-right-wrap li {
  border-top: 1px solid #ccc;
}
.vlognow-3in1-vSlider .vlognow-verticle-slider .d-innerSlide-right-wrap li a {
  padding: 20px 30px;
  width: 100% !important;
  display: inline-block;
  color: #d4272e;
  text-decoration: none;
}
.vlognow-3in1-vSlider .vlognow-verticle-slider .d-innerSlide-right-wrap li a:hover:before {
  content: "\f124";
  position: absolute;
  top: 0px;
  font-family: 'Ionicons';
  left: -40px;
  color: #fff;
  width: 40px;
  height: 100%;
  z-index: 100;
  padding: 20px;
  background-color: #d4272e;
}
.vlognow-3in1-vSlider .vlognow-verticle-slider .d-innerSlide-right-wrap li a:focus {
  outline: none;
}
.vlognow-3in1-vSlider .vlognow-verticle-slider .d-innerSlide-right-wrap li {
  position: relative;
}
.vlognow-3in1-vSlider .vlognow-verticle-slider .d-innerSlide-right-wrap li a:hover {
  color: #fff;
  transition: 0.4s;
  position: relative;
  background-color: #d4272e;
}
.vlognow-3in1-vSlider .vlognow-verticle-slider .slick-track {
  width: 100% !important;
}
.vlognow-3in1-vSlider .vlognow-verticle-slider .d-innerSlide-right .slick-slide {
  width: 100% !important;
  height: auto;
}
.vlognow-3in1-vSlider .d-innerSlide-right {
 /*.slick-current {
    li:after {
      content: "\f124";
      position: absolute;
      top: 1px;
      font-family: $icon-font;
      left: -40px;
      color: #fff;
      width: 40px;
      height: 97%;
      z-index: 100;
      padding: 20px;
      background-color: $primary;
   }
 }
 */
}
.vlognow-3in1-vSlider .d-innerSlide-right .slick-current {
  background-color: #d4272e;
}
.vlognow-3in1-vSlider .d-innerSlide-right .slick-current a {
  color: #fff !important;
  outline: none;
}
.vlognow-3in1-vSlider .d-innerSlide-right .slick-current:hover {
  background-color: #d4272e;
}
.vlognow-3in1-vSlider .d-innerSlide-right .slick-current:hover a {
  color: #fff !important;
  outline: none;
}
.vlognow-3in1-vSlider .d-innerSlide-right .slick-list {
  overflow: inherit !important;
}
@media (max-width: 991px) {
  .vlognow-3in1-vSlider .vlognow-verticle-slider .d-innerSlide-left-col {
    background: transparent;
 }
  .vlognow-3in1-vSlider .d-innerSlide-left-wrap {
    background-color: #232f39;
 }
  .vlognow-3in1-vSlider .d-innerSlide-right-wrap {
    background-color: #fff;
 }
  .vlognow-3in1-vSlider .d-innerSlide-right .slick-current li:after {
    content: '' !important;
    width: auto;
    height: 97%;
    left: 0;
    padding: 20px 8px;
 }
  .vlognow-3in1-vSlider .d-innerSlide-right-wrap li a:hover:before {
    content: '' !important;
    width: auto !important;
    height: 97%;
    left: 0 !important;
    width: auto;
    padding: 20px 8px !important;
 }
  .vlognow-3in1-vSlider .d-slideBg {
    padding: 15px;
 }
}

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>slick slider</title>
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
      integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
   <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
      integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" />
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" />
   <link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
   <link rel="stylesheet" href="css/style.css">



<body>
   <section class="vlognow-3in1-vSlider ">
      <div class="py-5 d-slideBg ">
         <div class="container">
            <div class="row">
               <div class="col-lg-12">
                  <div class=" vlognow-verticle-slider">
                     <div class="col-md-9 p-0 d-innerSlide-left-col mx-auto">
                        <div class="row  no-gutters d-flex justify-content-center">
                           <div class="col-md-12 col-lg-6 d-innerSlide-left-wrap align-self-center p-4">
                              <!-- MAIN SLIDES -->
                              <div class="d-innerSlide-left text-white">
                                 <div class="d-innerSlide-left-slide  ">
                                    <div class="mt-3">
                                       <h3> headline 1</h3>
                                       <p class="pr-3">
                                          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla, a! Itaque
                                          expedita et, optio voluptate voluptates eius eos ut. Eligendi officiis,
                                          suscipit ex voluptatum nesciunt a dolorum minus labore quas.
                                          expedita et, optio voluptate voluptates eius eos ut. Eligendi officiis,
                                          suscipit ex voluptatum nesciunt a dolorum minus labore quas.
                                       </p>
                                       <a href="#" class="btn btn-danger">click me </a>
                                    </div>
                                 </div>
                                 <div class="d-innerSlide-left-slide  ">
                                    <div class="mt-3">
                                       <h3> headline 2</h3>
                                       <p class="pr-3">

                                             Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla, a! Itaque
                                             expedita et, optio voluptate voluptates eius eos ut. Eligendi officiis,
                                             suscipit ex voluptatum nesciunt a dolorum minus labore quas.
                                

                                       </p>
                                       <a href="#" class="btn btn-danger">click me </a>

                                    </div>
                                 </div>
                                 <div class="d-innerSlide-left-slide  ">
                                    <div class="mt-3">
                                       <h3> headline 3</h3>
                                       <p class="pr-3">

                                             Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla, a! Itaque
                                             expedita et, optio voluptate voluptates eius eos ut. Eligendi officiis,


                                       </p>
                                       <a href="#" class="btn btn-danger">click me </a>

                                    </div>
                                 </div>
                                 <div class="d-innerSlide-left-slide  ">
                                    <div class="mt-3">
                                       <h3> headline 4</h3>
                                       <p class="pr-3">

                                             Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla, a! Itaque
                                             expedita et, optio voluptate voluptates eius eos ut. Eligendi officiis,
                                             suscipit ex voluptatum nesciunt a dolorum minus labore quas.
                                             expedita et, optio voluptate voluptates eius eos ut. Eligendi officiis,
                                             suscipit ex voluptatum nesciunt a dolorum minus labore quas.
                                             Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla, a! Itaque
                                             expedita et, optio voluptate voluptates eius eos ut. Eligendi officiis,
                             
                                       </p>
                                       <a href="#" class="btn btn-danger">click me </a>

                                    </div>
                                 </div>
                              </div>
                           </div>
                           <div class="col-md-12 col-lg-6 ">
                              <div class="d-innerSlide-right-wrap">
                                 <div class=" p-2 d-none d-sm-block">
                                    <h2>Streamed For greatness prod</h2>
                                 </div>
                                 <ul class="d-innerSlide-right">
                                    <li class="d-innerSlide-right-control" background="https://www.dropbox.com/s/5x8p2z5cvip5u38/chicago.jpg?dl=1">
                                       <a href="" class="main-active">

                                             Lorem ipsum, dolor sit amet consectetur
                                       </a>
                                    </li>
                                    <li class="d-innerSlide-right-control" background="https://www.dropbox.com/s/5x8p2z5cvip5u38/chicago.jpg?dl=1">
                                       <a href="" class="main-active">

                                             Lorem ipsum, dolor sit
                                       </a>
                                    </li>
                                    <li class="d-innerSlide-right-control" background="https://www.dropbox.com/s/5x8p2z5cvip5u38/chicago.jpg?dl=1">
                                       <a href="" class="main-active">

                                             Lorem ipsum, dolor sit
                                       </a>
                                    </li>
                                    <li class="d-innerSlide-right-control" background="https://www.dropbox.com/s/5x8p2z5cvip5u38/chicago.jpg?dl=1">
                                       <a href="" class="main-active">

                                             Lorem ipsum, dolor sit Lorem
                                       </a>
                                    </li>
                                 </ul>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </section>


   <style>
      .vlognow-3in1-vSlider .vlognow-verticle-slider .d-innerSlide-right-wrap .d-innerSlide-right .slick-current a:before {
         content: "\f124";
         position: absolute;
         top: 0px;
         font-family: "Ionicons";
         left: -40px;
         color: #fff;
         width: 40px;
         height: 100%;
         z-index: 100;
         padding: 20px;
         background-color: #d4272e;
      }

      @media (max-width: 991px) {
         .vlognow-3in1-vSlider .vlognow-verticle-slider .d-innerSlide-right-wrap .d-innerSlide-right .slick-current a:before {
            content: "";
            background-color: unset;
         }
      }
   </style>

</body>
















<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
   crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
   integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
   integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script src="js/extra-jquery.js"></script>
</body>

</html>

光滑的滑块同步，看到上一个/下一个滑块的一部分（不想看到）

0 个答案: