Как сделать горизонтальную прокрутку навигации для сенсорного и мыши реагировать? - PullRequest
Новая
       7

Как сделать горизонтальную прокрутку навигации для сенсорного и мыши реагировать?

0 голосов
/ 23 января 2020

Я хочу использовать горизонтальную прокрутку для видео-отзывов в одной строке на адаптивном веб-сайте, но при этом возникает проблема. Ширина класса контейнера больше, чем col-12, и это оставляет пространство и показывает горизонтальную прокрутку на странице, когда я добавляю больше видео, пространство увеличивается, и я также использовал свойство переполнения для того же. я использую sass для этого шаблона. оставляет на странице горизонтальное пространство

.aspx файл 

 <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="pn-Product_Wrapper">
                    <div id="pnProduct" class="pn-Product">
                        <div id="pnProductContents" class="pn-Product_Contents">
                            <div class="pn-Product_Link" aria-selected="true">
                                <iframe src="https://www.youtube.com/embed/tgbNymZ7vqY" frameborder="0"></iframe>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

. css файл 

.pn-Product_Wrapper 
 {
position: relative;
padding: 0 11px;
box-sizing: border-box;
 }

.pn-Product {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
position: relative;
font-size: 0;
}

.pn-Product_Contents {
float: left;
-webkit-transition: -webkit-transform .2s ease-in-out;
transition: -webkit-transform .2s ease-in-out;
transition: transform .2s ease-in-out;
transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out;
}

.pn-Product_Link {
text-decoration: none;
color: #888;
font-size: 1.2rem;
font-family: -apple-system, sans-serif;
display: -webkit-inline-box;
display: inline-flex;
-webkit-box-align: center;
align-items: center;
min-height: 44px;
border: 1px solid transparent;
padding: 0 11px;
}

Ответы [ 2 ]

1 голос
/ 23 января 2020

можете сослаться на мой код ручки https://codepen.io/jishnuvp/pen/povGrGq 

$('.owl-carousel').owlCarousel({
  loop: true,
  margin: 25,
  nav: true,
  navText: [
    "<i class='fa fa-caret-left'></i>",
    "<i class='fa fa-caret-right'></i>"
  ],
  autoplay: true,
  autoplayHoverPause: true,
  responsive: {
    0: {
      items: 1
    },
    600: {
      items: 3
    },
    1000: {
      items: 5
    }
  }
})
.carousel-wrap {
  margin: 90px auto;
  padding: 0 5%;
  width: 80%;
  position: relative;
}

/* fix blank or flashing items on carousel */
.owl-carousel .item {
  position: relative;
  z-index: 100; 
  -webkit-backface-visibility: hidden; 
}
.owl-carousel .item iframe{
  width:100%;
}

/* end fix */
.owl-nav > div {
  margin-top: -26px;
  position: absolute;
  top: 50%;
  color: #cdcbcd;
}

.owl-nav i {
  font-size: 52px;
}

.owl-nav .owl-prev {
  left: -30px;
}

.owl-nav .owl-next {
  right: -30px;
}
<link rel="stylesheet" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.3/assets/owl.carousel.min.css">

<div class="carousel-wrap">
  <div class="owl-carousel">
    <div class="item"><iframe  src="https://www.youtube.com/embed/meOPUzdrs-Q" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
    <div class="item"><iframe src="https://www.youtube.com/embed/meOPUzdrs-Q" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
    <div class="item"><iframe src="https://www.youtube.com/embed/meOPUzdrs-Q" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
    
        <div class="item"><iframe src="https://www.youtube.com/embed/meOPUzdrs-Q" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
    
        <div class="item"><iframe src="https://www.youtube.com/embed/meOPUzdrs-Q" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
    
        <div class="item"><iframe src="https://www.youtube.com/embed/meOPUzdrs-Q" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>

  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.3/owl.carousel.min.js"></script>
    <script src="https://use.fontawesome.com/826a7e3dce.js"></script>
0 голосов
/ 23 января 2020

Вы можете использовать flexbox вместо float, заменив: 

.pn-Product_Contents {
float: left;

на это: 

.pn-Product_Contents {
display: flex;
flex-direction: column;

Для получения дополнительной информации: https://www.w3schools.com/css/css3_flexbox.asp

...