슬라이드 사이의 공백 부트 스트랩 캐 러셀

웹 사이트의 홈 페이지에서 슬라이더에 부트 스트랩 캐 러셀을 사용하고 있습니다.슬라이드 사이의 공백 부트 스트랩 캐 러셀

회전식 슬라이드가 자동으로 문제가 없지만 다음 및 이전 화살표를 클릭하면 슬라이드 사이에 ± 140px의 공백이 나타납니다.

나는 CSS를 검사하고 HTML의 모든 공백을 제거했지만 운이 전혀 없다.

회전 목마 HTML : 웹 사이트에

<div class="clearfix row slider"> 
<div class="clearfix carousel slide col-lg-12 col-md-12 col-sm-12 col-xs-12" data-ride="carousel" id="carousel-example-generic"> 
    <div class="carousel-inner"> 
     <div class="clearfix item active" style='background: url("/Content/Images/media/carousel/hero-test.jpg") no-repeat;'> 
      <div class="clearfix max-width carousel-caption"> 
       <h2>Hello. I'm Lorem. I'm a Slow 
       Cooker.</h2><span class="clearfix">And I'm quickly 
       changing the world</span> 
       <a class='fresco cta' data-fresco-caption="Lorem | How It Works" data-fresco-group='example' href='https://vimeo.com/105705114'>How It Works</a> 
      </div> 
      <video autoplay="" class="bgvid" loop="" poster="/Content/Images/default/video-bg.jpg"> 
       <source src="/Content/Images/media/bkvideo/1_Lorem-marquee.mp4" type="video/webm"> 
       <source src="polina.html" type="video/mp4"> 
      </video> 
     </div> 
     <div class="clearfix item" style='background: url("/Content/Images/media/carousel/1_marquee-2.jpg ") no-repeat;'> 
      <div class="clearfix max-width carousel-caption"> 
       <h2>Get to know Lorem.</h2><span class="clearfix">And learn the Lorem Story</span> 
       <a class="cta" href="/Pages/SarahsStory">Meet Lorem</a> 
      </div> 
     </div> 
    </div> 
    <a class="left carousel-control" data-slide="prev" href="#carousel-example-generic"><span><img alt=" " src="/Content/Images/default/arrow-slider.svg"></span></a> 
    <a class="right carousel-control" data-slide="next" href="#carousel-example-generic"><span><img alt=" " src="/Content/Images/default/arrow-slider.svg"></span></a> 
</div>

링크 : http://bit.ly/1BcaEb8은 - 남아프리카 공화국의 주요 회전 목마/슬라이더 문제가 무엇인지 파악

출처

2014-12-03 dk_french032

귀하의 링크에 슬라이더가 없습니다, 우리가 당신을 도울 수있는 workign 바이올린을 작성하십시오 :) –

그것은 일이야 홈 페이지의 메인 배너/슬라이더. 남아프리카 공화국을 클릭하십시오. –

클릭합니다.

회전식 슬라이드를하면 슬라이드가 포함 된 div에 왼쪽과 오른쪽의 클래스가 추가됩니다. 내 CSS의 왼쪽과 오른쪽 수레가 제거되었습니다 - 문제가 해결되었습니다 :)

출처

2014-12-03 08:37:18

네, 저는 비슷한 것을 가지고있었습니다. –

가시적으로 회전 내부 오버플로를 설정합니다.

.carousel-내측 {플로우 : 볼}

출처

2017-06-05 13:33:16

부트 스트랩 0.6s 전환 지연을 제공 캐 러셀의 기본 CSS로 갖는다. 이 전환은 두 슬라이드 사이에 공백을 표시합니다. Inorder는 css를 다시 작성하고! important를 사용하여 전환을 제거해야하는 공백을 숨기면 작동합니다.

bootstrap.css

.carousel-inner>.item { 
    display: none; 
    position: relative; 
    -webkit-transition: .6s ease-in-out left; 
    -o-transition: .6s ease-in-out left; 
    transition: .6s ease-in-out left; 
}

있는 style.css

.carousel-inner>.item { 
    -webkit-transition: 0s !important; 
    -o-transition: 0s !important; 
    transition: 0s !important; 
}

는 외부 또는 내부 CSS에서 위의 코드 (있는 style.css)을 복사하고 그 공백을 숨길

출처

2017-06-29 10:03:24

슬라이드 사이의 공백 부트 스트랩 캐 러셀

답변

관련 문제