반응형
Bootstrap 3 Carousel이 새 슬라이드로 슬라이드하는 대신 새 슬라이드로 페이드 됨
수정되지 않은 Bootstrap 3을 사용하고 있습니다.
여기에
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="item active carousel-1">
<div class="container">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-large btn-primary" href="#">Sign up today</a></p>
</div>
</div>
</div>
<div class="item carousel-2">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-large btn-primary" href="#">Learn more</a></p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div><!-- /.carousel -->
부트 스트랩 3의 기본 CSS
.carousel {
position: relative;
}
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
}
.carousel-inner > .item {
position: relative;
display: none;
-webkit-transition: 0.6s ease-in-out left;
transition: 0.6s ease-in-out left;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
display: block;
height: auto;
max-width: 100%;
line-height: 1;
}
.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {
display: block;
}
.carousel-inner > .active {
left: 0;
}
.carousel-inner > .next,
.carousel-inner > .prev {
position: absolute;
top: 0;
width: 100%;
}
.carousel-inner > .next {
left: 100%;
}
.carousel-inner > .prev {
left: -100%;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
left: 0;
}
.carousel-inner > .active.left {
left: -100%;
}
.carousel-inner > .active.right {
left: 100%;
}
.carousel-control {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 15%;
font-size: 20px;
color: #ffffff;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
opacity: 0.5;
filter: alpha(opacity=50);
}
.carousel-control.left {
background-image: -webkit-gradient(linear, 0 top, 100% top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.0001)));
background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.5) 0), color-stop(rgba(0, 0, 0, 0.0001) 100%));
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.0001) 100%);
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.0001) 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
}
.carousel-control.right {
right: 0;
left: auto;
background-image: -webkit-gradient(linear, 0 top, 100% top, from(rgba(0, 0, 0, 0.0001)), to(rgba(0, 0, 0, 0.5)));
background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.0001) 0), color-stop(rgba(0, 0, 0, 0.5) 100%));
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0, rgba(0, 0, 0, 0.5) 100%);
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0, rgba(0, 0, 0, 0.5) 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
}
.carousel-control:hover,
.carousel-control:focus {
color: #ffffff;
text-decoration: none;
opacity: 0.9;
filter: alpha(opacity=90);
}
.carousel-control .icon-prev,
.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
position: absolute;
top: 50%;
left: 50%;
z-index: 5;
display: inline-block;
}
.carousel-control .icon-prev,
.carousel-control .icon-next {
width: 20px;
height: 20px;
margin-top: -10px;
margin-left: -10px;
font-family: serif;
}
.carousel-control .icon-prev:before {
content: '\2039';
}
.carousel-control .icon-next:before {
content: '\203a';
}
.carousel-indicators {
position: absolute;
bottom: 10px;
left: 50%;
z-index: 15;
width: 60%;
padding-left: 0;
margin-left: -30%;
text-align: center;
list-style: none;
}
.carousel-indicators li {
display: inline-block;
width: 10px;
height: 10px;
margin: 1px;
text-indent: -999px;
cursor: pointer;
border: 1px solid #ffffff;
border-radius: 10px;
}
.carousel-indicators .active {
width: 12px;
height: 12px;
margin: 0;
background-color: #ffffff;
}
.carousel-caption {
position: absolute;
right: 15%;
bottom: 20px;
left: 15%;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: #ffffff;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.carousel-caption .btn {
text-shadow: none;
}
@media screen and (min-width: 768px) {
.carousel-control .icon-prev,
.carousel-control .icon-next {
width: 30px;
height: 30px;
margin-top: -15px;
margin-left: -15px;
font-size: 30px;
}
.carousel-caption {
right: 20%;
left: 20%;
padding-bottom: 30px;
}
.carousel-indicators {
bottom: 20px;
}
}
내가 추가 한 일부 CSS :
.carousel {
height: 500px;
}
.carousel-inner {
height: 100%;
}
.carousel-1 {
height: 100%;
background: url(../images/carousel1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
background-size: cover;
}
.carousel-2 {
height: 100%;
background: url(../images/carousel2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
background-size: cover;
}
하지만 페이딩 효과가있는이 캐 러셀을 어떻게 할 수 있는지 알 수 없습니다. 활성 항목 일 때 불투명도를 1에서 0으로 변경하려고했는데 2 개의 애니메이션을 만들고 왼쪽으로 슬라이드하고 불투명도도 변경합니다 ..
도와주세요?
3.2.x에서 3.3.x 로의 업데이트는 변경으로 인해 여기에 설명 된 일부 솔루션과 다른 스레드에서 중단 되었습니다. " 최신 브라우저에서 캐 러셀 성능을 개선하기위한 변환 추가. "
Bootstrap 3.3.x를 사용하는 경우 여기에 해결책이 있습니다.
http://codepen.io/transportedman/pen/NPWRGq
기본적으로 "carousel-fade"클래스를 캐 러셀에 추가해야합니다.
<div class="carousel slide carousel-fade">
그리고 다음 CSS를 포함합니다.
/*
Bootstrap Carousel Fade Transition (for Bootstrap 3.3.x)
CSS from: http://codepen.io/transportedman/pen/NPWRGq
and: http://stackoverflow.com/questions/18548731/bootstrap-3-carousel-fading-to-new-slide-instead-of-sliding-to-new-slide
Inspired from: http://codepen.io/Rowno/pen/Afykb
*/
.carousel-fade .carousel-inner .item {
opacity: 0;
transition-property: opacity;
}
.carousel-fade .carousel-inner .active {
opacity: 1;
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
left: 0;
opacity: 0;
z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
opacity: 1;
}
.carousel-fade .carousel-control {
z-index: 2;
}
/*
WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
Need to override the 3.3 new styles for modern browsers & apply opacity
*/
@media all and (transform-3d), (-webkit-transform-3d) {
.carousel-fade .carousel-inner > .item.next,
.carousel-fade .carousel-inner > .item.active.right {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-inner > .item.prev,
.carousel-fade .carousel-inner > .item.active.left {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-inner > .item.next.left,
.carousel-fade .carousel-inner > .item.prev.right,
.carousel-fade .carousel-inner > .item.active {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
이것은 CSS 만 사용하여 수행 할 수 있습니다. 슬라이드 대신 페이드 전환으로 캐 러셀을 변경하려면 다음 스 니펫 (LESS 또는 표준 CSS) 중 하나 를 사용 하세요 .
적게
// Fade transition for carousel items
.carousel {
.item {
left: 0 !important;
.transition(opacity .4s); //adjust timing here
}
.carousel-control {
background-image: none; // remove background gradients on controls
}
// Fade controls with items
.next.left,
.prev.right {
opacity: 1;
z-index: 1;
}
.active.left,
.active.right {
opacity: 0;
z-index: 2;
}
}
일반 CSS :
/* Fade transition for carousel items */
.carousel .item {
left: 0 !important;
-webkit-transition: opacity .4s; /*adjust timing here */
-moz-transition: opacity .4s;
-o-transition: opacity .4s;
transition: opacity .4s;
}
.carousel-control {
background-image: none !important; /* remove background gradients on controls */
}
/* Fade controls with items */
.next.left,
.prev.right {
opacity: 1;
z-index: 1;
}
.active.left,
.active.right {
opacity: 0;
z-index: 2;
}
몇 가지 좋은 답변이 있지만 제가 시도한 모든 솔루션의 문제점은 이미지가 서로 희미 해지지 않는다는 것입니다. 대신 첫 번째 것이 완전히 페이드 아웃되고 다음 것보다 페이드 인됩니다.
몇 시간의 테스트 후이 해결책을 찾았습니다. http://www.1squarepear.com/adding-a-responsive-bootstrap-image-carousel-that-fades-instead-of-slides/에 Thx
- HTML 코드에서 .carousel 요소의 .slide에서 .fade로 변경
CSS에 다음을 추가하십시오.
.carousel.fade { opacity: 1; } .carousel.fade .item { transition: opacity ease-out .7s; left: 0; opacity: 0; /* hide all slides */ top: 0; position: absolute; width: 100%; display: block; } .carousel.fade .item:first-child { top: auto; opacity: 1; /* show first slide */ position: relative; } .carousel.fade .item.active { opacity: 1; }
CSS 만 사용하여 페이드 효과 (기본 슬라이드를 고수하는 대신)를 얻을 수 있습니다. 스타일 시트에 추가
.carousel .item {
-webkit-transition: opacity 3s;
-moz-transition: opacity 3s;
-ms-transition: opacity 3s;
-o-transition: opacity 3s;
transition: opacity 3s;
}
.carousel .active.left {
left:0;opacity:0;z-index:2;
}
.carousel .next {
left:0;opacity:1;z-index:1;
}
css3에서 전환을 사용할 수 있습니다.
.carousel-fade .carousel-inner .item {
-webkit-transition-property: opacity;
transition-property: opacity;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
opacity: 0;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
opacity: 1;
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
left: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-control {
z-index: 2;
}나는 일반 .css를 사용했습니다. 훌륭하게 작동했습니다. bootstrap.min.css에서 다음을 삭제했습니다.
/* Fade transition for carousel items */
.carousel .item {
left: 0 !important;
-webkit-transition: opacity .4s;
/*adjust timing here */
-moz-transition: opacity .4s;
-o-transition: opacity .4s;
transition: opacity .4s;
}
.carousel-control {
background-image: none !important;
/* remove background gradients on controls */
}
/* Fade controls with items */
.next.left, .prev.right {
opacity: 1;
z-index: 1;
}
.active.left, .active.right {
opacity: 0;
z-index: 2;
}
부트 스트랩 3의 경우 이것이 내가 사용한 것입니다.
.carousel-fade .carousel-inner .item {
opacity: 0;
-webkit-transition-property: opacity;
-moz-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
}
.carousel-fade .carousel-inner .active {
opacity: 1;
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
left: 0;
opacity: 0;
z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
opacity: 1;
}
.carousel-fade .carousel-control {
z-index: 2;
}
에 대한 응답으로 gerardnll 's를 적은 코드를 대답 페이드 효과에 의해 부트 스트랩 3.3.x는 회전 목마를 연장 :
//
// Carousel Fade effect
// --------------------------------------------------
// inspired from http://codepen.io/Rowno/pen/Afykb
.carousel-fade {
.carousel-inner {
.item {
.opacity(0);
.transition-property(opacity);
//.transition-duration(.8s);
}
.active {
.opacity(1);
&.left,
&.right {
left: 0;
.opacity(0);
z-index: 1;
}
}
.next.left,
.prev.right {
.opacity(1);
}
}
.carousel-control {
z-index: 2;
}
}
// WHAT IS NEW IN 3.3:
// "Added transforms to improve carousel performance in modern browsers."
// now override the 3.3 new styles for modern browsers & apply opacity
@media all and (transform-3d), (-webkit-transform-3d) {
.carousel-fade {
.carousel-inner {
> .item {
&.next,
&.prev,
&.active.right,
&.active.left {
.opacity(0);
.translate3d(0; 0; 0);
}
&.next.left,
&.prev.right,
&.active {
.opacity(1);
.translate3d(0; 0; 0);
}
}
}
}
}
유일한 것은 .8s (대략)보다 길면 예상대로 작동하지 않는 전환 기간입니다. 누군가가이 이상한 행동을 해결할 해결책을 가지고있을 수도 있습니다.
참고 : LESS 코드에 .transition-duration(.8s);주석이 추가되었으므로 기본 캐 러셀 전환 기간이 사용됩니다. 당신은 가치를 가지고 놀 수 있고 효과를 볼 수 있습니다. 지속 시간 (> 0.8)이 길수록 페이드 효과가 덜 부드럽습니다.
Check this out : http://codepen.io/Rowno/pen/Afykb
.carousel-fade {
.carousel-inner {
.item {
opacity: 0;
transition-property: opacity;
}
.active {
opacity: 1;
}
.active.left,
.active.right {
left: 0;
opacity: 0;
z-index: 1;
}
.next.left,
.prev.right {
opacity: 1;
}
}
Works marvellously, I hope it works
반응형
'IT TIP' 카테고리의 다른 글
| 동일한 서버에있는 다른 데이터베이스의 백업에서 새 데이터베이스를 생성 하시겠습니까? (0) | 2020.11.22 |
|---|---|
| 자바 스크립트에서 연도가 윤년인지 확인하십시오. (0) | 2020.11.22 |
| iOS 프로젝트에서 Pods-resources.sh 권한이 거부되었습니다. (0) | 2020.11.22 |
| jquery에서 함수를 실행하는 방법 (0) | 2020.11.22 |
| C #에서 한 번에 여러 루프를 중단하는 방법은 무엇입니까? (0) | 2020.11.22 |